賢威6.2のブログのヘッダーは初期設定ではテキスト表示になっています。
このテキストを画像表示にさせる方法についてお話します。

A111

ワードプレスに賢威のテンプレートを導入して
ひとまずはブログの形らしさはできたと思います。

が、しかし!ブログのヘッダーをちょっと見てみてください。
賢威の初期設定では、ヘッダー部分はタイトルが自動的にテキスト(文字)として表示されています。
これではすこし寂しい感じがしますね。

賢威6.2カスタマイズ

これを下記のように画像タイトルに変えます。

賢威6.2ヘッダーカスタマイズ

難しそうに思えるかもしれませんが
これからの説明を見たらすぐにできるようになりますよ♪

それでは説明していきます。

ヘッダー用の画像をワードプレスに追加しておこう

まずはブログに載せるヘッダー画像を準備しましょう。
ヘッダーに関しては自分で作成してPCに保存をしておく必要があります。

ヘッダー画像の作成方法は、いくつかありますが
作成方法に関しては割愛させてくださいm(_ _)m

ちなみに、めいこは賢威に載せるヘッダー画像は
サイズは【横1000×縦200】に設定し
保存場所はデスクトップにしました。

ヘッダー画像はバナープラスという画像作成ツールで作りました。
>>バナープラスの詳しい詳細はこちら

賢威6.2ヘッダーカスタママイズ

ヘッダー画像が用意できたら
ワードプレスのダッシュボードにログインしましょう。
左メニューからメディア⇒新規追加の順に選択しクリックします。

賢威6.2カスタマイズ

画面が変わったらファイルを選択をクリックします。

賢威6.2カスタマイズ

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

賢威6.2ヘッダーカスタマイズ

ワードプレスに画像がアップロードされ、下記のような表示になります。
右端の編集をクリックします。

%e2%91%a3%e3%83%bc%ef%bc%92

メディアを編集の画面が出てきます。
右側にある、ファイルのURLをコピペしておきましょう。

賢威6.2ヘッダー編集

ここまでで、ワードプレスにヘッダー画像をアップロードする作業は完了です。
次に、いよいよヘッダーを画像に差し替える作業に入っていきます♪

賢威6.2 ヘッダーをテキストから画像に変更してみよう

ワードプレスの左メニューから外観⇒テーマの編集を選択しクリックします。

賢威6.2ヘッダー編集

テーマの編集画面に切り替わるので
右側のリストから【テーマヘッダー(header.php)】をクリックします。

賢威ヘッダー編集

ヘッダーの記述が表示されますので、画面をスクロールして赤枠の部分を探します。

賢威6.2ヘッダー編集

赤枠の中で青く色がついた<?php bloginfo(‘name’); ?>と書かれた部分を
(ここがヘッダーのテキストが表示されている箇所になります。)

<img src=”画像URL” alt=”” >

という記述へ変更します。
変更すると、下記のようになります。

賢威6.2ヘッダー画像変更

更に、青く色が付いた箇所で”画像のURL”とalt=””の部分を変更します。

①”画像のURL”にワードプレスに画像を保存した際にコピペした画像のURLをここに置き換えします。

②alt=””に画像の説明文を入れます。

賢威6.2画像

これができたら、最後に画面下のファイルを更新をクリックします。
これで画像の設置は完了です^^

賢威6.2ヘッダー編集

さっそく、うまく表示されているか見てみましょう。
画面左上のブログタイトルをクリックしてブログを表示させてみてください。

%e2%91%af

すると、このようにブログのヘッダーが画像に変わっています♪

賢威6.2ヘッダー画像

 

いかがだったでしょうか?
少しURLを変更したりややこしい感じがするかもしれませんが
ヘッダーは最初に一回やっておけばその後は
いじらなくてもOKですのでこの記事を見ながらやってみてください。

ブログのヘッダーが画像になると
雰囲気も変わって楽しくなりますよ♪

>>ワードプレステンプレート賢威について詳しく知りたい人はこちら

テントウムシライン

170

最後まで読んでいただきありがとうございます。 このブログを「いいな」と感じていただけましたら 下のランキングバナーを一回押していただけますと嬉しいです。 みなさんのひとポチが励みになります!

にほんブログ村 小遣いブログ アフィリエイトへ

外注化×アドセンスメルマガやっています。無料プレゼント実施中!!

めいこおすすめアドセンス外注化の教科書