前回はサイトコンテンツエリアをデフォルトの474pxから650pxに拡大しました。もともとのレイアウトに改変をくわえていますから、余白部の調整など、微調整もくわえていきたいと思います。また、私はサイドバーのサイズはこのままで良いのですが、サイドバーの設定がどのようになっているかも見ていきたいと思います。

結果確認
前回までの結果確認

 

親テーマのスタイルシートで、コンテンツエリアの余白設定を確認する

管理画面の〔外観〕-〔テーマの編集〕をクリックし、〔編集するテーマ〕で親テーマを選択します。スタイルシートで、該当の設定箇所を探します。

Twenty Fourteenの構成
Twenty Fourteenの構成
親テーマ コンテントの余白設定
親テーマ コンテントの余白設定

.site-content {
margin-right: 29.04761904%;
margin-left: 182px;
}

 

TwentyFourteenは、レスポンシブWebデザインのテーマです。左側の余白が%で指定されています。
PC環境でフルサイズで見る人のために、メインサイドバーまでの余白がpx指定されていますが、タブレットなど表示できる画面サイズによって、まずメインサイドバーが下側に回りこみ、スマホなど、もっと小さな画面になると、コンテンツサイドバーも下側に回りこみます。私は記事やタイトル部を、少し左側に移動させたいので、右側の余白部を減らし、29.04761904%を27%に変更したいと思います。

①コンテンツエリアの余白設定を追記する

子テーマのスタイルシート編集
子テーマのスタイルシート編集

 

.site-content {
margin-right: 27%;
margin-left:  187px;
}

 

 

②結果を確認する
右の余白部を狭くして、左側の余白部を広くすることができました。

結果確認1
結果確認1

 

コンテンツサイドバーの調整

私は変更せず、デフォルトのまま使用しますが、必要な方もいると思うので、確認作業をしておきたいと思います。
まずは、親テーマのスタイルシートの設定を確認します。

 

コンテンツサイドバー親テーマの設定
コンテンツサイドバー親テーマの設定

.content-sidebar {
margin-left: -29.04761904%;
width: 29.04761904%;
}

 

サイト全体の幅の29.04761904%をいっぱいに使い、余白がないという設定ですね。さきほど、コンテンツエリアのほうで余白を設定しているので、余白を取らなくても、空いているように見えます。私は変更しませんが、-30%、30%とすれば、サイドコンテントの幅は広がりますし、-25%、25%とすれば、右側のサイドバーの幅が狭くなります。ただ、他のエリアとの兼ね合いで、使用できる領域が限られているので、それを超えるような設定をすると、レイアウトが崩れますが。

 

例)±25%、±30%

例

 

メインサイドバーは、コンテンツサイドバーよりも厄介です。
お話が長くなった上に、さらに長いお話が続いてしまうので、続きは次回。