WordPressブログの横幅を変えたい時は?カスタマイズする方法

wordpress-width

当ブログはWordPressテーマ”First”を使用しています。

Firstのデザインでは、固定幅表示時の横幅は1220pxです。また、カスタマイズによって100%表示に切り替えることもできます。

今回は、PHPとCSSのカスタマイズでブログのメイン部分を任意の横幅に設定する手順を紹介します。

固定幅表示にした場合のデザイン

デフォルトの1220pxの横幅

デフォルトの1220pxの横幅

やはり、アイキャッチ画像にも記載したとおり、余白部分が広すぎて少し物足りない印象ですね。(私的には)

カスタマイザーで100%の画面表示を選択することもできますが、これはこれで記事やヘッダー部分の幅は変わらないために、少し違和感があります。

First100%画面表示

100%表示にするとヘッダーが妙に伸びた感じが…

自分ですべてをデザインできるのが理想的なのですが、私の技術的にまだ難しいので、固定幅表示の際の横幅を、1220pxから広げてみることにしました!

style.cssをいじってみるも…

横幅だからCSSを触れば簡単に変えられるのでは?と思い、style.cssのmax-width部分の値を変えてみたのですが横幅は変わりませんでした。

具体的には
.boxed .site {
max-width: 1220px;
}

この部分です。1220pxの部分を広げて1500とかにしてみたのですが全く変わりませんでした。

やはり、phpを触るしかないか…と考え試行錯誤していたら何とか横幅の変更ができたので、今から手順を紹介します!

1. functions.phpをカスタマイズ

別件で切り分けを行なっている時、記事部分の幅の上限値などはfunctions.phpで定義されているのではないかと気がつきました。

【WordPress】コメントが表示されない時の対処方法は…色々試してみました

具体的には、functions.phpの以下の部分です。

functions-php

‘width’ => 1220, が初期値です

おそらくヘッダー画像のサイズを定義するセクションですね。

画像のとおり、’width’部分の値を1500に変更します。

そのほか、アップロードする画像の幅の上限なども、functions.phpで定義されているようでした。

2. style.cssを編集

functions.phpを変更しただけでは、ブログの横幅は変わりません。

ここでCSSを変更する必要が出てきます。Firstで記事全体の横幅を定義しているのは以下の部分です。

CSSで記事全体の幅変更

max-widthを1220pxから1440pxへ変更

今回は、220pxプラスして、1440pxとしてみました。functions.phpで定義したサイズ以下であれば、指定する値に特に決まりはないです。

これで、ブログ全体の横幅が変わりました!

Before:横幅1220px

デフォルトの1220pxの横幅

デフォルトの1220pxの横幅

After:変更後の1440pxの横幅

1440pxへ変更後

1440pxへ変更後

横幅を少し広くすると、余白部分が小さくなり、スペースを有効活用できている感がありますね。

こちらの方法で変わるのは、全体の横幅のみです。記事のコンテンツ部分の横幅は一切変わりません。ご注意ください!

まとめ:横幅は簡単に変えられる

全体的な横幅は紹介した2ステップで簡単に変更することができます。

しかし、コンテンツ部分の横幅や画像幅などは変わらないために、その辺をカスタマイズしたい場合は別途作業が必要です。

私も記事部分の横幅を変えたいとは思っているのですが、現在試行錯誤中です。

コンテンツ幅を変えたい

WordPressは、テーマによって様々なカスタマイズ方法があります。今回の内容はテーマFirstを例に記載していますが、他のテーマでも応用できると思います。

今回の記事が誰かのお役に立てると幸いです。それでは、よいブログライフをお送りください^^

Sponsored Link



wordpress-width

コメントを残す

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

CAPTCHA