WordPressテーマ「Diver」の記事スペースって
結構カツカツというか目一杯広がっていてちょっと気になります…。

個人的には左右にもう少し余白が欲しいところ!

というわけでDiverのCSSをいじって記事スペースの左右に余白を入れましょう!

スポンサーリンク

Diverの子テーマで「padding」を指定

「padding」とは簡単にいうと”内側の余白”のことです。
記事スペースにpaddingを指定してあげれば余白ができるということです!

「Diver」では記事スペースのCSSは「single-post-main」というクラスで管理しています。

 外観 → テーマの編集 → diver_child → スタイルシート (style.css)

子テーマに以下のコードを書き込みましょう!

/* 記事スペースの余白 */
.single-post-main {
	padding : 15px 60px; /*余白の[上下]px [左右]pxを指定 */	
}

これで記事スペースの上下、左右の余白を指定できます。

カスタマイズした結果

ちょっと画像がわかりにくて申し訳ないですが…w
この通り!記事スペース左右の余白が大きくなりましたよね!

スマホ画面の落とし穴

実は先程のコードだとパソコン画面で見た時はキレイに見えるのですが…。

スマホ画面で同じページを見ると左右の余白が大きすぎて、
記事スペースがギューーーン!と縮まってしまいます。

 

そこで今度はスマホ画面で見た時は、
記事スペースの余白を小さくするコードを書きましょう!

まずは準備です!

 外観 → テーマの編集 → diver_child → スタイルシート (style.css)

子テーマに「スマホ画面の時はこのCSSを適応」というコードを書きましょう。

/* !!スマホの設定!! */
@media screen and (max-width:599px){

   /* ココにスマホ画面の時のCSSを記入 */

} /*スマホの設定ーここまで*/

このコードの中にスマホ画面の時のCSSを書き込んでいきます。

/*ココにスマホ画面の時のCSSを記入*/
/* 記事スペースの余白 */
.single-post-main {
	padding : 10px 8px; /*余白の[上下]px [左右]pxを指定 */	
}

これでスマホ画面では左右の余白が8pxと小さくなります。

スポンサーリンク
おすすめの記事