トップページに、パネルのようなデザインのカテゴリ表示を設置

イントロダクション

このブログのトップページのナビゲーションを改善するために、トップページに次のような、パネルのようなデザインのカテゴリ表示を設置しました。

トップページに追加したカテゴリ表示

設置の目的

ブログをトップページから訪れた場合に、そのブログにどんなコンテンツがあるんだろうかと疑問に思ったことはありませんか？

そのブログにどんなコンテンツが含まれているのかを知るには、そこに案内が記載されていなければ、それを知るのは一苦労です。

そこで、トップページに上記のような、ブログ内に含まれる情報を大まかに分類したパネルを設置することで、ブログのトップページを訪れた閲覧者が、ブログ内のコンテンツを把握しやすいようにしました。

ソースコード

上記のパネルのようなデザインのカテゴリ表示を行っている部分のソースコードを参考までに載せておきます。

<b style="font-size:20px;">メイン　コンテンツ - Main Contents</b><br />

<a href="http://upa-pc.blogspot.com/search?q=Windows">
<div style="float:left; width:49%; height:10em; background-color:#fffff0;">
<b style="background-color:#000000; color:#ffffff;">Windows</b> - Windows の便利な Tips、トラブルシューティングなど<br />
<p>便利な機能や、便利なソフトウェアを紹介しています。</p>
</div>
</a>

<a href="http://upa-pc.blogspot.com/p/blogger.html">
<div style="float:right; width:49%; height:10em; background-color:#f0ffff;">
<b style="background-color:#000000; color:#ffffff;">Blogger</b> - ブログサービス(Blogger) をより使いやすくするための Tips<br />
<p>よりブログを使いやすくする方法を日々研究中です。<br />
便利なスクリプト、Blogger の機能の使い方、そして、トラブルシューティングなど。</p>
<br />
</div>
</a>

<a href="http://upa-pc.blogspot.com/search?q=プログラミング+OR+C%23+OR+JavaScript+OR+C言語+OR+C%2B%2B+OR+Java+OR+VB+OR+VBA+OR+VBS+OR+HTML+OR+CSS+OR+CGI+OR+Perl+OR+Python">
<div style="clear:both;float:left; width:49%; height:10em; background-color:#f0ffff;">
<b style="background-color:#000000; color:#ffffff;">Programming</b> - ソフトウェアの力で社会を豊かに<br />
<p>C#, VBA, JavaScript, HTML, CSS といった各種プログラミング言語および関連機能について、陥りやすい罠や、便利なサンプルコードなどがあります。</p>
</div>
</a>

<a href="http://upa-pc.blogspot.com/search?q=コンピュータ">
<div style="float:right; width:49%; height:10em;background-color:#fffff0;">
<b style="background-color:#000000; color:#ffffff;">Computer</b> - コンピュータ関連情報一覧<br />
<p>コンピュータ関連全般についてまとめています。</p>
</div>
</a>

<a href="http://upa-pc.blogspot.com/search?q=セキュリティ">
<div style="clear:both;float:left; width:49%; height:10em;background-color:#fffff0;">
<b style="background-color:#000000; color:#ffffff;">Security</b> - より重要になるセキュリティ情報を蓄積<br />
<p>安全なネットワーク社会の構築に向けて、重要となるセキュリティ情報についてまとめています。</p>
</div>
</a>

<a href="http://upa-pc.blogspot.com/search?q=ネットワーク">
<div style="float:right; width:49%; height:10em; background-color:#f0ffff;">
<b style="background-color:#000000; color:#ffffff;">Network</b> - ネットワークなしでは、生きられない<br />
<p>ネットワークを活用する Tips や、トラブルシューティングをまとめています。</p>
</div>
</a>

<a href="http://upa-pc.blogspot.com/search?q=Android">
<div style="clear:both;float:left; width:49%; height:10em; background-color:#f0ffff;">
<b style="background-color:#000000; color:#ffffff;">Android</b> - Android スマートフォン情報<br />
<p>Android スマートフォンの便利情報・トラブルシューティングについてまとめています。</p>
</div>
</a>

<a href="http://upa-pc.blogspot.com/search?q=ゲーム">
<div style="float:right; width:49%; height:10em;background-color:#fffff0;">
<b style="background-color:#000000; color:#ffffff;">Game</b> - ゲームで生活を豊かに！<br />
<p>今のところ、ゲーム関連は少なめです。</p>
</div>
</a>

<a href="http://upa-pc.blogspot.com/search?q=ニュース">
<div style="clear:both;float:left; width:49%; height:10em;background-color:#fffff0;">
<b style="background-color:#000000; color:#ffffff;">News</b> - 私が気になったニュースまとめ<br />
<p>日々発信されるニュースの中で、私が気になったニュースについてまとめています。</p>
</div>
</a>

<div style="clear:both;"></div>

各カテゴリへのリンクは、各カテゴリの言葉を検索した検索ページとしました。

Blogger の検索ページについては、以下のページに詳しく記載してあります。

BloggerのURL構成：ブログ内の構造>検索ページ - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/02/blogger-url-search.html

Blogger:カテゴリページを作るのが面倒?ならば、検索ページを使用する方法があります
http://upa-pc.blogspot.com/2015/03/blogger-category-page-search-page.html

パネルの左右一列は、次のソースコードによって実現しています。

<a href="">
<div style="clear:both; float:left; width:49%; height:10em; background-color:#fffff0;">
<b style="background-color:#000000; color:#ffffff;">左</b> - 概要<br />
<p>説明本文</p>
</div>
</a>

<a href="">
<div style="float:right; width:49%; height:10em; background-color:#f0ffff;">
<b style="background-color:#000000; color:#ffffff;">右</b> - 概要<br />
<p>説明本文</p>
<br />
</div>
</a>

パネルの左右一列

div 要素をスタイルシートの float にて、left と right に配置しています。

なお、このパネルの次のコンテンツに影響を与えないようにするために、最後に、

<div style="clear:both;"></div>

を行っています。

まとめ

このように、ブログのトップページのナビゲーションを改良してみましたが、実際に使いやすいかどうかは今後使ってみて、更に改良を加えていきます。

Dr.ウーパのコンピュータ備忘録

2015年3月2日月曜日