On Blog

ブログというものを運営していて、どうすれば読者に見てもらいやすくなるのか、ということについて日頃から考察を深めてきた成果を惜しみなく紹介しています。戦略コンサルタントならではの視点で、ブログをどのように運営していけばいいのかについてわかり易く説明しています。素人のブログ論とは一味違います。

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

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

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

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

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

デフォルト状態

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

方法①デフォルトで設定(はてなProの契約をしている場合のみ)

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

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

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

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

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

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

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

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

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

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

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

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

完成イメージ

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

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

従来の記事一覧

見やすくなった記事一覧

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

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

<免責事項>

当サイトのすべてのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、必ずしも正確性・信頼性等を保証するものではありません。 当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねます。 本免責事項、および、当サイトに掲載しているコンテンツ・情報は、予告なしに変更・削除されることがあります。 また、当サイトに掲載されるリンク先に関して一切の責任を負いかねます。 予めご了承下さい。

 

<当サイトのプライバシーポリシー>

当サイトでは、第三者配信による広告サービスを利用しています。このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 (氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、ここをクリックしてください。

・Google は第三者配信事業者として、Cookie を使用してサイトに広告を配信します。

・Google 広告 Cookie を使用することにより、お客様のサイトや他のサイトへのアクセス情報に基づいて、Google や Google のパートナーのユーザーに適切な広告を表示できます。

・ユーザーは Google の広告とコンテンツ ネットワークに関するプライバシー ポリシーにアクセスし、Google 広告 Cookie を使用しないよう設定できます。

 

Copyright © 2016-2018 Blog Customize All Rights Reserved.