Twenty Seventeen、メインを大きく、サイドを小さく( 投稿ページ )

Twenty Seventeenの”投稿ページ”はサイドバーが妙に幅を利かせて、メインが窮屈ですので、CSSを修正しました。

固定ページの幅を修正したい方は関連記事「Twenty Seventeen、メインとサイドの幅を変更( 固定ページ )」をご参照ください。

“投稿ページ”の幅を変更、完成図

今回の変更イメージは下図の通りです。

"投稿ページ"の幅を変更。ピンクが変更前、オレンジが変更後
“投稿ページ”の幅を変更。ピンクが変更前、オレンジが変更後

メインがメインらしく大きくなっています。幅の指定は、好みに合わせて変えられます。

ステップ1、修正箇所を探す

結論から言うと、Twenty Seventeenのメインはid=”primary”で、サイドがid=”secondary”という命名でした。投稿全体の幅はid=”wrap”で1,000pxです。

調べ方は、まず、調整したい箇所のエリアのid(もしくはclass)を探します。
変更したいブロックの開始地点だと思われる語句を反転し→右クリック→検証

既存のメインのエリアidを探す
修正箇所のエリアid(もしくはclass)を探す

ステップ2、現在の指定値を探す。

次に”id=”primary”の幅を指定している箇所を探します。

この設定のように、サイドバーがあって、404エラーページではないページは、wrapの1,000pxに対して58%の幅で、左側にフワフワと寄るように設定されています。

右側のstyle.css?ver=4.8.1をクリックしてソースデータモードに切り替えます。

指定箇所を探し、CSSのソースを表示
幅の指定箇所を探し、CSSのソースを表示

ステップ3、ソースモードで幅のシミュレーション

検証のソースデータモードで、幅を変えてシミュレーションしてみます。

Twenty Seventeenの場合は、Wrapに対する率で変更するスタイルです。

メイン:サイドの初期値は、58%:36%、私はこれを68%:26%へ変更しました。
※100% – {68% + 26%} = 6%で、6%がメインとサイドの間の余白です。
※合計が100%を超えるとサイドの方が下の段に移動します。

青色の部分が修正完了したコードですので、テーマにコピペします。

Twenty Seventeen メインとサイドの幅をシミュレーション
Twenty Seventeen メインとサイドの幅をシミュレーション
.wrap {
margin-left: auto;
margin-right: auto;
max-width: 1000px;
padding-left: 2em;
padding-right: 2em;
}
.has-sidebar:not(.error404) #primary {
float: left;
width: 68%;
}
.has-sidebar #secondary {
float: right;
padding-top: 0;
width: 26%;
}

ステップ4、修正をテーマへコピペ

上でコピーしたコードを、外観→CSS編集にペーストします。

Twenty Seventeen CSSを追記
Twenty Seventeen CSSを追記

とりあえず、これが一番簡単な方法だと思います。

余談、FC2、Seesaaで書いている他のブログと比較してみますと…

FC2、Seesaaでのブログと比較
FC2、Seesaaでのブログと比較

一番上のTwenty Seventeenは、wrapのwidth=904pxです。メインが押し潰されている感じがして息苦しく感じていました。

FC2でここ一年使っているテンプレート(メインブログ用)は、width=900pxで全体としてはあまり変わりませんが、メインが650px、サイド200pxなので、逆にちょっとサイドが狭いのです。

SeesaaのCustomise your Blog!は、width=960pxです。写真ブログにするために1カラムに仕立て直したものですが、1カラムだけに、メインが広々として、見やすいです。

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

ディスカッションに参加

2件のコメント

  1. はじめまして!
    最近WordPressをはじめた超初心者です。
    Twenty Seventeenの幅を変更したくて、コチラにたどり着きました。
    とても分かりやすくて、簡単に変更できました。
    どうもありがとうございました。

    1. Shibazoさん、コメントありがとうございます。
      モンハンにハマって返信が遅くもうしわけありません。

      Twenty Seventeenの幅、気になりますよね。
      お役に立ててうれしくおもいます!

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください