こんばんは。ブログのデザインをちょっと変えて、記事ページを1カラムにしてみました。
変えた理由
変えた理由ですが、以下になります。
- 1カラムのほうが記事に集中できて読みやすいから
- PCとスマホで同じ見え方にして、統一感のあるスマホファーストなデザインにする
サイドバーのメニューで人気記事や広告を置くことが多いですが、サイドバーよりも記事下の方がクリックされることが多いです。自分はブログをやっているから他の人のブログデザインも気になってサイドバーを見るのですが、普通はそんなに見ないと思います。なので、1カラムで記事本文を読みやすくしようと思いました。
また、最近はスマホからのアクセスが半分以上なので、もうPCよりもスマホを優先しないといけない時代なのかなと思います。1カラム化によって、PCとスマホで同じような見え方になるので、PCで記事を書いてプレビューしても自然とスマホを重視することになると考えています。
カスタマイズ方法
カスタマイズ方法ですが、当ブログはWordPressで有名なStinger3テーマを使っているので、記事ページかどうか判定するis_single()という関数で使用し、記事ページとそれ以外のページで、記事とサイドバーを囲むdivタグを変えるということをしてます。記事ページ用の方のタグは、floatを消して、widthやmargin、paddingを広げるようにCSSを記述しています。
こんな感じの修正イメージです。mainとsideが2カラムな記事ページ以外のタグ、main_kijiとside_kijiが1カラムな記事ページのタグになります。
header.phpの最後
<?php if(is_single()) { ?>
<div id="main_kiji">
<?php } else { ?>
<div id="main">
<?php } ?>
sideber.phpの最初
<?php if(is_single()) { ?>
<div id="side_kiji">
<?php } else { ?>
<div id="side">
<?php } ?>
style.css(※今はレスポンシブにしているので、横幅が769px以上の場合)
#side {
float: right;
width: 336px;
}
#main {
float: left;
width: 600px;
padding: 20px 32px 20px 32px;
background-color: #FFF;
}
#side_kiji {
width: 728px;
padding: 10px 80px 40px;
margin: 0 60px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: #FFF;
}
#main_kiji {
width: 728px;
padding: 40px 80px 0;
background-color: #FFF;
margin: 0 60px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
記事ページの幅はGoogleアドセンスのビッグバナーがちょうど入る728pxにしました。あまり幅を広げすぎても視線が左右に大きく動いて見づらくなるので注意したいところです。
感想
1カラム化で余白を広く取ったことにより、ゴチャゴチャせずに読みやすくなったと思います。余白を無くしてきちっと敷き詰めたくなる気持ちもわかりますが、かえってごちゃごちゃして見づらくなると個人的には思います。
1カラムデザインはまだメジャーじゃないので、広告配置方法はもう少し検討の余地があるのかと思っています。ちょっと余白を変えただけでも大きく結果が違ってくると思うので、試行錯誤していきたいですね。幅が広いのでビッグバナーやダブルレクタングル大もできて、色々試し甲斐がありますよ。