当ブログは SEO もばっちりな WordPress テーマのSimplicityを独自にカスタマイズして利用しております。
https://wp-simplicity.com/
開発元ではしばらく前に 2系 がリリースされておりましたが、当ブログではカスタマイズが足かせとなってしまい、ずっと放置状態。
本日ようやく 2系 にアップすることができました！
ついでに、ブログの横幅を広げるカスタマイズを施しましたので、手順をご紹介いたします。
追記： スマホで表示崩れがありましたが、解消済みです！
追記： 現在は、、、別のテーマです
着地点
技術系ブログをいろいろ見ていると、横幅にゆとりがあって美しいデザインのサイトがたくさんありますよね。
自ブログと比較すると 100px ほど広いことが分かりました。
それをリスペクトし、初期状態から 100px 横幅を広げます。
カスタマイズ方法
子テーマの追加
子テーマを反映していない場合はカスタマイズの前にぜひ子テーマをインストールして有効化しましょう。
以降、子テーマを有効にしている前提で手を進めます。
親テーマのCSSを確認
管理ツールにログインし外観 > テーマの編集に遷移します。
デフォルトでは子テーマが選択された状態ですから、編集するテーマを選択のプルダウンからSimplicity2を選択してください。
画面が切り替わったら、style.cssが選択されていることを確認して CSS を読み解いていていきます。
しばらく行くと以下を発見しました。
1/************************************
2** レイアウト（Layout）
3************************************/
4#container {
5 padding:0;
6 margin: 0 auto;
7}
8
9#header-in, #navi-in, #body-in, #footer-in{
10 width: 1070px;
11 margin: 0 auto;
12 box-sizing: border-box;
13}
ヘッダやボディのスタイルを指定していますね。 子テーマで、この ID を上書きしていきます。
子テーマのCSSを編集
bodyの拡張
再び編集するテーマを選択を操作し、Simplicity2 childを選択し、CSS を次のように修正してください。
1@charset "UTF-8";
2
3/*!
4Theme Name: Simplicity2 child
5Template: simplicity2
6Version: 20151225
7*/
8
9/* Simplicity子テーマ用のスタイルを書く */
10#header-in, #navi-in, #body-in, #footer-in{
11 width: 1170px;
12}
CSS を書き終えたらファイルを更新ボタンを押下し、更新を確定します。
どれどれ、フロントの表示をチェックしてみましょう。
うーん、確かに横幅は伸びているようですが、、、
隙間が空きすぎですね。
mainの拡張
それではコンテンツ本体も幅を広げていきましょう。
#body-inには#mainと#sidebarの2つの子を持っています。
この #main は 740px で定義されていましたので、こちらも 100px 加算します。
子テーマの style.css に以下の定義を追加します。
1#main {
2 width: 840px;
3}
今度はどうでしょうか。
イイですね！
最終的なCSS
子テーマの CSS を以下に上書きすることで、無事横幅を広げることができました。
簡単！
子テーマのstyle.css
1@charset "UTF-8";
2
3/*!
4Theme Name: Simplicity2 child
5Template: simplicity2
6Version: 20151225
7*/
8
9/* Simplicity子テーマ用のスタイルを書く */
10#header-in, #navi-in, #body-in, #footer-in{
11 width: 1170px;
12}
13#main {
14 width: 840px;
15}
上記だけだとスマホで横スクロールがすごいことになってしまいます。
かっこ悪いですが子テーマのモバイル用 CSS に、上記を打ち消すスタイルを指定します。
子テーマのmobile.css
1@charset "UTF-8";
2
3/*ここにモバイルのスタイルを書く*/
4#header-in, #navi-in, #body-in, #footer-in{
5 width: auto;
6}
7#main {
8 width: auto;
9}
幅の違いはこんな感じになりました。
変更前はちょっと横が狭く窮屈な感じがありました。
変更後は Width が広くなって、ぱっと見渡せる感じがいいですね！
また、「せっかくできたスキマ」には物を詰め込むのではなく、 幸せを収納する のがいいらしいですよ！
たとえ少しでも勉強すると、やりたいことがどんどんできる。
そんなPHP、CSS、JavaScriptは初心者にも入りやすいものだと思います。
