賢威6.2の初期設定では、ヘッダーにはテキスト(文字)が表示されますが、
これを、画像に変更して印象に残るブログを作る方法を
図解入りで丁寧に解説します^^
ヘッダーテキスト(文字)を画像に変更するとは?
下の画像を見てください。
賢威の初期設定では、ヘッダー部分に
ブログのタイトルが自動的に文字(テキスト)として表示されますが、
これではすこ~~し寂しい感じがしますね(;^ω^)
ヘッダーのテキスト部分を、画像に入れ替えてみました。
ブログの印象が一気に変わりましたね♪♪
今回は、この作業をやって行きたいと思います(^^)
画像をWordpressの【メディアライブラリ】に追加しよう
まずは画像を準備しておきます。
ここでは、画像作成の方法は割愛しますが、
今回はサイズ【横1000×縦200】で作成しました。
保存場所はデスクトップにしました。(別の場所でもOKです)
※ちなみに画像は【GIMP】という無料ソフトで作成しました。
興味のある方はGoogle等で検索してみてください^^
Wordpressのダッシュボードにログインしておきます。
① 左メニューの【メディア】をクリックし、
② 画面が変わったら【新規追加】をクリック。
画面が変わったら【ファイルを選択】をクリック。
ファイルの選択画面が表示されますので
①【デスクトップ】をクリック
(ここは画像の保存場所によって変わります)
② 保存しておいた写真をクリック
③【開く】をクリック。
Wordpressのメディアライブラリに画像が追加されました^^
この画像をクリックします。
画像と、その詳細情報が表示されますので、
①【URL】を選択してメモ帳などにコピーしておきます。
② コピーが出来たら右上の【×】をクリックして閉じます。
これで下準備が完了しました♪♪もう一頑張りです!
ヘッダーテキストの代わりに画像を挿入しよう
① 左メニューの【外観】にマウスをあて、
② 出て来たメニューから【テーマの編集】をクリック。
画像が切り替わったら、
右側のリストから【ヘッダー(header.php)】をクリック。
ヘッダーの記述が表示されますので、
赤枠の部分を探します。
その中の、青く色が付いている部分を
↓↓↓
1 |
<img src="画像URL" alt="" > |
↑↑↑
に変更します。
変更が出来ました。
次に、【画像URL】の部分を、準備の段階でメモ帳にコピーしておいた
メディアライブラリの画像のURLに置き換えます。
置き換えが出来ました。(画像のURLは塗りつぶしてあります)
次に、【alt=” “】のチョンチョンの間に、画像の説明となる言葉を入れます。
全て完了したら、画面下の【ファイルを更新】をクリック。
これで画像の設置は完了です!
もう一つ、最後の作業です!!
画像の上に余計な文字が表示されないようにしていきます。
① 左メニューの【賢威の設定】にマウスを当て、
② 出て来たメニューから【賢威の設定】をクリック。
【サイトの簡単な説明】欄の中の文字を消します。
【変更を保存】をクリックします。
さあ、これで全て完了です!
画面左上の、ブログのタイトル部分をクリックして
プレビューを表示してみましょう。
じゃん♪♪
ヘッダー部分に画像がきちんと入りました(#^^#)
いかがでしたでしょうか?
今回は手順が沢山あって大変でしたね。
お疲れ様でした(;^ω^)
こういった作業は最初だけなので、
頑張って乗り切りましょう。
記事を書き始めるとうんと楽しくなりますので♪♪
それでは、今回は、このへんで^^
マルコさま
いつもわかりやすい説明をありがとうございます。
先日はこちらの記事で、ブログのヘッダー部分を画像に変更できました。
ページに対してちょっと小さいですが(笑)
ヘッダー画像、いいのが見つかったら、こちらにお世話になります。
次はフッターを変えます。
引き続きお世話になります♪
ちゃこ
ちゃこさん、コメントありがとうございます。
記事がお役に立てたという事で、大変嬉しいです(*´ω`*)
引き続き頑張ってくださいね♪
素敵なブログが出来上がりますように(^^)
マルコ
いつもお世話になっています。
初心者です。早速ですが質問させてください><
ヘッダーテキストを画像に変更するため説明どおりに行ったのですが、画像が表示されず小さい”?”マークが表示されてしまっています。賢威6.2を使用してますが、ネットで購入した少し改造されているものになります。
画像は980×250, 1000×200両方試しましたが、?マークしか表示されませんでした。
それ以上縮小させても同じ結果でした。
何が原因として考えられるでしょうか?
曖昧な質問で申し訳御座いませんが、宜しくお願いします
サナミさん、
お問い合わせありがとうございます。
ヘッダーテキストを画像に変更する所がうまくいかないのですね。
もしかするとなのですが、
ブログの記事から
変更部分をコピペして御使用頂いた場合に、
ダブルクオーテーション(”⇐このちょんちょんマーク)が
文字コードの関係でよく似た別のマークに変わってしまい、
画像が反映されない事があるようなのです(汗)
もしそうでしたら一度、header.php上で、
【”】の部分を手入力し直してみて頂けますでしょうか?
ちなみに、半角モードでShiftキーを押しながら数字の【2】で入力出来ます。
(余計なお世話でしたらごめんなさい)
もしそれでうまくいったら・・・・
ごめんなさい、コピペでもコードがきちんと反映されるようにしていなかった私の配慮不足です。
早速修正させて頂きました。
それでもダメな場合は、お問い合わせフォームから、変更部分のコードを全てコピペして送って頂けると、原因が解るかもしれません。
(コメント欄に記入頂くと画像URLなどが誰でも見れるようになってしまいますので)
ご面倒をお掛けしますが、
よろしくお願いします
ありがとうございました。
マルコ