ガジェレポ!

京都在住の中年サラリーマンブロガー。 Mac、iPhone、ゲームにアプリなどなど興味をもったガジェットの情報をなんでもレポート。

はてなブログのサイドバーにオススメ記事を表示して直帰率改善。

f:id:gadgerepo:20160219233339j:plain

寝違えて首が回らないガジェレポ!@gadgerepoです。こんにちわ。

ブログを運営しているといやでも気になるのがページビュー数と直帰率。

とりわけ直帰率は、“サイトを訪れたユーザーが閲覧を始めたページから同サイト内の他のページに移動することなく離脱した割合”を示しており、これが高いということはせっかく訪れたユーザーをみすみす逃してしまっていることを意味します。

直帰率の改善はページビュー数の増加にも結びつくため、直帰率の高いサイトの運営者は「いかにしてユーザーをサイト内の他のページに誘導するか」を考えなくてはなりません。

他のページに誘導する手段は?

はてなブログの場合、サイドバーモジュールとして「最新記事」「関連記事」「注目記事」を設置することが可能です。

f:id:gadgerepo:20160221210207p:plain

 

これらを設置することでユーザーに他の記事をアピールし誘導するキッカケを作ることができますが、「最新記事」以外はいかんせん自分で表示する記事を選ぶことができません。(カテゴリーを選ぶことはできますが)

例えば過去投稿した「自分なりに気合の入った自信のある記事」をもっとアピールしたい!と思った場合、“オススメ記事”として以下の方法でサイドバーに表示させることが可能です。

サイドバーに任意の「オススメ記事」を表示する方法

ワンポイントアイコンを用意

単純にリンクだけ表示させるなら はてなブログの管理画面から「デザイン」→「サイドバー」→「モジュールを追加」で「リンク」を選択し、タイトルとURLを記入すればOKですが……

f:id:gadgerepo:20160221062700p:plain

 

これだけだとパッと見が文字だけで寂しいのでワンポイントとなるアイコンを表示したいと思います。

今回は縦横20pixel程度のアイコンを作ってみました。

f:id:gadgerepo:20160219144836g:plain f:id:gadgerepo:20160219144837g:plain f:id:gadgerepo:20161004195622g:plain f:id:gadgerepo:20161004195626g:plain

※よろしければご自由にお使いください。

 

コチラを「はてなフォトライフ」にアップロードし、上段メニューバーの「フォルダを編集」をクリック。

f:id:gadgerepo:20160221064119p:plain

 

「ブログに貼り付ける」を選択し、「HTMLタグ」の<img src=>以降の" 〜 “部分のURLをメモっておきましょう。

f:id:gadgerepo:20160221210144p:plain

サイドバーにHTMLモジュールを設置する

続いて はてなブログの管理画面から「デザイン」→「サイドバー」→「モジュールを追加」で「HTML」を選択。

f:id:gadgerepo:20160221065118p:plain

 

タイトルは「オススメ記事」とします。筆者は英語表記にしたかったので「RECOMMEND」としましたが合ってるのでしょうか……えらい人教えて下さい。

そして本文には以下のコードを記入します。

“ワンポイントアイコン画像のURL”部分にはさきほどメモったワンポイントアイコンのHTMLタグを、“オススメ記事のURL”にはピックアップしたい自ブログの記事URLを、オススメ記事タイトルにはリンク先のタイトルをそれぞれ入力します。

表示したいピックアップ記事の数だけ<img src> 〜 <hr>を繰り返せばリンクを増やすことができます。

それぞれのリンク間には<hr>タグで「境界線」を挿入しているので線の太さ、色をカスタマイズしたい場合は「デザイン」→「デザインCSS」に……

と追加記入します。「border: 1px」部分で境界線の太さを、「#EEEEEE;」部分を変えることで色を変更できます。

コチラが完成画像。

f:id:gadgerepo:20160221071843p:plain

まとめ

いかがでしょう?任意の記事をサイドバーに表示させることでユーザーを誘導、直帰率の改善とともに過去記事の再アピールが期待できます。

ぜひお試しください。