最短ホームページテンプレートの使い方 ヘッダー画像を入れるカスタマイズ

最短ホームページテンプレートの使い方 ヘッダー画像を入れるカスタマイズ

今回はヘッダーに画像を入れるカスタマイズ方法です。

最短ホームページテンプレートの動画にはありませんが、
疑問になると思いますので、編集方法を覚えましょう。

ヘッダーに画像を入れるだけで、サイトの雰囲気が大きく変化しますし、
アクセスを逃がさない効果もあります。

ヘッダー部分を確認しましょう

まず「ヘッダーってどこ?」となるといけないので
ヘッダー部分はどこか? 確認しましょう。

最短ホームページテンプレートの初期状態では白い最上部の部分です。
※ナビゲーションバーの上(タイトルのところ)
ヘッダー画像はココ

このヘッダーはホームページの訪問者が最初に目にする部分で、
そのサイトの内容を一瞬で連想させることが出来る貴重な部分です。

言わば…ホームページの顔となる部分です。

サイトに訪問した際、読むか?閉じるか?ということは瞬時に判断されます。
せっかくのアクセスも、すぐに閉じられては意味がないので
このヘッダーはとても重要なのですね。

是非、興味を引くような画像にしましょう。

【ワンポイント】
ヘッダー画像は訪問者が最初に目にする部分。
サイト内容がわかるような画像にしましょう。

ヘッダー画像を変更するには、ここを編集する

ヘッダー画像の編集作業の前に、まずは画像を用意します。

最短ホームページテンプレートの場合、
初期ではヘッダーのサイズ横幅は770ピクセルになっていますので、
770ピッタリの画像を用意します。(縦幅は変更できるので好きなサイズでOK)
横幅は770ピクセル縦は任意

用意したら、タイトル画像と同じフォルダに入れておきます。
用意したら、タイトル画像と同じフォルダに入れておきます。
続いて、今回はinex.htmlのファイルを編集するので
テキストエディタにドラッグ&ドロップします。
TeraPadにドラッグ&ドロップします。

ソースを開いたら、今回変更する部分を探します。
変更するのは<!– ここがタイトルバーです –>のところ。
※変更する部分を赤くしておきます。
※変更する部分を赤くしておきます。

変更するのは下記

【1】urlの後ろは画像ファイル名を入れるので、今回はcar.jpgに!
【2】<br>を消します。(2ヶ所)
【3】画像の高さを指定するためにタグを追加
今回は縦幅350ピクセルの画像を使うので…
width=”100%”の後ろにheight=”350″とタグを追加し高さを指定します。

※黄色の部分が変更した部分
※黄色の部分が変更した部分

保存し、更新するとこのようにヘッダー画像が変化します。
保存し、更新するとこのようにヘッダー画像が変化します。これで完成です。

他のページのヘッダーも変更することを忘れずに

今回は例としてindex.htmlを編集しましたので、
他のページの<!– ここがタイトルバーです –>のところを変更して下さい。
※side.htmlは除く
他ページの変更も忘れずに

<!– ここがタイトルバーです –>の部分、全てをコピーして
他ページに貼り付けるのが確実ですよ。
全てをコピーして 他ページに貼り付けるのが確実です。

最初にも書きましたが、ヘッダー画像はとても重要で
ホームページ全体の顔になる部分です。

直帰率にも関わる非常に部分なので、画像も慎重に決めて下さい。

できる限り、サイト全体を連想し易い画像にする。
できる限り、インパクトがある画像にする。

この辺りを意識すると良いと思います。

 


関連記事


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


おすすめ記事


ボタンマルシェ - ButtonMarche

購入者様への特典

人気の記事

  1. 無料ホームページ作成ソフトのメリット・デメリット
    無料のホームページの作成ソフトメリット・デメリット
  2. ホームページ作成ソフトの選び方
    自分に合うホームページ作成ソフトの選び方
  3. ホームページを作っていて本当に困った時の解決方法
    ホームページを作っていて本当に困った時の解決方法
  4. 実際に体験したシリウスでのトラブル
  5. 作成ソフト選びから完成まで最初から完璧を求めない考え方を!
    作成ソフト選びから完成まで、完璧を求めない考え方を!

ピックアップ記事

  1. SEO対策に重要!H1 H2 H3タグの使用方法

    SEO対策にも必須!タイトル・ヘッダーに書くポイント 少しでも上位表示されるためにやるSEO対策上記…
  2. SIRIUS(シリウス)の購入を決めた時の最終チェック

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

    当サイトを見ている方の中には どのホームページ作成ソフトにするか90%ぐらい決めた方もいると思います…
  3. 初心者の私がホームページ作成ソフトを選ぶまでの思考

    初心者の私がホームページ作成ソフトを選ぶまでの思考

    当サイトを見ている方の中には ホームページ作成は、本当に初めて方も多いと思います。初めて挑戦する方の…
  4. ムームードメインで取得のドメインをさくらで使う設定方法

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

    最短ホームページテンプレートの動画から少し外れますが 今回はムームードメインで取得したドメインをさく…
  5. 簡単にホームページが作れるという評判は本当?(シリウス編)

    簡単にホームページが作れるという評判は本当?(シリウス編)

    ホームページ作成ソフトを決める段階の方でしたら すでに様々な情報を集めていると思います。様々なサイト…
フォトマルシェ - PhotoMarche