WordPress記事中の囲い込み枠線をスマホにレスポンシブ反映させる方法

WordPressの記事作成をしていると本文中に使える装飾バリエーションを増やすために囲い込みの枠線をつけたくなることあると思います。

ただ、この場合cssをインラインで記述するとスマホ表示が難しいので別の対応をする必要があります。

今回は囲い込み枠線をつけてなおかつレスポンシブ対応させる方法を紹介していきます！

WordPress記事中の囲い込み枠線

記事中の囲い込み枠線とは下記のような装飾です▼

この囲い込み枠線のHTMLコードはこちらで表記することができます▼

しかし、この状態でスマホを表示してみるとこのようにレスポンシブ対応されません▼

これはコードを書き込む場所があまりよろしくないのでやり方を変えることで解決できます。

スマホ反映方法（レスポンブ設定）

スマホに反映させるためにはレスポンシブ設定をdesign.cssに書きこむ必要があります。
以下の【HTML】と【design.css】で対応するときれいに反映されます▼

◆HTML

◆design.css

するとスマホはこのようにレスポンシブに対応されます▼

以上が囲い込み枠線の表示をスマホで反映させる方法でした。

最後に

枠線の種類は今回点線表記にしましたが好みによってdashedの部分を書き換えるだけでバリエーションを変更することができます。

シンプルなものであれば、

solid 実線
dotted 点線
dashed 破線
double 二重線
groove 谷型
ridge 山型
inset 左と上が濃い
outset 右と下が濃い
hidden 非表示
none なし(デフォルト)

などがあるので自分好みにカスタマイズしてみてください！