【コピペ用】フッターにサイトマップを作る方法

フッター部分は確かにあまり見られる箇所ではありません。しかし、このフッター部分に少し工夫するとユーザーにとって見やすくなります。

例えばサイトマップを挿入することができます。とりわけ企業サイトでそのような例をよく見かけます。

ブログでも、サイトマップを一つの記事として作ってしまうことはできますが、二つの問題があると考えています。

サイトマップ記事をわざわざクリックしてまで見たいと思うのか
たとえ記事を見てもらえたとしても、カテゴリーの説明が入ったりして記事が長くなってしまい、サイト構成が一覧できなくなってしまっていないか

そのためメインブログのほうで、フッターに訪問者にとって視認性の高いサイトマップをhtmlで作ってみました。

完成イメージ図

PC用

パソコンで見たサイトマップ・イメージ

スマホ用

スマホで見たサイトマップ・イメージ

PC用コード

フッター

</br>

<p>

</br>

</div>

</br> <a href="http://www.ito-tomohide.com/archive/category/%E4%BB%95%E4%BA%8B%E8%A1%93-%E5%8A%B9%E7%8E%87%E5%8C%96">　-効率化</a></br>

<a href="http://www.ito-tomohide.com/archive/category/%E4%BB%95%E4%BA%8B%E8%A1%93-%E4%BA%BA%E7%94%9F%E3%83%BB%E3%82%AD%E3%83%A3%E3%83%AA%E3%82%A2%E8%AB%96

">　-人生・キャリア論</a></br>

</br> <a href="http://www.ito-tomohide.com/archive/category/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2-%E3%83%86%E3%83%AC%E3%83%93%E3%83%BB%E6%98%A0%E7%94%BB">　-テレビ・映画</a></br>

<a href="http://www.ito-tomohide.com/archive/category/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2-%E9%9F%B3%E6%A5%BD

">　-音楽</a></br>

<a href="http://www.ito-tomohide.com/archive/category/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2-%E9%9D%A2%E7%99%BD%E3%81%84%E7%94%BB%E5%83%8F%E3%83%BB%E5%8B%95%E7%94%BB">　-面白い画像・動画</a></p><p>

<a href="http://www.ito-tomohide.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E9%81%8B%E5%96%B6">ブログ運営</a></p><p>

</br>

<a href="http://www.ito-tomohide.com/archive/category/研究-歴史一般">　-歴史学一般</a></p>

</div>

<p><strong>About</strong>

</p><p>

</p>

</div>

<p><center><strong>＜Amazonアソシエイト・プログラムについて＞</strong></center></br>

伊藤智央は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。</p>

<p><center><strong>＜当サイトのプライバシーポリシー＞</strong></center></br>

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

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

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

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

</div><!—content4閉じ-->

</div><!—content5閉じ-->

</div>

CSS

.footer-content1 {
   float: left;
   width: 33%;
   color: #190710;
}

.footer-content2 {

    float: left;
width: 33%;
color: #190710;
}

.footer-content3 {
   float: right;
color: #190710;
}

.footer-content4 {
   clear: both;
color: #190710;
font-size: 80%;
}