みどりとくらす

バラとランと多肉と観葉植物と・・・

Frontier Options でブログの横幅を決めて、ヘッダー画像を設置する

本ブログでは、WordPress のテーマとして「Frontier」を選定。これまでも、別のブログを公開した時に適用しているので勝手は知っているはず。早速、基本から見直します。

私個人は、何といってもブログのレイアウトを決めます。最近は、スクリーンに合わせてブログのレイアウトが変わるようなデザインが良いらしいのですが、私個人は古い人間ですからブログは「固定幅」がお気に入り。ブラウザーを画面にいっぱいに広げて利用する・・・これが基本です。ただ、以前のようにブログの横幅を「1024px」にこだわる必要はなさそうです。というよりも、これまでこだわってきた「ブログの横幅は 1024px」という個人的なこだわりは古そうです。左右にできる余白が大きすぎるようにも思うし。私が利用している Surface 3 は「10.8インチ1920px x 1280px の液晶ディスプレイ」で、Surface 3 ですら、ブログの横幅が 1024px だと無駄な余白が大きく見える。

そこで、本ブログではこれまで利用したことのないブログの横幅を設定したい。当然ですが、その横幅に見合ったヘッダー画像を設置したい・・・実は、適用している「Frontier」には、既に標準で「Frontier Options」があり、各項目を設定することで、独自のブログを構築することができます。当然ですが Options は「子テーマ」にも引き継がれます。

では早速!

何はともあれネットで検索して、「ブログの横幅」に関する知識を収集。あるんですよね~素晴らしい記事が。本ブログで参考にさせて戴いたのは以下の公開投稿記事 3 つ。

特に参考になったのは「デザインは8の倍数でできている|1 pixel|サイバーエージェント公式クリエイターズブログ」です!先ずは、1024px より幅を大きくしたい!更に「8 の倍数」って事にこだわって、試行錯誤。「ブログ全体の幅」「メインコラム幅」「サイドバー幅」が 8 の倍数・・・そんな組み合わせがあるのかな~と色々と計算してみると・・・ありました!

項目 px
ブログ全体の横幅 (Container width) 1200px
メインコラム (Two Column Width: Contents) 816px (68%)
サイドバー (Two Column Width: Sidebar) 384px (32%)

設定は WordPress の管理画面から「外観」をクリックすると「Frontier Options」を選定すると以下のような画面が登場して、タブから「Layout」を設定します。

本ブログでは、典型的な「Layout」を選定し、単純にメインコラムに右側にサイドバーというレイアウト。最初に記述した自分勝手な黄金律は「パーセンテージ」で設定する必要がありますが、それでも簡単に変更ができます。

次に、ブログの顔!?である「ヘッダー画像」の決定ですが・・・以下の「Frontier Options」の「Display」タブで設定します。いわゆる「Header Logo」の部分になります。

前述のブログの幅を 1200px としたので、ヘッダー画像の横幅は自然と 1200px で決まり。課題は「Header Logo」に関する高さを設定すること。「低過ぎず、高過ぎず」の画像を設定する必要があります。

本ブログでは・・・「8 の倍数」にこだわって、384px にしてみました・・・偶然ですが、なかなか良いバランスだと一目見て感じましたが、あくまでも自分の嗜好です。ただ、384px は、サイドバーの幅と同じ構成で、なんとなく採用といったところでしょうか。

「Frontier Options」では、上記以外にも多くの Options を独自設定できますから、好みに合わせて設定すれば良いでしょう。本ブログでは詳細は必要に応じて公開していきます。

気楽にコメントして頂けますように!コメントは承認後の公開です。

(必須) スパム対策にご協力下さい。下記、数式を完成してコメント送信して下さい。

Copyright © 2016-2017 by Zero Cool. All rights researved. Frontier Theme