あんこぱんのつぶやき

格安SIMフリースマートフォン、モバイルアプリ、ウェブサービスの情報ブログ

【はてなブログ】はてブ人気記事が表示できるブログパーツを設置してみました

 

スポンサーリンク

どうもこんにちは、ブログ住民のあんこぱんです。

はてなブログには、サイドバーに最新記事、注目記事が表示できます。また、スマートフォンサイトのフッタ上部に注目記事がデフォルトで表示されます。

特にスマートフォンサイトの場合、PCサイトと比較し、ページ内の情報が少ないことから、ブログ内アクセスの観点から注目記事の表示がとても重要です。

そこで今回は、はてなブログProの設定の備忘録として、はてブ人気記事のブログパーツの設置方法をご紹介します。

ブログパーツ

d.hatena.ne.jp

ブログのサイドバーなどに設置できる、他のサイトからの情報などを小さく枠内に表示するシステム。

f:id:ankopan01:20150618220915p:plain

はてなブックマークのブログパーツ

はてなブックマークには3種類のブログパーツがあります。

はてなブックマークブログパーツ

  • はてなブックマークのコメントを表示
  • はてなブックマークのブックマーク数を表示
  • ブログのサイドバーに人気の記事を表示

今回は「ブログのサイドバーに人気の記事を表示」のブログパーツを利用します。

はてブ人気記事のブログパーツの設置方法

f:id:ankopan01:20150618215029p:plain

f:id:ankopan01:20150618215149p:plain

  • URL欄にブログURLを入力し、「送信」をクリックします。

f:id:ankopan01:20150618215326p:plain

  • 「人気エントリー」にチェックします。

f:id:ankopan01:20150618215533p:plain

  • コード欄にコードが表示されるので、コードをコピーします。
  • 次に、はてなブログのダッシュボードから、デザイン>カスタマイズ>サイドバー、モジュールの追加からHTMLパーツを選択し、コピーしたコードを貼り付けます。

f:id:ankopan01:20150618215935p:plain

以上で設定完了です。これではてなブログのサイドバーに、はてブ人気記事ランキングを設置できます。

また、スマートフォンサイトに設置する場合は、次のとおり設定することで表示できます。

  • はてなブログのダッシュボードから、デザイン>スマートフォン>記事またはフッタ、にコードを貼り付けます。

なお、次のコードの赤色部分は適宜修正できるので、お好みで変更しましょう。

プログパーツの幅の変更

Hatena.BookmarkWidget.width = 300

人気記事の表示件数の変更

Hatena.BookmarkWidget.num = 10 

まとめ

スマートフォンの普及のほか、Googleのモバイルフレンドリーの導入など、今後は確実に、スマートフォンサイトへのアクセスが増加していくと思います。

なので、PCサイトより情報量が劣るスマートフォンサイトでは、ブログ内アクセスが減少していくでしょう。これについては、こちらのブログ記事が参考になります。

www.landerblue.co.jp

単体のブログ記事にはアクセスするが、ブログ内のその他の記事への流入が減少してしまうのです。

このようなことも踏まえ、今回のカスタマイズは、実はPCサイトより、スマートフォンサイトの施策として効果があると思います。なので、筆者はスマートフォンサイトのフッタ上部にも、このブログパーツを設置しました。

今回の方法はとても簡単なカスタマイズなので、直ぐに、はてなブログのカスタマイズとして活用できるでしょう。

なお、ブログパーツの乱用は、ページ表示速度の低下へ繋がることから、他のブログパーツとのバランスも考慮しながらカスタマイズするようご注意ください。