ストレスフリー生活研究ラボ

ストレスフリー生活研究ラボ

全てのサラリーマンのための、心と体が整うストレスフリーな生き方探し

はてなブログ無料版の記事一覧をカスタマイズ(表示記事数を調整する)

 「はてなブログ無料版のカスタマイズ方法(初心者向け)」という記事で、はてなブログ(無料版)のトップページを記事一覧が見られる仕様に変える方法を紹介しました。

jiaozi77.hateblo.jp

 

記事の一覧表示ができて、トップページ訪問者に他の記事を紹介しやすくなったものの、記事が増えてきた時に新たな問題が発生します。

それは、ページが長くなりすぎて重い、結局他の記事が見にくいことです。

この問題に直面している方に、便利なカスタマイズ法を紹介します。

 

他記事への誘導を効率化する

f:id:jiaozi77:20190529215927j:plain

他記事への誘導が不十分だと、アクセス者にとって見にくいサイトとなってしまい、必要な情報がブログに実は載っているのに伝わらないこともしばしば。

これは、ブロガーにとってもアクセス者にとっても機会損失。勿体ないです。

今回は、その対策に便利なカスタマイズ法を紹介します。

 

 

一覧ページの記事数を制限する(トップページ対策)

フッタに下記のscriptを入れると、一覧ページ最初に表示される記事数を変更することができ、それ以下の記事をクリックボタンの下に隠すことができます。

では、設定手順を紹介します。

 「ダッシュボード」から、「デザイン」→「カスタマイズ」→「フッタ」へ進んでください。

f:id:jiaozi77:20190529222029p:plain 

フッタの中に、下記のscriptを貼り付けて保存すれば終了です。(簡単)

f:id:jiaozi77:20190529222230p:plain 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$('#main-inner').ready(function(){
"use strict";
var view_sec_num = 10;
var sections = $('#main-inner > div.archive-entries > section');
var page_index = 0;
var $entries_archive = null;
var archive_num = 0;
$entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
$entries_archive.insertBefore(sections[0]);
for(var i=0; i < view_sec_num; i++) {
$(sections[i]).appendTo($entries_archive);
page_index += 1;
}
archive_num += 1;
for(var i=view_sec_num; i < sections.length; i++) {
if(page_index==view_sec_num) {
var $read_more_link = $('<p style="text-align:center;border:thin #808080 solid;margin: 0px 150px;"><a href="javascript:void(0)" style="line-height:2;font-size:80%">これ以前の記事を表示</a></p>');
$read_more_link.on('click',{archive_num: archive_num},function(e){
$(e.target).hide();
$('#entries-archive-' + e.data.archive_num).fadeIn("slow");
});
var $before_archive = $('#entries-archive-' + (archive_num-1));
$before_archive.append($read_more_link);

$entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
$entries_archive.hide();
$entries_archive.insertAfter($before_archive);
page_index = 0;
archive_num += 1;
}
$(sections[i]).appendTo($entries_archive);
page_index += 1;
}
$entries_archive.hide();

});
</script>

ちなみに、上記のscript 内にある赤文字部分を変更することで、「掲載する記事の数」「非表示記事を開くボタンの文言」を自由に変更できます。

 

 

サイドバーに同カテゴリーの人気記事を掲載する(記事ページ対策)

こちらは、はてなブログのデフォルト機能として設定できます。

タイトル通り、サイドバーに記事と同カテゴリーの人気記事を掲載することができます。

 こちらも設定の仕方を紹介していきます。

 「ダッシュボード」から、「デザイン」→「カスタマイズ」→「サイドバー」→「+モジュールを追加」へ進んでください。

f:id:jiaozi77:20190529225329p:plain

今回は、アクセス数の多い記事を見せたいので、「注目記事」→「集計方法」を「最近のアクセス」にすればOKです。

f:id:jiaozi77:20190529230010p:plain

他にも、いろいろな設定ができるようになっていますので、試してみてください。

 

 

あとがき

これからも自分のブログをカスタマイズしながら、皆さんに情報共有していこうと思います。

皆さんの参考になっていれば嬉しいです。

 

 

ブログランキング・にほんブログ村へにほんブログ村