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

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

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

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

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

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

開いたら、<!– ここがコンテンツバーです –>の部分を右に進めていきます。
右側に進める
すると、こちらの箇所が出てきます。
こちらの部分この文字の部分を変更していきます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 


関連記事


初心者さんおすすめ! 徹底比較 簡単ホームページ作成ソフトランキング


おすすめ記事


ボタンマルシェ - ButtonMarche

人気の記事

  1. わからないことを解決する検索力を鍛えよう
    わからないことを解決する検索力を鍛えよう
  2. 視線を意識しよう!
    ホームページのデザインは見る人の視線を意識しよう!
  3. ホームページ作成ソフトの選び方
    自分に合うホームページ作成ソフトの選び方
  4. ホームページを作れるメリット
    ホームページが作れるというスキルの素晴らしさとメリット
  5. 作成ソフトの特徴よりも重要な3つのこと
    作成ソフトの特徴よりも重要な3つのこと

ピックアップ記事

  1. WordPress(ワードプレス)とホームページ作成ソフトの違い

    WordPress(ワードプレス)とホームページ作成ソフトの違い

    ホームページ作成ソフトのおすすめで3位としているWordPress(ワードプレス)今では日本でも使っ…
  2. ムームードメインで取得のドメインをさくらで使う設定方法

    ムームードメインで取得のドメインをさくらで使う設定方法

    最短ホームページテンプレートの動画から少し外れますが 今回はムームードメインで取得したドメインをさく…
  3. htmlがわからなくてもホームページは作れるのか?

    htmlがわからなくてもホームページは作れるのか?

    ホームページ作成を検討している方の中には HTMLがよくわからない方がいると思います。そんな方が疑問…
  4. SIRIUS(シリウス)の購入を決めた時の最終チェック

    SIRIUS(シリウス)の購入を決めた時の最終チェック

    当サイトを見ている方の中には どのホームページ作成ソフトにするか90%ぐらい決めた方もいると思います…
  5. 重いサイトはダメ!?軽いホームページ作成ソフトは?

    重いサイトはダメ!?軽いホームページ作成ソフトは?

    サイトを開いた際に表示速度が遅く閉じた。 こんな経験は誰にでも1度はあると思います。表示速度が遅いこ…