読者です 読者をやめる 読者になる 読者になる

元コンサルタントな歴史家―ドイツから見た日本

大学で近代日独軍事史を研究する伊藤智央のエッセイ。ドイツと日本に関する批判的な評論を中心に海外生活(留学や移住)の実態をお伝えしています。その際には元戦略コンサルタントとしての経験も踏まえてわかり易くお伝えできればと思います。

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

ブログ運営

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

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

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

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

デフォルト状態

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

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

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

問題:一度に目に入る記事が限られている

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

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

需要:記事一覧は読者に見られている

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

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

Archive形式をトップページとして擬装する

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

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

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

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

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

方法①ブログタイトルのリンク先をArchive形式に変更

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

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

<script>
(function() {
  document.querySelector("#title a").href = "/archive";
}());
</script>

方法②グローバルナビの「ホーム」のリンク先をarchiveページに設定

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

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

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

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

完成イメージ

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

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

従来の記事一覧

見やすくなった記事一覧

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

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

関連する記事