【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” で非表示にしています。