Twenty Twelveのヘッダ画像をナビの上に置き換える

a-01

「タイトルが文字だけだとそっけない」

いくらシンプルイズベストな考えの私でも、ちょっとこれは貧相過ぎるかと思い、目立たない程度にタイトルを画像に変えました。大して意味ないですね (´ー`A;) でも変えたかったんです。そう・・・

「自己満足以外の何物でもない!」

・・・それはさておき、Twenty Twelveのヘッダ画像はメニューバーの下に表示されますよね?

現在、このブログはTwenty Twelveを使用していません。
スポンサーリンク

Twenty Twelveのヘッダ画像を最上位に持ってくる

それを無理やりでは無いですが、メニューバーの上に表示して行こうと言う施術をして行こうかと思います。

SnapCrab_NoName_2015-10-4_19-38-28_No-00

私の場合は、トリミングをして画像を小さくして表示してますが、960×250ピクセル推奨と書いてありますので、最初は指示通りにして試してみるのも良いかも知れませんね。この様に最終的には管理画面の【カスタマイズ】で適応します。

では、早速始めて行きたいと思います。

ヘッダーのコードを入れ替える

子テーマを作っていること前提で始めます。

まず初めに、header.phpを子テーマに追加します。

管理画面のテーマの編集かFTPソフトどちらでも良いですけど、次のコードをまず探します。

これは、ヘッダー画像を記述したコードです。↑これをメニューバーの記述の上に引っ越す訳です。

<nab id=・・・とナビの記述の上に入れてやれば、画像が上に表示されると言う事だけです。具体的なコードは

この記述の上に先程のを切り取りペーストすれば良いだけなんです。

テキストを消す

やり様によっては、画像の上にテキスト表示も出来ますが、今回は私の施術、ロゴ+

この記述をheader.phpから探します。そして、これをすべて消去すれば、画像のみとなります。

私は、要約を残したので、この様な形になります。

タイトル部分だけを削除して画像の下に表示されるように<nav id の直前に移動させました。

余白を少なくする

style.cssに記入して下さい。

この辺は、お好みでどうぞ。

では今回はこれにて終了とします。

スポンサーリンク

シェアする

フォローする

スポンサーリンク