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

Simplicity
http://wp-simplicity.com/

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

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

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

着地点

art-atu-theme-before

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

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

子テーマの追加

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

親テーマのCSSを確認

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

art-wp-admin-edit-theme

デフォルトでは子テーマが選択された状態ですから、編集するテーマを選択のプルダウンからSimplicity2を選択してください。
画面が切り替わったら、style.cssが選択されていることを確認してCSSを読み解いていていきます。

しばらく行くと以下を発見しました。

/************************************
** レイアウト(Layout)
************************************/
#container {
  padding:0;
  margin: 0 auto;
}

#header-in, #navi-in, #body-in, #footer-in{
  width: 1070px;
  margin: 0 auto;
  box-sizing: border-box;
}

ヘッダやボディのスタイルを指定していますね。
子テーマで、このIDを上書きしていきます。

子テーマのCSSを編集

bodyの拡張

再び編集するテーマを選択を操作し、Simplicity2 childを選択し、CSSを次のように修正してください。

@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20151225
*/

/* Simplicity子テーマ用のスタイルを書く */
#header-in, #navi-in, #body-in, #footer-in{
  width: 1170px;
}

CSSを書き終えたらファイルを更新ボタンを押下し、更新を確定します。

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

art-atu-theme-after-ng

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

mainの拡張

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

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

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

#main {
  width: 840px;
}

今度はどうでしょうか。
art-atu-theme-after-ok

イイですね!

最終的なCSS

子テーマのCSSを以下に上書きすることで、無事横幅を広げることができました。
簡単!

  • 子テーマのstyle.css
@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20151225
*/

/* Simplicity子テーマ用のスタイルを書く */
#header-in, #navi-in, #body-in, #footer-in{
  width: 1170px;
}
#main {
  width: 840px;
}

上記だけだとスマホで横スクロールがすごいことのになってしまいますので、かっこ悪いですが子テーマのモバイル用CSSに、上記を打ち消すスタイルを指定します。

  • 子テーマのmobile.css
@charset "UTF-8";

/*ここにモバイルのスタイルを書く*/
#header-in, #navi-in, #body-in, #footer-in{
  width: auto;
}
#main {
  width: auto;
}

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

art-atu-theme-widthen

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


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

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

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





この記事はtomita@atuwebがお届けしました!




2016年09月14日:mobile.cssの修正方法を追記、記事本文を若干修正、記事投稿後widthを1150pxに変更w

スポンサーリンク
ad_336
ad_336
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク
ad_336
コメントの入力は終了しました。