読者です 読者をやめる 読者になる 読者になる
MENU

はてなブログをカスタマイズ!僕が施した7つの術(すべ)

ブログネタ ブログネタ-はてな
スポンサーリンク

はてなブログのカスタマイズ

はてなブログは、一つのプラットフォームの上に存在するので、やや制限もありますがそれもそれで面白かったりします。今回は僕が施してきたカスタマイズを披露したいと思います。


見出しの細工

見出しはやっぱり目につくものでありたいし、見やすい為にも何かしらの工夫が必要だと思います。僕が見出しに工夫した点は2つ。画像の挿入と下線部です。

下線部については以下の記事を。
CSS 見出しの下に区切り線を表示する - 感謝のプログラミング 10000時間

画像に関しては以下の記事を
はてなブログに実施した、4つのデザインカスタマイズ - Banguardサイト

画像に関しては、はてなフォトライフを利用せずにDropboxの公開URLを利用しています。"Dropbox 公開URL"でググるとそれらの方法は載っていると思います。


SEOを意識して

はてなブログでは親カテゴリ、子カテゴリの設定ができないのでサーチエンジンに自分のブログの構造をうまく汲み取ってもらえない可能性があります。僕のブログは基本的に軸が決まっているので、そうでもないんですが、特に雑食系のブログには必須な機能だと思います。

それでも僕のブログにも導入させて頂きました。絶対に必要な事なので。下記の記事を参考にして頂ければ一発です!

http://www.ikedakana.com/entry/category-breadcrumb-update

実際に僕は一定の成果があったと思っています。


+1を目指す

この+1を目指すという意味は、1つの記事を読んでもらったらまた別の記事を読んでもらう事を指しています。つまり、もう一個おまけでお客さんに買ってもらうということです。その為には目のつくレジ前に何かしらの商品を置いておきたいですよね。饅頭でも置いておけば、何人かに1人はそれを買ってくれるものです。そしてそのレジ前の商品をお客さんに合わせながら並べる事を、ブログ界では「あわせて読みたい」「関連記事」と呼ばれています。笑


1人の読者から2記事以上読んでもらう事は何かしらのコンバートしてもらう為にはとても重要です。


ということで、+1を目指して関連記事を載せておく事も重要であり、サイドバーには人気の記事を貼っておくのも効果的です。以下に関連記事を載せる方法として参考にしたい記事を載せておきます。

関連記事を表示させるブログパーツLinkWithinの導入方法

池田仮名 (id:bulldra)さんの以下の記事もはてなブログの関連記事を表すには最適かもしれません。僕もこれを利用して+1を目指しています。bulldra.hatenablog.com



ちなみに+1を施すことで、PVは約5-10%程増えるかと思います。
月に20万PVあったのが、+1万〜2万増えるので、収益も月に5000円~1万数千円アップする事を意味します。やっぱり+1は必要ですね。この仕組みをもっと効率的に行っていきたいのですが、まだまだ僕のブログも未完成です。


はてなProの設定

はてなProにしかできないこともあります。


その1 ヘッダーとフッターの削除

f:id:noon8:20141020091353p:plain

普通は上記のように、「記事を書く」などのボタンが設置されていますが、Proだとこれを削除することができます。なぜ僕がこれを削除したかというと、「読者には全く関係ないから」です。

このボタンは確かにはてなユーザーにとっては便利なものですが、僕の読者の90%以上は関係のないボタンです。ユーザーエクスペリエンス向上の為に削除をしました。


その2 広告の設置

Proになると広告を削除でき、さらに自分の広告を貼付ける事ができます。

さて、広告の位置で一番の稼ぎ頭はどこでしょうか?僕の場合は、記事の下が一番の稼ぎ頭となっています。他のブログを拝見しても、ほぼ記事下が一番のような気がします。そこで、記事の下には広告を2つ設置する事にしました。僕の記事下のデザイン設定は以下のようになっています。

記事が気に入って頂けたら、はてなブックマークやTwitterなどで拡散していただけると、また今後のはげみになります。読者登録もお願いします
<br>
スポンサーリンク
<br>
<table>
<tr>
<td>広告A</td>
<td>広告B</td>
</tr>
</table>


上記は、広告を並列に並べる事ができるコードですので、是非活用してください。

ということで、はてなProでない方は是非検討してみては?(Come on here!


遊び心〜SNSボタン〜

SNSボタンを変更してみました。これは完全に遊びでやりましたw

ユーザーからしてみれば、この記事がどれほど拡散されたのか一目では分からないような構造になっています!それでいいのです!笑 僕の記事はあんまり拡散されないので隠しておきますw(涙
以下のように
f:id:noon8:20141020093530p:plain


カスタマイズに関して以下の記事がいいですね。
SNSボタンをカスタマイズ!はてなブログにオリジナル画像のSNSボタンを設置する方法 - iPhoneのこととかいろいろ


僕のは以下のコードをはてなの記事下に貼付けてます。コピペすればすぐに使えると思います。僕のDropboxの画像なので、いつ変更になっても保障はしません(ちなみに僕が適当に作ったボタンですw)。なので自前で調達する事をおすすめします。

ちなみにですが、自分の心が満足したら、これは外す予定です。笑

<a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="https://db.tt/43sPCaly" alt="このエントリーをはてなブックマークに追加" width="150" height="45" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<a href="http://twitter.com/share?count=horizontal&amp;original_referer={Permalink}&amp;text={Title}&amp;" onclick="window.open(this.href, ‘tweetwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1′); return false;"><img src="https://db.tt/ndIfEH1Y" width="150" height="45" /></a>
<a href="http://www.facebook.com/share.php?u={Permalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="https://db.tt/2z3lmd8F" width="150" height="45" /></a>
<a href="http://getpocket.com/edit?url={Permalink}&title={Title}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,scrollbars=yes,height=300,width=600');return false;"><img src="https://db.tt/hukZa0Id" width="150" height="45" /></a>


メニューバーの設置

こちらも以下のポナコ (id:ponako10) さんの記事を参照にしました。
はてなブログカスタマイズ!!メニューバーを表示させるメリットとは - はてブのまとめ

メニューを入れたのは、読者にとってこのブログの構造を理解してもらうと思ったからです。

SIMやガジェット、英語などに関するブログである事が一目で分かりますし、それぞれでサーフィンする事が可能となっています。また、最近ではSIM関連でも色々な相談がありますので、コンタクトページを設けました。

コンタクトページはGoogleドキュメントを利用しています。かなり楽です!

そして広告枠掲載の募集も同時に行えるので、メニューバーは少し複雑化した時に必要かもしれません。パンくずリストと一緒に取り組む事をお勧めします。


スターと著者情報の削除

フッターとヘッダーの削除とも関係しますが、スターと読者情報も削除しました。スターに関してはSEO的にというよりも、これも読者目線からです。はてなスターなんて関係ないですしね。消しました。

また著者情報も消しました。名前やid情報も要らないです。プロフィールもありますし、共同で運営していないので必要がありません。以下のコードをCSSに挿入すれば消えます!

/* なまえ、id削除*/
.entry-footer-section {
display: none;
}


テーマストア

f:id:noon8:20141020100518p:plain
デザインの基礎となるテーマですが、これも何でも良いかと思います。

僕は、お刺身にたんぽぽを乗せるお仕事をされているとは思えない(笑)ぷらち (id:platism)さんのデザインを採用してます。

最初は「ふぇぇぇぇ」ってwww
「テーマ作成なう!」ってwwwかわいいな〜
と思いなんとなくで選んだんですが、カスタマイズしやすいですね!つまり自分のしたいようにできるということです。シンプルだからこその強みですね。

テーマ利用者を覗いてみるとマネー報道著者 (id:MoneyReport)さんも利用してました。笑
結構人気なテーマの1つかもしれないですね。


まとめ

僕は検索ページから来てくれた読者層に向けて最適化をしつつ、はてな村用の措置も施しています(読書になるボタンは設置したまま等)。これは所々トレードオフの関係になっていますので、自分のブログの方針に従ってカスタマイズすれば良いかと思います。


なんでもカスタマイズすれば良いということではありません。何かの目的をもってすべきであって、適当にやっていたらPDCAサイクルさえも回せませんから。ただ、愛着を持つ為にもある程度の遊び心も必要かなとも思っています。


はてな村に根付いちゃってる人はスターやフッター等の情報は逆に必要なので、削除する必要はないでしょう。

僕も自分の◯◯ニーで始めたブログがここまで成長してくれると思わなかったので、これまでにしてきたカスタマイズを共有したいと思いました。村八分されかけているけども、一応僕もはてな村の人なので。爆


ちなみに現在はロゴを製作中です!

では!