【賢威6.2】ヘッダーの文字を画像に変更する方法

賢威6.2の初期設定では、ヘッダーにはテキスト（文字）が表示されますが、

これを、画像に変更して印象に残るブログを作る方法を

図解入りで丁寧に解説します^^

 

ヘッダーテキスト（文字）を画像に変更するとは？

下の画像を見てください。

賢威の初期設定では、ヘッダー部分に
ブログのタイトルが自動的に文字（テキスト）として表示されますが、
これではすこ～～し寂しい感じがしますね(;^ω^)

 

 

ヘッダーのテキスト部分を、画像に入れ替えてみました。
ブログの印象が一気に変わりましたね♪♪
今回は、この作業をやって行きたいと思います(^^)

 

画像をWordpressの【メディアライブラリ】に追加しよう

まずは画像を準備しておきます。
ここでは、画像作成の方法は割愛しますが、
今回はサイズ【横1000×縦200】で作成しました。
保存場所はデスクトップにしました。（別の場所でもOKです）

※ちなみに画像は【GIMP】という無料ソフトで作成しました。
興味のある方はGoogle等で検索してみてください^^

 

  Wordpressのダッシュボードにログインしておきます。
①　左メニューの【メディア】をクリックし、
②　画面が変わったら【新規追加】をクリック。

 

 画面が変わったら【ファイルを選択】をクリック。

 

  ファイルの選択画面が表示されますので
①【デスクトップ】をクリック
（ここは画像の保存場所によって変わります）
②　保存しておいた写真をクリック
③【開く】をクリック。

 

 Wordpressのメディアライブラリに画像が追加されました^^
この画像をクリックします。

 

 画像と、その詳細情報が表示されますので、
①【URL】を選択してメモ帳などにコピーしておきます。
②　コピーが出来たら右上の【×】をクリックして閉じます。

 これで下準備が完了しました♪♪もう一頑張りです！

 

ヘッダーテキストの代わりに画像を挿入しよう

①　左メニューの【外観】にマウスをあて、
②　出て来たメニューから【テーマの編集】をクリック。

 

 画像が切り替わったら、
右側のリストから【ヘッダー（header.php）】をクリック。

 

 ヘッダーの記述が表示されますので、
赤枠の部分を探します。
その中の、青く色が付いている部分を 
↓↓↓

 

 変更が出来ました。

 

 次に、【画像URL】の部分を、準備の段階でメモ帳にコピーしておいた
メディアライブラリの画像のURLに置き換えます。

 

置き換えが出来ました。（画像のURLは塗りつぶしてあります）
次に、【alt=” “】のチョンチョンの間に、画像の説明となる言葉を入れます。

 

 全て完了したら、画面下の【ファイルを更新】をクリック。
これで画像の設置は完了です！

 

 もう一つ、最後の作業です！！
画像の上に余計な文字が表示されないようにしていきます。
①　左メニューの【賢威の設定】にマウスを当て、
②　出て来たメニューから【賢威の設定】をクリック。

 

 【サイトの簡単な説明】欄の中の文字を消します。

 

 【変更を保存】をクリックします。

 

 さあ、これで全て完了です！
画面左上の、ブログのタイトル部分をクリックして
プレビューを表示してみましょう。

 

 じゃん♪♪
ヘッダー部分に画像がきちんと入りました(#^^#)

 

 いかがでしたでしょうか？

今回は手順が沢山あって大変でしたね。
お疲れ様でした(;^ω^)

こういった作業は最初だけなので、
頑張って乗り切りましょう。

記事を書き始めるとうんと楽しくなりますので♪♪

それでは、今回は、このへんで＾＾