【SWELL】ショートコードの「PCだけ改行」にタブレットサイズも追加

【SWELL】ショートコードの「PCだけ改行」にタブレットサイズも追加

本ページにはプロモーションが含まれています

当サイトでも使用しているWordPressテーマ「SWELL」の便利なショートコードに「PCだけ改行」「スマホだけ改行」がありますが、タブレットサイズは「スマホだけ改行」が適用されてしまいます。
この記事は、タブレットサイズは「PCだけ改行」のショートコードで改行されるようにする設定方法です。

目次

CSSを “style.css” に追加

外観テーマファイルエディタstyle.cssに下記の内容を追加

@media not all and (min-width: 960px) {
#content .pc_ {
	display:block !important;
}
}
@media not all and (min-width: 600px) {
#content .pc_ {
	display:none !important;
}
}

@media (min-width: 960px) {
#content .sp_ {
	display:block !important;
}
}
@media (min-width: 600px) {
#content .sp_ {
	display:none !important;
}
}
Note

初期設定でCSSに “display:none !important;” で非表示が指定されているので ”!important” の優先順位を上書きするために上のセレクタ “#content” を追加して、一旦 “display:block” で表示させてから新たにメディアクエリを追加して “display:none” で非表示にしています。

WordPress 歴 。掲載記事は自身の備忘録のためでもあり、掲載内容を使用される場合は自己責任にてお願い致します。

※ 本ページにはプロモーションが含まれています

目次