当ブログは SEO もばっちりな WordPress テーマのSimplicityを独自にカスタマイズして利用しております。

Simplicity
https://wp-simplicity.com/

開発元ではしばらく前に 2系 がリリースされておりましたが、当ブログではカスタマイズが足かせとなってしまい、ずっと放置状態。
本日ようやく 2系 にアップすることができました!

ついでに、ブログの横幅を広げるカスタマイズを施しましたので、手順をご紹介いたします。

追記: スマホで表示崩れがありましたが、解消済みです!
追記: 現在は、、、別のテーマです

着地点

SimplicityのWidthを1070から1170に広げる ! イメージ
SimplicityのWidthを1070から1170に広げる ! イメージ

技術系ブログをいろいろ見ていると、横幅にゆとりがあって美しいデザインのサイトがたくさんありますよね。
自ブログと比較すると 100px ほど広いことが分かりました。

それをリスペクトし、初期状態から 100px 横幅を広げます。

カスタマイズ方法

子テーマの追加

子テーマを反映していない場合はカスタマイズの前にぜひ子テーマをインストールして有効化しましょう。
以降、子テーマを有効にしている前提で手を進めます。

親テーマのCSSを確認

管理ツールにログインし外観 > テーマの編集に遷移します。

WordPress テーマのstyle.css編集画面
WordPress テーマのstyle.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 を書き終えたらファイルを更新ボタンを押下し、更新を確定します。

どれどれ、フロントの表示をチェックしてみましょう。

Simplicity カスタマイズ途中の表示チェック
Simplicity カスタマイズ途中の表示チェック

うーん、確かに横幅は伸びているようですが、、、
隙間が空きすぎですね。

mainの拡張

それではコンテンツ本体も幅を広げていきましょう。

#body-inには#main#sidebarの2つの子を持っています。 この #main は 740px で定義されていましたので、こちらも 100px 加算します。

子テーマの style.css に以下の定義を追加します。

1#main {
2  width: 840px;
3}

今度はどうでしょうか。

Simplicity カスタマイズ後 Width 1170の表示チェック
Simplicity カスタマイズ後 Width 1170の表示チェック

イイですね!

最終的な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}

幅の違いはこんな感じになりました。

Simplicity カスタマイズ前後の表示比較
Simplicity カスタマイズ前後の表示比較

変更前はちょっと横が狭く窮屈な感じがありました。
変更後は Width が広くなって、ぱっと見渡せる感じがいいですね!


また、「せっかくできたスキマ」には物を詰め込むのではなく、 幸せを収納する のがいいらしいですよ!

さよさんの開運・整理収納術

小西 紗代
出版社:宝島社  発売日:2015-12-04

Amazonで詳細を見る

たとえ少しでも勉強すると、やりたいことがどんどんできる。
そんなPHP、CSS、JavaScriptは初心者にも入りやすいものだと思います。

ですから「高い授業料を払ってもリターンが期待できる」スクールはオススメだったりします。 _ _


詳細! PHP 7+MySQL 入門ノート

大重 美幸
出版社:ソーテック社  発売日:2016-07-01

Amazonで詳細を見る

一歩先にいくWordPressのカスタマイズがわかる本

相原 知栄子,大曲 仁
出版社:翔泳社  発売日:2016-04-09

Amazonで詳細を見る

この記事の著者 Webrow (うぇぶろう)
Web アプリ開発、 Web 顧問 エンジニア、WordPress サポートいたします。