• Home
• 最短ホームページテンプレートについて
• 最短ホームページテンプレートの使い方3　コンテンツバーを変更しよう

• 最短ホームページテンプレートについて

最短ホームページテンプレートの使い方3　コンテンツバーを変更しよう

タイトルバーの変更の次はコンテンツバーを変更します。
最短ホームページテンプレートの動画の、第3回の部分になります。

最短ホームページテンプレートのコンテンツバーはここ

今回のコンテンツバーを変更する。と言うのは…
下記画像のトップページ～コンテンツ1,2,3,4,5という部分になります。

まず、index.htmlをテラパッドに、ドラッグ＆ドロップして開きます。
※無料テキストエディタTerapad（テラパッド）を利用

コンテンツバーを変更するにはココを変更する

開いたら、<！– ここがコンテンツバーです –>の部分を右に進めていきます。

すると、こちらの箇所が出てきます。
この文字の部分を変更していきます。

例えば…　このように変更します。
変更したら保存します。
保存方法は、ファイル⇒　上書き保存で保存できます。

【ワンポイント】
保存は、ファイル⇒上書き保存としなくても、
キーボードのCtrl + s のショートカットキーを使い保存できます。
このCtrl + s での保存は、めちゃくちゃ使えますので、
こちらの保存方法を癖にしましょう。

保存が終わったら、更新ボタンを押して
コンテンツバーが変更されているか確認してみて下さい。

このように変更されていればOKです。

コンテンツバーの文字色を変更した場合は！

コンテンツバーの文字色を変更した場合、HTMLソースの色を変更します。

例えば黄色に変更したければ、whiteの部分をyellowに変更します。

【ワンポイント】
コンテンツバーの背景も画像を変更することができます。
変更方法は、動画で確認してみて下さい。
すごく簡単に変更できますよ。

最後に他のページのコンテンツバーも変更する

トップページ（index.html）を変更し保存したら
他のページ（page2.htmlやpage3.html）も変更していきます。

変更したトップページ（index.html）の下記をコピーします。

コピーした部分を他のページ（page2.htmlやpage3.html）に貼り付けます。
page2.html page3.html page4.html page5.htmlに
<！– ここがコンテンツバーです –>　～ </table>部分に、コピーしたものを貼り付け完成。

全てのページ（side.html以外）に貼り付けたら
コンテンツバーの変更は終了となりますので、全ページ確認して下さいね。

自分で更新できる最短ホームページテンプレートは、
こうした簡単な作業を1つ1つクリアしていけば、しっかり完成します。
説明も動画なので、是非、活用して下さいね。