WordPressテーマ「Sparkling」の余白を調整

このサイトは、現在Wordpressテーマの「sparkling」をカスタマイズして使用しています。

このサイトはレスポンシブデザインが採用されていて、iPhoneなどで見ると1カラムの縦長デザインになります。その際、横の余白が大きすぎるために文字が読みづらくなってしまうんです。そこで、横の余白を調整する方法を紹介します。

 

テーマのデザインを部分変更する方法

方法は色々あるのですが、前回の記事ではCSSファイルを直接書き換えたので今回はWordpressの多機能プラグインJetpackの機能を使います。

まずはWordpressのダッシュボードを開きます。
「外観」メニューの「CSS編集」を開きます。
ここで設定したCSS編集は、テンプレートのCSS設定を上書きします。上書きと言っても、元のCSSが書き換えられる訳ではありません。CSSは、同じセレクタ設定がある時に後から読み込まれた設定の方が優先されるという特徴があります。ここで設定したCSSは必ず一番最後に読み込まれるため、ここにオリジナルのCSSを記述する事で設定を上書きできるんです。

前置きが長くなりましたが、要するにここに書き換えたいCSSを新たに記述するだけOKです。

 

CSSのセレクタを調べる

ブログ記事の横の余白を定義しているCSSセレクタは、クラス名「post-inner-content」です。変更したいCSSのセレクタを調べるには、ブラウザの解析機能を使います。chromeだと、ページ内で右クリックして「要素を検証」で表示されます。これの使い方については解説してるサイトがたくさんあるので、割愛しますね。

 

設定内容

今回は左右の余白を調整したいので、paddingの設定を上書きします。初期設定で左右が45pxと指定されているので、ここを%指定に直します。%指定にする理由は、たとえばpadding-rightとpadding-leftを10pxに設定した場合、iPhoneでは違和感なく見えますが、PCサイトで見た時に左右の余白が広すぎて違和感が出てしまいます。

そこで、表示されているコンテンツエリアの左右の幅に対して変化する余白を指定するために、%を使用します。このあたりは実際に変更してみて見た目で合わせてしまって大丈夫です。

今回は4%で設定しました。CSS編集に記述したのは下記になります。

.post-inner-content {
	padding-left: 4%;
	padding-right: 4%;
}