CSS初心者がSimplicityで横幅を広げるカスタマイズにチャレンジ!

WordPressのカスタマイズをしていくという趣旨の記事ですが、前回はリンクのカスタマイズを行いました。

少しづつWordPressのカスタマイズにチャレンジしていきたいと思います😊

Simplicityテーマの横幅を変えてみたくなりました

ブログを始めてからずっとお世話になっているWordPressのテーマ【Simplicity】ですが、最近他のブログを見ていると横幅が少し狭く感じる事があるのでカスタマイズできないかチャレンジしてみることにしました!

現在の横幅を調べてみる

現在記事の横幅は

740pxになっているようです。

これを100px程広げてみたいと思います。

子テーマを追加してカスタマイズしよう

今回に限らずテーマをカスタマイズする場合は子テーマを追加してから子テーマを編集するようにしましょう。

親のテーマをカスタマイズした場合、テーマがアップデートされた時にカスタマイズしたCSSが消えてしまいます。

リンク Simplicityの子テーマはこちらから

子テーマをダウンロードしたらテーマに追加し、有効化します。

テーマのCSSの編集をしてみよう

まずは子テーマの編集の前に、どこの部分を編集すれば広がるのか

親テーマを調べてみる事にします。

現在の横幅を調べる

外観のテーマの編集から、Simplicityの親テーマを選択し

このまま下にスクロールすると…

スタイルシートという項目がありました!
ここから横幅に関係するコードを探さねば…

ありました!
レイアウトの項目、width:1070px; が全体の横幅のようですね!
これを

↑の部分をまるまるっとコピーしちゃいましょう!

ライブプレビューでの編集

外観からCSS編集をクリックすると、ライブプレピュー画面に移ります。

ライブプレビューといって、右にユーザーが実際に見るページをプレビューしながら編集が可能な機能です。

ここのレイアウト(全体・リスト)をクリックします。

ライブプレビュー画面で、前回コピーしたコードの横幅を示す数値に100pxを足し

↑のコードを貼り付けしてみると、横幅が変わりました!

…ですがこれではメインのコンテンツの部分と、右のサイドバーの間に不自然に隙間ができただけw

メインコンテンツの横幅も変えねばなりません!

メインコンテンツの横幅を編集する

さて、それでは先程と同様に親テーマ、メインコンテンツのレイアウトを調べます。

見つけた!
このwidth: 740px;となっているのが記事の部分の横幅に違いませんね!

CSSコードをコピーし、横幅に100px足しちゃいましょう♪

上記CSSコードをコピーしたら、次はCSS編集の、レイアウト(投稿・固定ページ)をクリックします。

コピーしたCSSコードをペースト!
メインコンテンツと右サイドバーの隙間が埋まりました!

まとめ

いざやってみると意外と簡単でしたね!
ライブプレビューがお手軽で便利!

これが変更前で

これが変更後!
若干ですが横幅に余裕が出て見渡せる感じが良いと思います!

次は何をカスタマイズしようかな?
また更新します!

ブログランキングに参加しています♪
応援クリックしてもらえるととても励みになります・・・(〃∇〃)

にほんブログ村 小遣いブログへ