HacoLife

シンプルなデザインが好き。中古で購入した平屋をリフォームして暮らす「はこ生活」しています。

はてなブログのスマホサイトで注目記事へのページ内リンクを設置する方法

f:id:mr58n:20141208170439j:plain

はてなブログの注目記事ってスマートフォン版サイトで閲覧しているとページの下部にあって目立たないです。非常にもったいないです。もしあなたのブログに初めて訪問してくれたユーザーがいたら、ぜひあなたの人気記事を見ていただきたいですよね?

スマホ版のレイアウトは、PC版と違ってファーストビュー(ページが表示された時にディスプレイ内に映っている部分)で注目記事を表示させるのは難しいです。そこで、ファーストビューに注目記事へのリンクを設置して、そのリンクをタップして注目記事まで移動させる2段階方式で対応させる方法をご紹介します。タップする一手間が必要ですが注目記事の存在をファーストビュー内でお知らせできます。

要はこんなことができるようになります

f:id:mr58n:20141208173837j:plain

スマホサイトのファーストビュー内に注目記事へのリンクを設置し、そのリンクをタップすると・・・

f:id:mr58n:20141208173926j:plain

注目記事まで一気に移動してくれますので、ページ下までスクロールする必要がなくなります。指が疲れなくなりユーザーに優しいブログになります(笑)

導入方法(はてなブログProユーザーのみ)

1.モバイルサイトのフッタ部分のHTMLを編集する

f:id:mr58n:20141208180444j:plain

管理画面のメニューより
デザイン > スマートフォン > フッタ と進み、「スマートフォン用にHTMLを設定する」を選択し、その後HTMLを編集します。一番最後の行に、

<span id="hot"></span>

を記述します。とりあえずこれだけでは何も変わらないので一旦保存します。

2. ヘッダ部分のタイトル下部分のHTMLを編集する

f:id:mr58n:20141208181247j:plain

管理画面のメニューより
デザイン > スマートフォン > ヘッダ > タイトル下 と進み、「スマートフォン用にHTMLを設定する」を選択し、その後下記のHTMLソースコードを記述します。

<style>
#hot {
display:block;
position:relative;
top:240px;
}
</style>

すでにCSSを書かれている場合は、必要な部分だけ追記してください。(#hotのプロパティ部分)

このtopの値は、ユーザーによって異なりますので自分のブログにちょうど良い値を入力してください。

f:id:mr58n:20141208182245j:plain

ちなみに当ブログは検索スペースを非表示にしているのでtopの値は120pxにしています。

3. 注目記事へのリンクを設置する

2.と同じく、管理画面のメニューより
デザイン > スマートフォン > ヘッダ > タイトル下 と進み、「スマートフォン用にHTMLを設定する」を選択し、その後下記のHTMLソースコードを2.で記述した<style>~</style>の後に追記します。

<a href="#hot">注目記事</a>

当ブログでは、他にもリンクを設置して

<nav id="navigation">
<ul>
<li><a href="http://hacolife.hatenablog.com/archive/category/%E5%AE%B6%E3%81%AE%E3%81%93%E3%81%A8">家のこと</a></li>
<li><a href="http://hacolife.hatenablog.com/entry/about.html">自己紹介</a></li>
<li><a href="http://hacolife.hatenablog.com/archive">全記事</a></li>
<li><a href="#hot">注目記事</a></li>
</ul>
</nav>

と記述し、ナビゲーションメニューとして表示しています。

f:id:mr58n:20141208184500j:plain

※上記画像のような見た目にするため、別途CSSを追記しています。

さいごに

スマホ版の注目記事のソースコードにid属性を持つタグが無かったため、こんな面倒な対応となってしまいました。

しかし、注目記事へのページ内リンクを設置することで、自分のブログの人気コンテンツを紹介できるチャンスが増えます。スマホから新規ユーザーを増やしたい場合や、サイトの回遊率を上げたい場合はぜひ導入してみてはいかがでしょうか。