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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最短ホームページテンプレートの場合、
初期ではヘッダーのサイズ横幅は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. 簡単にホームページが作れるという評判は本当?(最短HPテンプレート編)

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

    ホームページ作成ソフトを決める段階の方でしたら 多くのサイトを見てソフトを比較しているハズ。レビュー…
  2. 私がホームページ作成ソフトを買って「失敗した」と思ったこと

    私がホームページ作成ソフトを買って「失敗した」と思ったこと

    これからホームページ作りを考えている方に向けて、 1つの経験談をお伝えしようかと思います。も…
  3. SEO対策の基礎知識

    SEO対策の第一歩!タイトル・説明文を書くポイント

    ホームページを作るためにはSEO対策が必ず必要になってきます。SEO対策とは、ホームページが検索され…
  4. 初心者さんが失敗

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

    ホームページ作成ソフトを購入したのは良いけど、 結局、ホームページを完成することが出来ずソフトはお蔵…
  5. ムームードメインで取得のドメインをさくらで使う設定方法

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

    最短ホームページテンプレートの動画から少し外れますが 今回はムームードメインで取得したドメインをさく…
フォトマルシェ - PhotoMarche