すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

スポンサーリンク

簡単カスタマイズ!はてなブログでトップページを記事一覧にする方法

f:id:Suzushin:20170429140030j:plain

こんにちは、すずしんです。

はてなブログトップページは、標準では最新記事の全文が掲載されていますよね。
別にこれでも良いと言えば良いのですが、1つの記事が長くなってくると次の記事を読むまでにスクロールをかなりする必要があります。
読者がトップページから訪問してきて、「この人はどんな記事を書いているのだろう?」となった時には、このままでは分かりづらいですよね?

というわけで、私はブログの設定をちょっとカスタマイズしまして…。
ブログのトップページに訪問してきた方は、記事一覧ページに飛ばすようにしてみました。
やり方が分かってしまえばかなり簡単でしたよ。

トップページを記事一覧にする方法

記事一覧ページは、はてなブログの場合には「/archive」のページを開くと見られるようです。
という事は、このページにトップページから来た人を誘導すれば良いというわけですよね!

JavaScriptで別のページに移動させるには、「location.href」のプロパティを変更させれば良いです。
トップページからのアクセスかどうかはif文を使ってチェックします。
つまり、まずif文でトップページからのアクセスかどうかを確認して、そうであった場合にlocation.hrefを「/archive」に設定します。

これを踏まえて、早速コードを書いてみました。
それが以下のような感じです。

<script type="text/javascript">
if(location.href == 'http://www.suzushin7.jp/') {
  location.href = 'http://www.suzushin7.jp/archive';
}
</script>
<noscript>
<p><a href="http://www.suzushin7.jp/archive">すずしんろぐ</a></p>
</noscript>

JavaScriptが有効であれば、トップページから来た訪問者は記事一覧ページに移動します。
もしJavaScriptが無効化されている場合には、記事一覧ページへのリンクを貼るだけとしています。

ちなみに、上記のコードは私のブログの場合のソースコードとなっています。
あなたが利用する場合には、「http://www.suzushin7.jp/」の部分をあなたのブログのURLに変更してください。
また、「すずしんろぐ」の部分をあなたのブログ名に変更してください。

上記のコードの設定場所は、ダッシュボードから「設定」→「詳細設定」のページです。
下の方へスクロールしていくと、「検索エンジン最適化」の項目があると思います。
その「headに要素を追加」のテキストボックスにコードを貼り付けてください。
以下のようになっていれば大丈夫です。

f:id:Suzushin:20170502133553j:plain

ところで、トップページを記事一覧にしたいと考えている人は他にもいるだろうなと思って検索をかけてみたところ…。
やはり、思ったようにヒットしましたね!
しかもその方法も全く同じでした。
まぁこの方法が最もお手軽にできるでしょうからね。
もし私の解説で分からなければ、以下の記事を参考にしてみてください。

iitaikotoha.hatenablog.com

ひとこと

今回の記事では、はてなブログのトップページを記事一覧にする方法について紹介しました。
ブログのカスタマイズというのは、色々やってみると結構楽しいですよね!

今回紹介した方法を使えば簡単に導入できますので…。
ぜひあなたもトップページを記事一覧に変えてみませんか?

追記

この方法を実装すると、記事一覧にはなるのですが…。
最大で50記事が表示されてしまいます。
これはいくら何でも多すぎですよね。
もっと表示数を少なくできないでしょうか?

そこで、どうにかならないかと検索してみたところ、以下の記事を見つけました。
こちらの方法を使えば、一度に表示する記事数を制御できるようです。
ぜひ参考にしてみてくださいね。

blog.wackwack.net