Stinger3のデザインを1カラムにカスタマイズ。記事の読みやすさアップ

公開日： 2014.07.13
カテゴリ： Wordpress
タグ： WordPress
※本ブログには広告が含まれます

こんばんは。ブログのデザインをちょっと変えて、記事ページを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にしました。あまり幅を広げすぎても視線が左右に大きく動いて見づらくなるので注意したいところです。