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

a_03

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

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

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

 

WordPress記事中の囲い込み枠線

a_04

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

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

 

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

 

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

a_01

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

 

スマホ反映方法(レスポンシブ設定)

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

◆HTML

 

◆design.css

 

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

 

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

 

最後に

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

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

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

 

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

 
スティーブン倉田の無料メルマガ

 

   

コメントを残す

サブコンテンツ

このページの先頭へ