ブログをサイトっぽくカスタマイズする。初心者がやるべき最低限必要な5つの工夫。

あいかわらず更新頻度のすくないブログです。もうだれもみてないよ！
ってことで、ブログをリニューアルしてみたよ。

以前のとくらべるとずいぶん見やすくなった（はず）なので、
そのノウハウなんかをあれこれします。

なんか、ブログはかっこわるい。
ブログとサイトの違い。
ブログカスタマイズのとりあえずな目標。
サイトっぽくするために必要な5つの工夫。
まとめ

なんか、ブログはかっこわるい。

いろいろと他のブログやサイトを見ているとなんとなく感じちゃうわけです。
「これは、ブログだ。これは、サイトだ。」

なぜかだいたいブログよりもサイトの方がかっこ良かったりします。
かっこいいだけでなくて、ブログより見やすかったりもします。
やはり、ブログはブログっぽいし、サイトはサイトっぽいわけです。

ブログとサイトの違い。

なんでそうみえちゃうのか。意識してもいないのに。
その原因はなんなのかっていうとざっくり２つ。

サイトはシンプルでおしゃれな感じ。

最近のサイトはとてもシンプルで、かつ、おしゃれ感が漂ってます。
ごちゃごちゃさせず、読者にとって読みやすいページデザイン。
記事の書き方なんてのもありますが、やはりページ全体がおっきい感じ。

ブログは窮屈な感じ。

これにつきます。ゴチャゴチャしてて読みにくい。
同じ内容の記事でもずいぶん見栄えが違ってきます。
ページ画面もなんか小さい。３分の２くらい？

ブログカスタマイズのとりあえずな目標。

そこで、今回の目標は「脱ブログ感。」

ぱっと見て、ブログかサイトかよくわかんないような、
見やすくすっきりした（おしゃれ）ブログを目指してみます。

ユーザーにとってブログが読みやすいということは、
せっかくの来訪者が、すぐにページ離脱することを多少なりとも防ぐはず。
そんなこんなで、長期的な面でのアクセス数アップを狙います。

サイトっぽくするために必要な5つの工夫。

以上のことをふまえて、以下の５つについてカスタマイズしてみました。

１：シンプルなブログテーマを選ぶ

まずはこれ。なんたってカスタマイズしやすい。
ブログの内容が個人の日記なら好きなテーマを選べば良いでしょうが、
広告を貼るならユーザーのこともちゃんと考えた方が得策。
シンプルなテーマをカスタマイズしていき、オリジナル感を漂わせます。

２：３カラムを２カラムにする

カラムというのは、列のことです。
３カラムは両側にサイドバーがあり、真ん中に記事があります。
２カラムは片側に記事、片側にサイドバーのこと。

３カラムを２カラムにする理由は、見やすくなるから。
ページ全体がすっきりし、カラム自体の横幅も大きくとれます。
広告も大きく取れるので、シンプルながらも目立ちます。

２カラムの場合、サイドバーを右にするか左にするか迷いどころですが、
こだわりがなければ右側サイドバーにしておく方が良いといわれています。

３：全体の横幅を大きくする

ブログとサイトの一番の違いはこれかも。
ブログの横幅はだいたい850px。最近のサイトの横幅は950pxくらい。

100px程しか変わりませんが、体感ではかなり印象が異なります。
最近のパソコンは画面が大きく横長になってきたためです。
横幅が狭いサイトは、一昔前な感じがしませんか？

ちなみにこのブログの場合、テーマ（スキン）はシンプルグレー２カラムを使用してます。
初期設定では、本文：600pxのサイドバー：200px。全体は840pxくらい。

「スタイルの編集＞スタイルシート」をカスタマイズすることで、
本文：640pxのサイドバー：300px、全体は960pxにしてます。
ちなみにあまった20pxは本部とサイドバーの隙き間です。

スタイルシートの/* 2column 右サイドバー */以下、
#container、#sidebar、#contentをいじればOKです。

これで、見た目がぐっとサイトに近づきます。

４：パン屑リストをつける

パン屑リストとはタイトル下にある「ホーム > カテゴリ名 > 記事名」の部分のこと。
あってもなくてもな感じですが、サイトっぽくはなります。締まる気がしてます。
ユーザーにとっては、どのカテゴリのどの記事を閲覧しているかが分かるので重宝します。

ファンブログの場合、以下のコードを追加すると表示されます。

<!-- topicpath -->
<div style="background:#eee; padding:6px 6px 6px 6px; margin:0px 0px 10px 0px;">
<span style="font-size: 100%; color: #666; font-weight: normal;">
<a href="{$BlogUrl$}">HOME</a> > <BlogEntryIfCategory><a href="{$BlogEntryCategoryLink$}">{$BlogEntryCategory$}</a> > </BlogEntryIfCategory>{$BlogEntryTitle$}</span></div>
<!-- /topicpath -->

▼コードを入れるところ。▼
メイン、ポータル、アーカイブ、一記事、プロフィールに書き加えてください。

<div id="main" class="clr">
ここにコードをいれる。
<div id="content">

ナビをつければいいじゃんって話もあるけど、若干むずかしいので、
それはまた次のステップのおはなし。

５：フッターをつける

ブログにはないけど、サイトにはあるもの。それがフッター。
ページの一番下の方にあるやつです。
「このサイトについて」とか「All Rights Reserved.なんちゃら」の類いのこと。

このへんは自己満足の範疇でしょうが、カンタンなので設定しといても良いと思います。
ファンブログの場合、以下のコードを入れ替えると、とりあえず表示されます。
あとはスタイルシートの#footerの部分で微調整すればOKです。

<footer>
|　<a href="{$BlogUrl$}">ホーム</a>　|　<a href="{$BlogUrl$}profile">このサイトについて</a>　|　<a href="{$BlogUrl$}portal">ポータルをみる</a>　|　<a href="{$BlogUrl$}biography">このサイトの歴史</a>　|　<a href="{$BlogUrl$}index1_0.rdf" target="_blank">RSS</a>　|
<p class="copyright">Copyright © <script type="text/javascript">
document.write(new Date().getFullYear());</script> <a href="{$BlogUrl$}">{$BlogName$}</a> All Rights Reserved.</p>
</footer>

▼コードを入れるところ。▼
メイン、ポータル、アーカイブ、一記事、プロフィールに書き加えてください。

<div id="footer">
ここにコードをいれる。
</div>

まとめ

とまあ、ざっくりとサイトっぽくする工夫について解説してきました。
たったこれだけでも、他とはかなり印象の違ったブログになることと思います。

ネットが普及するにつれ、世の中の情報は溢れまくってるので、
「情報をいかにはやく取得できるか」はユーザーにとって重要なポイントになってます。

数あるサイトやブログの中から、記事を読んでもらうにはそれなりの工夫が必要。
その工夫はきっとアクセスアップ・アフィリエイト報酬にもつながるはずです。