最短ホームページテンプレートの使い方2 タイトルを掲載しよう

基本情報の次はタイトルバーのタイトルを変更することです。
最短ホームページテンプレートの動画では、第2回の部分になります。

初期状態のホームページを確認しよう!

まず、現在のホームページを確認してみましょう。
※index.htmlをダブルクリックすれば確認できます。

まずデフォルトを確認

 

今回のタイトルを変更する。と言うのは…
下記画像のホームページタイトルという部分です。
今回のタイトルを変更する。と言うのは… 下記画像のホームページタイトルという部分です。

【ワンポイント】
ここで行う作業はとても簡単な作業です。
ただ、作業は簡単なのですが
ホームページ作成の中では、最も重要とも言える部分です。
ホームページのタイトルはSEO対策(検索エンジン最適化)でも
非常に大切になりますので、じっくり考えて決めて下さいね。


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

タイトルを変更するソース部分はここ

開いたら、ここが<h1> ホームページのタイトル </h1>の文字部分を
あなたが考えたタイトルに変更します。
<h1> </h1>のタグは絶対に消さず文字部分だけ変更
あなたが考えたタイトルに変更します。

サンプルで下記のように変更しました。
あなたが考えたタイトルに変更します。

変更したら保存します。
保存方法は、ファイル⇒ 上書き保存で保存できます。
保存方法は、ファイル⇒ 上書き保存で保存できます。

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


保存が終わったら、更新ボタンを押して
ファイルが変更されているか確認してみて下さい。

【ワンポイント】
更新は、更新ボタンを押さなくても、
キーボードのCtrl + F5 のショートカットキーを使い更新できます。
インターネットエクスプローラー(IE)やFirefoxでは
Ctrl + F5をスーパーリロードと言います。
スーパーリロードについて、詳しく理解する必要はないですが、
古いデータは消え、最新の状態になる。と思って頂ければ結構です。

タイトルバーの画像・文字色・文字サイズの変更

また、タイトルバーの画像は下記で変更できます。
また、タイトルバーの画像は下記で変更できます。

そして、この部分(h1)の部分の
文字の色や文字サイズはスタイルシートを変更することで変えることも出来ます。

そして、この部分(h1)の部分の 文字の色や文字サイズはスタイルシートを変更することで変えることも出来ます。

ここまで来たら、最後の作業は、
変更したタイトルを、index.htmlのファイル以外にも貼り付けます。

今回変更したタイトル部分を丸ごとコピーして
page1.html~page5.htmlのタイトル部分にコピーをして完成です。

【ワンポイント】
index.html以外のページへのコピーを忘れないで下さい。
※よく忘れます
page2.html page3.htmlなどをテキストエディタで開き
タイトル部分にコピーして下さいね。

 

 


関連記事


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


おすすめ記事


ボタンマルシェ - ButtonMarche

人気の記事

  1. ムームードメインで取得のドメインをさくらで使う設定方法
    ムームードメインで取得のドメインをさくらで使う設定方法
  2. 本当の初心者でも作れる簡単なホームページ作成ソフトは?
    本当の初心者でも作れる簡単なホームページ作成ソフトは?
  3. ホームページとブログの違いは何?
  4. ホームページ作成ソフトの選び方
    自分に合うホームページ作成ソフトの選び方
  5. わからないことを解決する検索力を鍛えよう
    わからないことを解決する検索力を鍛えよう

ピックアップ記事

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

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

    最短ホームページテンプレートの動画から少し外れますが 今回はムームードメインで取得したドメインをさく…
  2. WordPressのテーマは無料・有料どちらを選ぶべきか?

    WordPressのテーマは無料・有料どちらを選ぶべきか?

    WordPressを使う方にとっては、 テーマ選びは非常に重要な要素の一つです。基本ワードプレスは無…
  3. htmlがわからなくてもホームページは作れるのか?

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

    ホームページ作成を検討している方の中には HTMLがよくわからない方がいると思います。そんな方が疑問…
  4. 初心者さんが失敗

    初心者さんがソフト選びに失敗する最大の原因

    ホームページ作成ソフトを購入したのは良いけど、 結局、ホームページを完成することが出来ずソフトはお蔵…
  5. 会社のホームページを作るのに向いている作成ソフトは?

    会社のホームページを作るのに向いている作成ソフトは?

    今回は会社でホームページを作ることになった方に向けて 会社のホームページを作るのに向いている作成ソフ…