無料版のはてなブログでは、トップページを開くと記事の内容がそのまま全て表示されてしまうため、とても見辛いという問題がありますよね。
特定のジャンルしか書いてないならまだしも、私のブログのように様々なジャンルの記事を書いてる場合は、訪れたユーザーが興味のある記事を見つけ辛いために、せっかく訪問してくれたのに帰ってしまうと言う事態になりかねません。
一方で、はてなブログProには記事を一覧形式で表示する機能がありますが、Pro版は有料なのでライトブロガーには少し敷居が高いです。
そこで、今回は無料版のはてなブログでもトップページに一覧形式で記事を掲載する方法について紹介します。
さらに、ここでは一覧形式で表示する記事数の設定方法も紹介します！
「続きを読む」機能を使う
はてなブログに標準搭載の「続きを読む」機能を使う方法です。
やり方は至極簡単で、記事の編集画面にて境界となる行にカーソルを持っていき、上に並んでいるキリトリ線のようなアイコンをクリックするだけです。
「続きを読む」のメリット
一番カンタンで、かつ不具合などが少ない方法です。
なんと言っても公式で実装されている機能ですからね。
「続きを読む」のデメリット
- 記事ごとに「続きを読む」を設定する必要がある
- 「続きを読む」を入れる場所に悩む
- 目次より下に「続きを読む」を入れると、目次のリンクが機能しなくなる
①は、過去記事が多くなれば多くなるほど深刻な問題になります。
②は、あまり上の方に「続きを読む」を設定してしまうと、その記事にどんな事が書いてあるかの情報が少な過ぎてクリックして貰えないため、入れどころに悩みます。
③は、「続きを読む」で記事のページに飛ばないと目次が機能しません。例えばトップページに気になる記事が上がっていたので、いつものように目次の項目をクリックしてみたが無反応・・・みたいな事態になります。
トップページをアーカイブ形式にする
下記のサイト様の目次にある「4-2 設定方法」を実行します。
丁寧に説明されているので、その通りにやれば問題ないと思いますが、一点だけ注意するとしたら、「トップページをアーカイブ一覧に設定する」の項目で自分のブログURLを設定する際に、「〜/」や「〜/archive」などの「/」や「/archive」を消さずに残しておく事でしょうか。
これらを消してしまうと、ちゃんと表示されないので注意しましょう。
アーカイブ形式のメリット
- 一度設定すれば、全ての記事に反映される
- 「続きを読む」に比べて表示がスッキリしている
- トップページに表示する記事数を設定する事ができる
上記のサイト様で紹介されている方法の素晴らしいところは、トップページに表示する記事数を設定できるところです。
「トップページをアーカイブ一覧に設定する」に書かれているような単純なアーカイブ化までだと、いくら一覧形式でスッキリ表示してくれると言えど「50件」も記事を読み込んでしまうので、「読み込み速度が遅くなる」という欠点がありました。
PCで見る分にはあまり遅さは感じませんが、モバイル版で見る場合は読み込み速度が目に見えて遅くなります。
そこで、その下に書かれている「フッタにスクリプトを貼り付ける」の手順を行うことで、一覧形式で表示する記事件数を制限してやれるのです。
さらに、このサイト様で紹介しているスクリプトだと、モバイル版にのみこの制限を付加してやれるので助かります。
アーカイブ形式のデメリット
デメリットらしいデメリットはありませんが、強いて言うなら上記のサイト様でも書かれている通り、「もっと表示する」の下に「次のページ」が表示されてしまい、ややこしいくらいでしょうか。
しかし、今のところモバイル版の読み込み速度も問題ないですし、デメリットは特に感じていません。
まとめ
いかがでしたでしょうか？
個人的には、「続きを読む」より「アーカイブ形式にする」方法の方がオススメです。
みなさんも見やすい形にご自身のブログをカスタマイズしてみて下さい！
その他参考にしたサイト様はこちら↓
