賢威でWordPress~サイズの違うヘッダー画像を入れ替えて全体を修正する

賢威のヘッダー画像は、一番最初に賢威のユーザーサイトにある、
テンプレートメーカーで作成するときに、
「これを使いたい!」っていうのをあらかじめ設定できます。

ヘッダー画像は、後から変更することもできますし、
最初はテキスト文字だったのを画像に変えることもできます。
※ テキストから画像に変える場合はこちらをごらんください。

ここでは、一旦画像で作成したヘッダー画像を、
違う画像に差し替える作業を行います。

とはいえ、作成した新しいヘッダー画像が、
今使用しているヘッダー画像と同じ高さなら、
画像さえ差し替えればいいのでさほど手間はかかりません。

もし、違う高さのヘッダー画像を差し替える場合には、
パンくずナビやグローバルメニューなど、
サイトの全体位置を調整する必要があります。

まずは画像を差し替える

では、まずは、ヘッダー画像そのものを入れ替える作業をしましょう。
まずは、入れ替えたいヘッダー画像を用意します。

そのヘッダー画像に使う画像をワードプレスにアップロードします。

このとき、「画像サイズ」「画像のパス」は、大事にメモしておきます。
次いで、管理画面から、「外観」⇒「テーマ編集」を選択、

たくさんあるphpファイルの中から、
「headertext.php」を選択。

<div id=”header-logo”>
<p id=”logo-text”><a href=”<?php bloginfo(‘url’); ?>”><img src=”<?php bloginfo(‘template_url’); ?>/images/common/logo.pngwidth=”298″ height=”29″ alt=”<?php bloginfo(‘name’); ?>” /></a></p>
</div>
<div id=”header-text”>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>

上記ハイライトした箇所に、新しいヘッダーの情報を入れていきます。

<div id=”header-logo”>
<p id=”logo-text”><a href=”<?php bloginfo(‘url’); ?>”><img src=”http://webdesign2013.com/wp-content/uploads/header.jpgwidth=”900” height=”135 alt=”<?php bloginfo(‘name’); ?>” /></a></p>
</div>

もし、新旧どちらのヘッダー画像も同じ高さなら、
作業はここでおしまいです。

けれど、新しいヘッダーの方が縦幅が大きい(小さい)場合、
そのヘッダー画像のサイズに合わせて、

● グローバルメニュー
● パンくずナビ
● メインコンテンツ

を、ぴったり合うように下げる(上げる)必要がありますね。

新しいヘッダー画像に合わせて全体を調整する

では、実際に、その手順を見ていきましょう。
その前に。

先ほど、新しく差し替えたヘッダー画像のサイズは覚えていますか?
例えば、縦100ピクセルの画像を、縦130ピクセルに変更した場合、
グローバルメニューやパンくずナビなどを、30ピクセルずつ下げればいいわけですよね!

その、「いくつ下げればいいのかな」という数字は、
キッチリ把握しておきましょう。

まずは、グローバルメニューから。
管理画面から、「外観」⇒「テーマ編集」を選択、

たくさんあるphpファイルの中から、
「cool-blueg12.css」を選択。
(このファイル名は選択したテンプレートによって異なります)

/*——————————————————–
グローバルメニュー
——————————————————–*/

#global-menu{
position: absolute;
top: 135px;
height: 36px;
background: url(images/common/bg-navi.gif) left center repeat-x #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}

この数字を、変更します。
先ほどもいいましたが、変更する画像が元の画像より30ピクセル大きいのならば、
ここも同じように30ピクセル数字を増やしていきます。

一度、ここで、変更を更新して、いい位置に下がったかどうかを確認してください。
いい位置に配置されていれば、このまま、パンくずナビの位置を調整します。

/*——————————————————–
パン屑ナビ
——————————————————–*/

#breadcrumbs{
position: absolute;
top: 223px;/*▲ページ最上部からの距離*/
left: 0;
}

#breadcrumbs li{
float: left;
padding: 0 10px 0 15px;
background: url(images/icon/icon-breadcrumbs.gif) left 5px no-repeat;
font-size: 1.2em;
color: #000;
}

上記の、ハイライトした部分を変更します。
基本は先ほどと一緒で、画像サイズが変わった分の数字を目安に増やせばいいでしょう。

/*——————————————————–
コンテンツ全体
——————————————————–*/

#main-image{
position: absolute;
top: 203px;/*最上部からの高さの指定*/
background: url(images/common/bg-topimage.gif) center top repeat #111;
border-bottom: 1px solid #000;
}

#main{
padding-top: 253px;/*▲ページ最上部からの距離*/
background: url(images/common/bg.jpg) repeat #020202;
border-top: 1px solid #444;
}

同様に、コンテンツ全体の位置も変更します。
変更するのは2箇所。

ひとつ(上のほう)は、メインイメージの位置調整です。

下のほうは、メインコンテンツの位置です。

こまめに画面を確認しながら、
位置を調整していきましょう。

以上で、ヘッダーの画像を入れ替える作業は完了です。

あわせて読みたい関連記事

“賢威でWordPress~サイズの違うヘッダー画像を入れ替えて全体を修正する” への1件のフィードバック

  1. [...] 賢威でWordPress~ブログのヘッダーを画像にする 賢威でWordPress~サイズの違うヘッダー画像を入れ替えて全体を修正する 賢威でWordPress~トップメニューの編集方法 [...]

サブコンテンツ

このページの先頭へ