[対応:5]ヘッダー画像(メインイメージ)の変更方法

賢威には、5種類のテンプレートのうちプリティ版を除く4種類で
ヘッダー画像(メインイメージ)が用意されています。

ここをうまく使う事で、デザインのインパクトは大幅に変わります。
今回は、ヘッダー画像の変更方法を説明します。

ヘッダー画像を消す事も出来ますので、それはカスタム編でご説明します^^

heddagazou


ヘッダー画像の変更方法

それでは、ヘッダー画像の変更方法について説明します。
FFFTPなどで、FTPツールを使って画像をアップロードしても良いですが、
WordPress側の画像アップロード方法にてご説明します。

画像をサーバーにアップロードする方法

まず始めに変更したいタイトル画像をWordPressに
アップロードしておく必要があります。

画像の取り込み方がわからない場合は、
WordPressで画像をサーバーにアップロードする方法
を参照ください。

 

ab00002734[3]

WordPress⇒ダッシュボード⇒メディアから画像の取り込みを行います。

 

 ab00002625

上記の通り簡単にWordPressに画像がアップロードされます^^
アップロードしたファイルURL画像サイズを記録しておきましょう。

 

ヘッダー画像(メインイメージ)の変更方法

次に取り込んだメインイメージの変更方法をご説明します。

今回の例として、

ファイルURLが
http://kasegoo.info/wp-content/2011/02/tennpurehannbai.jpg

画像サイズが
950×144

として説明します。

 

ダッシュボード⇒外観⇒テーマ編集から、
まずは、メインインデックスのテンプレート (index.php)を開きます。

各テンプレート事に若干場所は違いますが、

<!–▼メインイメージ–>
<div id="main-image">
    <div id="main-image-in">
<img src="<?php bloginfo(‘template_url’); ?>/images/top-image.jpg" width="950" height="144" alt="イメージ画像" />
    </div><!–/main-image-in–>
</div>
<!–▲メインイメージ–>

↑のような<!–メインイメージ—>のソース部分を探します。

<?php bloginfo(‘template_url’); ?>/images/top-image.jpg
この部分がメインイメージ画像のURLになりますので、
取り込んだメインイメージのファイルURLと画像サイズを入れ換えます。

 

<!–▼メインイメージ–>
<div id="main-image">
    <div id="main-image-in">
<img src=http://kasegoo.info/wpcontent/2011/02/tennpurehannbai.jpg width="950" height="144" alt="イメージ画像" />
    </div><!–/main-image-in–>
</div>
<!–▲メインイメージ–>

このように、ファイルURLと画像サイズを入れ換えれば完了です。

以上
お疲れ様でした・・・・
って言いたいところなのですが、

ヘッダー画像はそれぞれのページで変更して上げないといけません。

今はトップページのみのヘッダー画像が変更されただけです。
同様にアーカイブや記事部分での変更が必要です。

めんどくさいように思えますが、
反対に各ページ事に画像が変更できる事を意味しています。

この同じ作業を、

  • 404 テンプレート (404.php)
  • アーカイブ (archive.php)
  • サイトマップ Page Template (page-sitemap.php)
  • ページテンプレート (page.php)
  • 単一記事の投稿 (single.php)
  • 検索結果 (search.php)

 

こちらの6種類も同様に、トップページと同じ変更が必要です。
これで、どのページも同じ画像が表示されるようになります。

以上
賢威 ヘッダー画像(メインイメージ)の変更方法でした。

3 Responses to “[対応:5]ヘッダー画像(メインイメージ)の変更方法”

  1. […] FFFTPのアップロードについては、 賢威 ヘッダー画像(メインイメージ)の変更方法の中段ぐらいを参照 […]

  2. 小太郎 より:

    マメボーさんこんばんわ☆
    最近賢威5.0を購入してワードプレスに挑戦中ですが、
    しょっぱなからたくさんのことにつまづいています。
    検索していたところマメボーさんのサイトを発見し、
    悩んでいたヘッダー画像変更方法がこの記事で解決しました、
    ありがとうございます(^^)

    賢威のフォーラムや他のサイトの方法も試してもうまくいきません
    でしたが、マメボーさんの方法でうまく行きましたので、
    感謝感激です☆

    記事では数か所変更するようになってますが、すべて
    同じ方法ですし、文字の削除とコピペでできますので
    3分もあればできてしまいますね(笑)
    勉強になりましたm(__)m

    • マメボーw より:

      小太郎さん
      お世話になってます^^

      サイトを利用して頂きありがとうございます^^
      今後ともよろしくお願いします。

コメントを残す

サブコンテンツ

このページの先頭へ