はてなブログ無料版でトップページを記事一覧に

はじめに

*当ブログは現在、はてなブログからWordPressに移行しています。

カスタマイズ前の確認事項などは下記の記事を参照してください。

トップページを記事一覧に

はてなブログ無料版のときに、トップページを「記事一覧」にしたくて行ったカスタマイズです。

この設定はトップページのアクセスを自動的にアーカイブページ(記事一覧)に飛ばすものです。

そうすれば無料版でもトップページを「記事一覧」にできます。

カスタマイズは下記サイトを参考にさせていただきました。

 headに要素を追加

まず、「ダッシュボード」→「設定」→「詳細設定」の中にある「headに要素を追加」にコード(スクリプト)を貼り付けます。下記の箇所に

以下のコード(スクリプト)を貼り付けてください。

<script type="text/javascript">
if( location.href == 'https://www.example.com/'){
location.href=’https://www.example.com/archive’;
}
</script>
<noscript>
<p><a href="https://www.example.com/archive">世界の片隅からツッコミを入れる</a></p>
</noscript>

3か所ある、「https://www.example.com/」のところは皆さんのブログのURL(トップページのURL)を入れてください。

https://www.example.com/archive」は「ブログのURL /archive」になります。

世界の片隅からツッコミを入れる」のところは皆さんのブログ名を入れてください。

スマホの記事数を調節

これだけでもいいのですがこのままだとアーカイブページに一度に30記事が表示されます。

(前は50記事だったみたいですが自分が設定したときは30記事で「次のページ」が表示されました)

PCならいいのですがスマホだと表示に時間がかかったり、スクロールするのが大変になるのでスマホだけ記事数を変えます。

設定をすれば指定した記事数ごとに「もっと表示する」ボタンが出ます。(5記事なら5記事毎にボタンが出てきます)

スマホの設定といっても特別な設定は必要ありません。

「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「フッタ」に以下のコード(スクリプト)を貼り付けます。

<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 pc_width = 600;
var device = window.screen.width < pc_width ? 'sp’ : 'pc’;
device = (device == 'pc’ && $(window).width() > pc_width) ? 'pc’ : 'sp’;
var view_sec_num = 5; <!– ここに1回あたりの表示記事数を設定 –>
var sections = $('#main-inner > div.archive-entries > section’);
if((sections.length > view_sec_num) && device == 'sp’) {
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;background:#ddd"><a href="javascript:void(0)" style="line-height:3;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>

表示される記事数を変えたい場合はコードの中の

var view_sec_num = 5; <!– ここに1回あたりの表示記事数を設定 –>

この部分の数字を変えることで記事数を変えることができます。

カスタマイズの注意点

Googleの評価

この設定をするとGoogleの評価が下がる可能性があるみたいなことを書いてる記事がありました。

実際のところは分かりませんが気になる方はご注意ください。

Googleアドセンス申請時

はてなブログのヘルプページにGoogleアドセンスの「審査に落ちた場合のヒント」として

ブログトップをJavaScriptでarchive等にリダイレクトさせている→直接アクセスできるURLを記入してください。

とありますので、Googleアドセンスに申請するときは一旦設定を元に戻してから申請したほうがいいと思います。(バックアップは忘れずに)

審査に合格してからまた設定をやり直してください。