コンテンツバーの作成方法
人気ブログランキングの応援
をして頂けると励みになります。
まず、「コンテンツバー」とは、
石田卓馬さんの「会員制サイドビジネス講座ファーストクラス」では、
下図の赤枠内のことを言います。
実際のホームページは、こちらでご確認下さい。
↓↓↓
「個人事業者/中小企業専門ホームページ作成サービスルナネット」
（注）平成24年9月30日付でホームページをリニューアルしましたので、
表示される画像が相違していますが、ご了承ください。
一般的には、
「メニューバー」と言われています。
それでは、コンテンツバー（メニューバー）を作成してみましょう。
石田卓馬さんの「会員制サイドビジネス講座ファーストクラス」では、
コンテンツバーは、tableタグを使って作成します。
まず、無料画像編集ソフトJtrimで次の画像を作成しました。
これをメニューバーの背景画像として使用します。
また、コンテンツバーに入れる各ページの名前を
決定します。
私は、次のように名前を付けました。
［トップページ］
［サービス内容］
［ＨＰ作成の流れ］
［ＨＰ作成料金］
［ＨＰ作成実績］
［お問合わせ］
そして、下記の通りHTMLを入力し、
「index.html」と名前を付けて保存します。
<!-- ここがコンテンツバーです -->
<table width="100%" height="35" cellspacing="0" cellpadding="0" bgcolor="#6899d1" align="center">
<tr valign="middle" align="center">
<td width="150" background="top-bar.jpg"><span style="font-size:11pt;"><a href="index.html"><font color=white><strong>トップページ</strong></font></a></span></td>
<td width="150" background="top-bar.jpg"><span style="font-size:11pt;"><a href="page1.html"><font color=white><strong>サービス内容</strong></font></a></span></td>
<td width="150" background="top-bar.jpg"><span style="font-size:11pt;"><a href="page2.html"><font color=white><strong>ＨＰ作成の流れ</strong></font></a></span></td>
<td width="150" background="top-bar.jpg"><span style="font-size:11pt;"><a href="page3.html"><font color=white><strong>ＨＰ作成料金</strong></font></a></span></td>
<td width="150" background="top-bar.jpg"><span style="font-size:11pt;"><a href="page4.html"><font color=white><strong>ＨＰ作成実績</strong></font></a></span></td>
<td width="150" background="top-bar.jpg"><span style="font-size:11pt;"><a href="page5.html"><font color=white><strong>お問合わせ</strong></font></a></span></td>
</tr>
</table>
これで、コンテンツバーが完成しました。
このコンテンツバーがあると、
お客様にとってとても使いやすいサイトになります。
ここをクリックすることにより、
各ページへ飛ぶことができます。
今回は、以上です。
最後まで読んでいただき、
ありがとうございました。
少しでもお役に立ちましたら、
人気ブログランキングへ
応援お願いします!!