【賢威6.2】ヘッダーの文字を画像に変更する方法 | 元インストラクターが教えます!超・初心者さん向けネットビジネスの始め方

ネットビジネス初めの一歩 ~初心者さん向け講座~

初心者講座

wordpress

賢威

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

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

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

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

 

ヘッダーテキスト(文字)を画像に変更するとは?

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

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

 賢威ヘッダー画像

 

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

賢威ヘッダー画像

 

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

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

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

賢威ヘッダー画像

 

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

賢威ヘッダー画像

 

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

賢威ヘッダー画像

 

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

賢威ヘッダー画像

 

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

keni-topgazo7

 

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

賢威ヘッダー画像

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

 

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

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

賢威ヘッダー画像

 

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

賢威ヘッダー画像

 

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

 ↑↑↑

に変更します。

賢威ヘッダー画像

 

 変更が出来ました。

賢威ヘッダー画像

 

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

賢威ヘッダー画像

 

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

賢威 ヘッダー画像

 

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

賢威ヘッダー画像

 

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

賢威ヘッダー画像

 

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

賢威ヘッダー画像

 

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

keni-topgazo18

 

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

賢威ヘッダー画像

 

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

賢威ヘッダー画像

 

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

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

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

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

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

PS.

何か相談したいこと、聞きたいこと、雑談でも、ありましたら

遠慮なくお問い合わせください^^

心を込めてお返事させて頂きます。

【こんなことも教えて!】というご要望も絶賛募集中です!
↓↓↓
マルコにメッセージを送る

 

マルコは、パソコン1台でインターネットで収入を得て暮らしています。
そして、月収130万円を達成して、家庭を犠牲にして働きづめだった生活から、救われました。
ネットビジネスというと胡散臭いイメージがありますが、まっとうなビジネスもちゃんとあります。
そんなビジネスを解りやすく、1から解説していますので
良ければこちらもご覧ください♪♪
↓↓↓
マルコのネットビジネス初心者講座

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

  1. ちゃこ より:

    マルコさま

    いつもわかりやすい説明をありがとうございます。
    先日はこちらの記事で、ブログのヘッダー部分を画像に変更できました。
    ページに対してちょっと小さいですが(笑)
    ヘッダー画像、いいのが見つかったら、こちらにお世話になります。

    次はフッターを変えます。
    引き続きお世話になります♪

    ちゃこ

    • maruko より:

      ちゃこさん、コメントありがとうございます。

      記事がお役に立てたという事で、大変嬉しいです(*´ω`*)

      引き続き頑張ってくださいね♪

      素敵なブログが出来上がりますように(^^)

         マルコ

  2. サナミ より:

    いつもお世話になっています。

    初心者です。早速ですが質問させてください><

    ヘッダーテキストを画像に変更するため説明どおりに行ったのですが、画像が表示されず小さい”?”マークが表示されてしまっています。賢威6.2を使用してますが、ネットで購入した少し改造されているものになります。

    画像は980×250, 1000×200両方試しましたが、?マークしか表示されませんでした。
    それ以上縮小させても同じ結果でした。

    何が原因として考えられるでしょうか?

    曖昧な質問で申し訳御座いませんが、宜しくお願いします

    • maruko より:

      サナミさん、
      お問い合わせありがとうございます。

      ヘッダーテキストを画像に変更する所がうまくいかないのですね。

      もしかするとなのですが、
      ブログの記事から

      変更部分をコピペして御使用頂いた場合に、
      ダブルクオーテーション(”⇐このちょんちょんマーク)が
      文字コードの関係でよく似た別のマークに変わってしまい、
      画像が反映されない事があるようなのです(汗)

      もしそうでしたら一度、header.php上で、
      【”】の部分を手入力し直してみて頂けますでしょうか?
      ちなみに、半角モードでShiftキーを押しながら数字の【2】で入力出来ます。
      (余計なお世話でしたらごめんなさい)

      もしそれでうまくいったら・・・・
      ごめんなさい、コピペでもコードがきちんと反映されるようにしていなかった私の配慮不足です。

      早速修正させて頂きました。

      それでもダメな場合は、お問い合わせフォームから、変更部分のコードを全てコピペして送って頂けると、原因が解るかもしれません。
      (コメント欄に記入頂くと画像URLなどが誰でも見れるようになってしまいますので)

      ご面倒をお掛けしますが、
      よろしくお願いします
      ありがとうございました。

      マルコ

コメントを残す

サブコンテンツ

このページの先頭へ