賢威6.2コーポレート版でヘッダー画像を表示させる方法

a0002_007767

 

「自作のヘッダー画像を表示させたい!」

 

あれこれ調べながらチャレンジしてみました。

 

「賢威6.2」という WordPress のテンプレート

は今年7月にバージョンがアップしました。

 

そのため,「賢威6.1」のカスタマイズ情報は

たくさんあるのですが,「賢威6.2」は少ない。

 

多少の変更箇所もあるし,テンプレートの

種類によってカスタマイズの仕方が異なる

部分もあるので,大変な面もあります。

 

でも,

そこを遊び心でいじる楽しさがあります。

あなたもそこが好きなのでは?

 

それでは説明に入ります。

 

 1.ヘッダー画像をアップロードする。

 

 ヘッダー表示01

 「ダッシュボード」→「メディア」と進み,

デスクトップ上にある画像をドラックして

点線枠内に運びます。

 

点線枠内でドラッグをやめると,ドロップ。

 

画像ファイルの URL をコピーしておきます。

(URL 上でクリックし,Ctrl + A キーで全選択。

Ctrl + C キーでコピー。)

ヘッダー表示02

 

 ※補足

画像ファイルを 「jpg」 ではなく

「png」 にしていますが,特に意味はありません。

写真を使ってるので,少し画質がいいかな程度。

 

 

2.「head.php」を編集する。

 

(1)「外観」→「エディター」→「ヘッダー」と進みます。

 

ヘッダー表示03

 

ヘッダー表示04

 

(2)「<!–▼ヘッダー–> ~ <!–▲ヘッダー–>」で囲まれた部分を探します。

 

 ヘッダー表示05

 

真ん中あたりのコードをみると,

以下のように書かれた部分があります。

 

以下の場合では,一番下の部分を編集し,

画像のURLを記入します。

 

<編集前>

<p class=”header-logo”>

<a href=”<?php bloginfo(‘url’); ?>”>

<?php bloginfo(‘name’); ?></a></p>

 ↓ ↓ ↓

<編集後>

<p class=”header-logo”>

<a href=”<?php bloginfo(‘url’); ?>”>

<img src=” 画像のURL ” alt=”” /></a></p>

 

すると,以下のようになります。

 

ヘッダー表示06

 

(3)「ファイルを更新」で保存する。

 

完了したら,下部の「ファイルを更新」を

クリックして保存します。(忘れないこと!)

ヘッダー表示07

 

※補足1

「alt=””」はあってもなくてもいいです。

 

※補足2

緑色で囲っている部分は,「賢威の設定」の

「トップページのH1タグ用テキスト」が表示される所。

 ヘッダー表示11

 

H1タグは,SEO的にも効果があるので削除せずに

残しておきました。他のサイトでは削除したり,上部へ

表示させたりしています。(賢威6.1の場合)

ヘッダー表示10

 

 

 ※補足3

青色で囲っている部分は,「設定」→「一般」の

「キャッチフレーズ」が表示される所。詳細は後述。

 

 

3.「キャッチフレーズ」を消去する。

 

これまでの通りに進んでくると,下のように

ヘッド画像の右上に「キャッチフレーズ」が

表示されます。

ヘッダー表示08.5

 

他のサイトのやり方だと,

「青色で囲んでいるコードを丸ごと削除」

になっていますが,ここでは残しておきます。

 

その代わりに,以下で記入した文を消去します。

<消去前>

ヘッダー表示08.0

 ↓ ↓ ↓

<消去後>

ヘッダー表示09.0

 

すると,

ヘッド画像の「キャッチフレーズ」は消えます。

ヘッダー表示09.5

 

なぜ,丸ごとコードを削除しなかったかというと,

① 「削除すると表示がおかしくなった」から。

② 「右上の 『サイトマップ』という表示が消えた」から。

 

賢威6.1の場合は,

「外観」→「テーマの編集」→「スタイル」の

「design.css」を編集しなくてはいけません。

 

縦幅を変更したり,余白を変更したりできましたが,

今回はうまくいかなかったので諦めました。

 

「design.css」を編集しないやり方で説明しました。

 

 

以上で,終了です。

いかがだったでしょうか?

 

私なりの感想は,

・ 時間がかかりすぎたが,勉強になった。

・ 「SIRIUS」の方が簡単なのかな?

・ 奥が深い。勉強不足。

 

また,何か分かったら報告します。

では。

 

共に,一歩前へ!

 

 

あなたの★応援クリック★をお願いします!

  ↓  ↓  ↓

ただ今のランキングは何位?

 

コメントを残す

QLOOKアクセス解析

このページの先頭へ

ライブチャット 人妻