2016年04月07日

ブログの横幅を変更する方法

スポンサーリンク

パソコンでブログやウェブページを見ていると横幅が色々あるのに気がつきます。
サイトによって幅は、バラバラです。

ブログの場合、横幅全体が800〜1000ピクセルで、記事幅が500〜700ピクセルくらいかと思います。
記事幅で多いのは、600ピクセル代でしょうか。

何故、サイトによって横幅が違うのか?

現在のパソコンやスマホは、年々解像度が高くなっており、欧米ではスマホの普及率が80%近くあるらしいのです。
日本のスマホ普及率が、50%程度だそうです。

きっと、電話だけ利用の携帯使用料が安いのが原因でしょうね。
スマホ1台で通話とネットを使うより、携帯は通話だけでスマホはネットだけという2台持ちが、1番安くなるというアホな料金設定の問題ですね。

そして、日本ではまだまだ古いパソコンや携帯端末を使っている方が居ます。
そういった方が大きい横幅が必要なブログを観ると、ブラウザの下に横スクロールバーが出てきて、読みづらくなる可能性もあります。

どの時代のどの機器に合わせるかで解像度を決めます。

横幅を狭くすれば古い機器でも見やすくなりますが、高解像度モニターで見ると、左右の余白が多くてスカスカになります。
こういうサイトは、しょぼくて古い印象を与えます。

では、横幅を広くすれば良いか?
高解像度機器で見れる方は良いのですが、低解像度機器で見ている方は、構成が崩れてしまうので非常に見づらくなります。

高解像度デザインでサイトを運営されている方の中には、低解像度を切り捨てている方もいらっしゃいます。
どう考えるかは、運営者次第です。

テンプレートの横幅

このブログ「ド素人の簡単ブログテクニック」の全横幅は、超シンプル(右サイドバー)のテンプレートから変更していません。

・超シンプル(右サイドバー)全体の横幅は、960ピクセル。
・カテゴリなどが乗っているサイドバーは、240ピクセル。
・記事本文の幅は、680ピクセル。
・サイドバーと記事の余白は、40ピクセル。

何もしないとこんな感じで設定されています。
見づらさもなく、無難な設定です。

ブログの横幅調整

何もしなくても良いのですが、私はサイドバーの幅が狭く感じました。
サイドバーにある最近の記事は、記事タイトルがそのまま並ぶので狭いと文字がごちゃっとします。

それを解消するため、少し調整して下記のようにしようと思います。

・超シンプル(右サイドバー)全体の横幅は、960ピクセルで変えない。
・サイドバー幅は、240→300ピクセルに変更。
・記事本文幅は、680→630ピクセルに変更。
・サイドバーと記事の余白は、40→30ピクセルに変更。

960(横幅全体)−300(サイドバー)−630(記事幅)−30(余白)=0

これでぴったり横幅に収まります。
横幅以上に個々の幅を設定してしまうと、サイドバーが下に落ちますので、注意してください。


先ず、全体の横幅を確認します。
【デザイン】→【デザイン設定】→適用されているテーマタイトルをクリックして、CSSを表示します。

ソースコードのどこでも良いので、カーソルを乗せて(ctrl)+(f)でソース内から「#container」という文字を探してください。
そこに「width:960px;」という記載があります。
#container{
width:960px;
text-align:left;
margin:0 auto;
}
これが、ブログ全体の横幅を指定している部分です。
もし、全体の横幅を変更したい場合は、この数値を変更してください。

960ピクセルというのは、かなり前のパソコン画面の横幅です。
ただ、中古ノートパソコン市場では普通に流通しています。
タブレットなんかだと良くある解像度です。

こういった低解像度機器でネットをされている方も居ると思いますので、今回全体幅は変更していません。


サイドバーの幅を変更します。

先ほどと同じ検索方法で「#links」という文字を探してください。
「width:240px;」がサイドバーの幅なので、値を300pxに変更します。
#links{
width:300px; /* 240→300に変更 */
float:left;
padding:0px 0px 0px 0px;
line-height:1.5;
}
「width:240px;」がサイドバーの幅なので、上記のように値を300pxに変更します。
この時点では、全体の横幅を超えてしまっているので【プレビュー】すると、サイドバーが記事の下に落ちますが気にしないでください。


次に、記事本文の幅と余白を変更します。

先ほどと同じ検索方法で「#content」という文字を探してください。
「width:680px;」がサイドバーの幅なので、値を630pxに変更します。
「margin-right:40px;」が記事とサイドバーの隙間幅なので、値を30pxにします。
#content{
width:630px; /* 680→630に変更 */
float:left;
margin-right:30px; /* 40→30に変更 */
}
ここまで、変更が出来たら【プレビュー】してみてください。

サイドバーの幅が大きくなったのが確認出来ると思います。
各パーツが目的のサイズになったら【保存】ボタンを押してください。


記事の幅とサイドバーの幅は、読みやすさに読みにくさにも繋がります。
ご自身で読みやすく、選択しやすいと思う幅に調整してみましょう。

お疲れでした!

スポンサーリンク
posted by ノービス at 11:45 | Comment(0) | さくらブログ カスタマイズ
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: