Bloggerトップページ改造計画>>更なる快適さと情報の見やすさを求めて...

最近もいろいろとこのブログが見やすくなるようにと、いろいろな改造を施してきました。

• サイトのトップページが激重だったので、シンプルにして表示速度を改善
• 優先度の低い要素を後で表示する遅延ロードをBloggerのガジェットに適用してみた(HTML/JavaScriptガジェット編)

しかし、どうもまだトップページに表示している情報の種類や、デザインにしっくりこない部分があります。

2014/5/4 現在のデザイン

いったい私自身がトップページに何を求めているのか、そして閲覧者側としてトップページに何を求めているのか、まずはそれを明確にしてみました。

• 投稿された記事の一覧が見やすい
• サイトの構造が明確である
• 各記事へのアクセスが良い
• 軽快に動作する
• 各記事へアクセスしたくなる構造である

これらを実現するには、現在のトップページは情報過多であると判断しました。

そこで、トップページに不要と思われるものを次々に非表示にしてみました。

各投稿記事のフッターをトップページでは非表示

各投稿記事のフッターの機能はトップページに表示するには無駄な情報が多いと判断しました。

Blogger : 投稿のフッター
コメント数、各種SNSの拡散ボタン、ラベルなどが表示されている

そこで、トップページからこの情報を削除するべく、テンプレートの HTML の編集にて、次のように編集を行いました。

Blogger:テンプレートの編集
投稿のフッターを形作る部分(<div class='post-footer'></div>間）に対して、
トップページには表示しないようにする条件を設定

b:if タグを使用することで、そのタグ内に記載された部分を表示する（Bloggerサーバから、クライアントのブラウザへHTMLソースコードを配信する）条件を設定することができます。

今回は、トップページ以外で、そのタグの中を表示する、

<b:if cond='data:blog.url != data:blog.homepageUrl'>

</b:if>

を使用してトップページに投稿のフッターを表示しないようにしました。

Linkwithin, zenback をトップページでは非表示

各投稿記事の関連情報の機能(linkwithin)はトップページに表示するには無駄な情報が多いと判断しました。

linkwithin

また、トップページに配置された zenback もトップページに表示するには無駄な情報が多いと判断しました。

zenback

そこで、トップページからこの情報を削除するべく、テンプレートの HTML の編集にて、次のように編集を行いました。

<b:if cond='data:blog.url != data:blog.homepageUrl'> </b:if>を使用してトップページにlinkwithin, zenbackを表示しないようにする

著者情報の自己紹介を表示しない

著者情報ですが、トップページに表示するには無駄な情報量が多いと判断しました。

著者情報

そこで、自己紹介を表示するのチェックを外し、以下のような簡潔な表示としました。

登録: 投稿 ( Atom ) を削除する

「登録：投稿 ( Atom )」 リンクですが、別途RSS登録用ウェジェットを配置してあることから、無駄な情報と判断しました。

「登録：投稿 ( Atom )」 リンク

そこで、この情報を削除するべく、テンプレートの HTML の編集にて、以下の情報を削除しました。

<!-- feed links -->
<b:include name='feedLinks'/>

<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <!-- Blog feed links -->
    <b:if cond='data:feedLinks'>
    <div class='blog-feeds'>
        <b:include data='feedLinks' name='feedLinksBody'/>
    </div>
    </b:if>
    <b:else/>
    <!--Post feed links -->
    <div class='post-feeds'>
    <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.allowComments'>
        <b:if cond='data:post.feedLinks'>
            <b:include data='post.feedLinks' name='feedLinksBody'/>
        </b:if>
        </b:if>
    </b:loop>
    </div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
    <data:feedLinksMsg/>
    <b:loop values='data:links' var='f'>
    <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'>
        <data:f.name/>
        (
        <data:f.feedType/>
        )
    </a>
    </b:loop>
</div>
</b:includable>

さて、これでひとまず削除できそうなものは一通り削除しました。
この時点で、トップページを GTmetrix で測定すると次のようになりました。

トップページの GTmetrix 測定結果

次に削除した代わりに、トップページの価値を高めるために、次の施策を行いました。

トップページに表示する記事の件数を 5 件 から 10 件へ変更

トップページに表示する記事の件数を 5 件 から 10 件へ変更し、トップページを閲覧することで最新情報をより多く取り込めるようになりました。

この時点で、トップページを GTmetrix で測定すると次のようになりました。

トップページの GTmetrix 測定結果

結果

トップページに不要な情報を削除し、必要な情報の追加を行った結果、トップページは次のようになりました。

	Before	After
先頭(原寸大)
全体(縮小表示)

情報量は多少減ったように感じます。

まとめ

トップページに不要な情報を削除し、必要な情報の追加を行った結果、トップページはより快適・便利になったと思います。

今後も適宜ブログの構成を見直し、より良いブログを作っていきたいと思います。