スマートフォン対応サイト制作日誌 IV ～トップメニューの作成～

今までのお話はこちら
1.スマートフォン対応サイト制作日誌 I ～ロゴの追加～
2.スマートフォン対応サイト制作日誌 II ～カテゴリの追加～
3.スマートフォン対応サイト制作日誌 III ～テーブルタグの修正～

さて、こっそりと進めているスマートフォン対応サイト化ですが、前回はテーブルタグの修正を行いました。
これ凄い地味な作業で、メニュー関連の5ページを全部修正した上に、
載せる記事の取捨選択をしたりと、かなり心が折れかける作業でした。

まぁ、そんな愚痴は置いておいて
せっかくメニュー関連のページを修正したのですから、それを最大限活用せねばなりません。

というわけで・・・。

 

こんな感じで、トップページにメニューを配置してみました。

やったことは単純で、

<!-- ▼トップページここから▼ -->
<ul id="home" selected="true">
<center>
<a href="リンク先URL" target="_self"><img src="画像URL" /></a>
&nbsp;
<a href="リンク先URL" target="_self"><img src="画像URL" /></a>
<br/>
<a href="リンク先URL" target="_self"><img src="画像URL" /></a>
&nbsp;
<a href="リンク先URL" target="_self"><img src="画像URL" /></a>
</center>
<br/>
<!-- ▼最新のブログ記事20件ここから▼ -->

テンプレートのiPhone用トップページに、このような感じでリンクを張っているだけです。
単純なやり方ですが（というか、このレベルの知識しかないので）、
これだけでも見栄えとユーザビリティが向上しているのではないかと思います。

これで次回、端末によっての自動振り分け機能を設定すれば一応完成です（疲れたー）。