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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最短ホームページテンプレートの場合、
初期ではヘッダーのサイズ横幅は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. domeser
    ホームページを公開するための費用は?
  2. 知らないって怖い!ホームページ制作やSEO対策業者の甘い罠
    知らないって怖い!ホームページ制作やSEO対策業者の甘い罠
  3. weblog
    ホームページとブログの違いは何?
  4. 視線を意識しよう!
    ホームページのデザインは見る人の視線を意識しよう!
  5. 結局、1番モッタイナイのはコレです!
    結局、1番モッタイナイのはコレです!

ピックアップ記事

  1. おしゃれなホームページを作るのに向いてるソフトは?

    おしゃれなホームページを作るのに向いてるソフトは?

    今回はデザインを重視する方に向けて「おしゃれ」なホームページを作るのに向いている作成ソフトをランキン…
  2. 独自ドメインで信頼を!

    独自ドメインと有料レンタルサーバーを使う大切さ

    初めてホームページを作り公開する場合には ドメインを取得し、レンタルサーバーを借りる必要があります。…
  3. 最短HPテンプレートの購入を決めた時の最終チェック

    最短HPテンプレートの購入を決めた時の最終チェック

    当サイトを見ている方の中には どのホームページ作成ソフトにするか90%ぐらい決めた方もいると思います…
  4. 簡単にホームページが作れるという評判は本当?(最短HPテンプレート編)

    簡単にホームページが作れるという評判は本当?(最短HPテンプレート編)

    ホームページ作成ソフトを決める段階の方でしたら 多くのサイトを見てソフトを比較しているハズ。レビュー…
  5. WordPressのテーマは無料・有料どちらを選ぶべきか?

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

    WordPressを使う方にとっては、 テーマ選びは非常に重要な要素の一つです。基本ワードプレスは無…