operationservicebuの日記

日々の日記、Webサービスや書籍などのレビュー、スマホやパソコンで困ったことの操作方法など自由に書いているブログです。

はてなブログのサイドバーに「よく読まれている記事」欄を表示する方法

この記事は、はてなブログのサイドバーに「よく読まれている記事」欄を表示する方法を書いています。

 

はてなブログのサイドバーには、「注目記事(人気記事、よく読まれている記事)」を表示する機能が標準であります

 

シンプルなブログを目指して、このブログを書いているのですが、

「注目記事くらい表示しておいてもいいかな」

と思ったので、

はてなブログのサイドバーに「注目記事(よく読まれている記事)」欄を表示する方法を書いていきます。

 

はてなブログのサイドバーに「よく読まれている記事」欄を表示する方法

サイドバーの設定方法

はてなブログの管理画面にあるメニュー欄から[デザイン]をクリックします。

f:id:operationservicebu:20140812142446j:plain

 

[デザイン]変更画面の[工具マーク]をクリックします。

f:id:operationservicebu:20140812142459j:plain

 

表示された項目から[サイドバー]をクリックします。

f:id:operationservicebu:20140812142534j:plain

 

[サイドバー]欄下部にある[モジュールを追加]をクリックします。

f:id:operationservicebu:20140812142603j:plain

 

[モジュールを追加]画面が表示されます。

その中にある[注目記事]をクリックします。

f:id:operationservicebu:20140812142652j:plain

 

[注目記事]設定画面が表示されます。

f:id:operationservicebu:20140812142737j:plain

 

タイトル欄にブログ上で表示される名前を入力します。

私の場合は、「注目記事」ではなく、「アクセスされている記事」と入力しました。

追記(2018年8月18日):現在は「人気エントリー」に名称を変更しました。

f:id:operationservicebu:20140812142809j:plain

 

集計方法は3つから選択できます。

私の場合は、「最近のアクセス」にしました。

f:id:operationservicebu:20140812142917j:plain

 

その他、表示件数やサムネイル画像の表示、ブックマーク数の表示など選択できます。

f:id:operationservicebu:20140812143015j:plain

 

設定が完了したら、[適用]をクリックします。

f:id:operationservicebu:20140812143214j:plain

 

[サイドバー]欄に、作成された[注目記事]欄が追加されます。

私の場合は、項目を並べ替えて、[最新記事]の次に配置しました。

f:id:operationservicebu:20140812143239j:plain

 

設定をブログデザインに反映するために、[変更を保存する]をクリックします。

f:id:operationservicebu:20140812143403j:plain

 

ブログデザインに変更が適用されます。

適用後、[管理画面に戻る]をクリックし、はてなブログの管理画面に戻ります。

f:id:operationservicebu:20140812143454j:plain

 

以下の画像のように、自身のブログを確認したときに[注目記事]欄が表示されていれば、設定が完了です。

f:id:operationservicebu:20140812143556j:plain

 

これで、はてなブログのサイドバーに「注目記事(よく読まれている記事)」欄を表示する方法は完了です。

 

「注目記事」欄表示前と表示後の速度測定

GTmetrix | Website Speed and Performance Optimization

上記のサイトで、「注目記事」欄表示前と表示後を速度測定しました。

リクエスト数が1つ増えたのみで、「Page load time」と「Total page size」は誤差範囲と私は思います。

しかし、「記事のサムネイル表示」や「ブックマーク数表示」などを使うと、速度やリクエスト数に変化があるかもしれません。 

「注目記事」欄表示前

f:id:operationservicebu:20140812140857j:plain

「注目記事」欄表示後

f:id:operationservicebu:20140812140906j:plain

 

参考文献

サイドバーの「注目記事」を、はてなブックマーク数をもとに表示できるようにしました - はてなブログ開発ブログ

GTmetrix | Website Speed and Performance Optimization

Webページ速度測定サイト「GTmetrix」での測定結果 - operationservicebuの日記

Webページ速度測定サイト「GTmetrix」の個人的まとめ - operationservicebuの日記

 

以上、ありがとうございました。