【はてなブログ】トップページの記事一覧を見やすくするカスタマイズ

はてなブログのPC版トップ画面が見にくいと思ったことはありませんか。

通常の記事一覧では、「続きを読む」を入れて記事の一部分しか表示させないようにしていたとしても、記事によって「続きを読む」が挿入される箇所が違うので、記事の高さがまちまちになってしまいます。

その上、アイキャッチ画像を入れていると、見開いた画面で記事がせいぜい2つほどしか見ることができません。つまり、一覧性が失われてしまいます。画像の読み込みにも時間がかかるため、「もういいや」と考えて直帰してしまう人もいるかもしれません。

そこでカスタマイズによって、記事の視認性を改善したいと考えるのは当然です。

デフォルト状態

ここでいうところの通常の記事一覧画面とは、ブログタイトルをクリックしたときに出てくる画面です。（下の画像）

見づらいトップページの記事一覧

しかし、このデザインには問題があります。

これだと「一覧」とは言いつつもスクロールしない限り2個分の記事の見出ししか目に入りません。

「一覧」というのであれば、なるべく多くの記事が「一覧」できなければなりません。

Google Analyticsによる訪問記事の分析を見ていると、どうもブログタイトルをクリックして記事一覧を見ている人が結構います。

ですので、一覧のデザインはデフォルトのままにしておけません。こうした人たちに、わかりやすい「記事一覧」を提供したいものです。

そこで考えたのが、「ブログURL/archive」を何とか記事一覧として使えないのかということです。この「ブログURL/archive」というURLを開くと、下の画面のような形式で記事一覧が表示されます。

見やすいトップページの記事一覧

この場合、アイキャッチ画像も含めて各記事の位置と大きさが整っていて、かつ一つ一つの記事の高さもそろっているので、非常に見やすくなります。

上の画面でも、スクロールせずとも、3個分の記事が目に飛び込んできます。

このArchive形式の画面をトップページとして使用するには3つの方法が考えられます。

はてなProの契約をしている場合、管理画面の詳細設定から、トップ画面の設定を記事一覧か本文全文の表示かを選択できます。

詳しくはこちらをご覧ください。

もしはてなProの契約をしていない場合でも、まだあきらめる必要はありません。他にも別の方法で、記事一覧を見やすくすることができます。

ブログタイトルをクリックすると、このArchiveページにたどり着けるようになれば理想です。

そのためには、以下のコードをデザイン設定画面（PC向け）のフッターに挿入するだけで、この機能が実装されます。本サイトでも実装していますので、タイトルをクリックしてみてください。Archive形式の記事一覧が表示されます。

方法②のようにJavascriptを使わない方法もあります。

それは、グローバルナビに「HOME」という項目をつけて、そのリンク先を「ブログURL/archive」にすればいいのです。

私は、グローバルナビに「HOME」をつけています。

Google analyticsで分析してみると、さっそくこの「HOME」を使っている方がおられるようなので、少しでも回遊率を高めるのに役に立っているのかもしれません。

これで、記事一覧ページがすっきりしました。

記事一覧を見やすくする工夫をすると
ビフォーア		アフター
	→

是非とも実装してみてください。

＊Java Scriptを使って、強制的にトップページを「ブログURL/archive」へと直接転送させる方法もありますが、読み込みに時間がかかるので、私は採用していません。読み込みに時間がかかればかかるほど、ページが開くのを待ちきれないユーザーが離脱する可能性が高くなります。