【見るだけ簡単】ヘッダー画像を変更してトップページへのリンクを実装するワードプレス編集方法！

2016.12.16

 

ワードプレスを作成した段階では、なかなか質素な物。そこでヘッダー画像をデフォルトの物から変更して、自分好みのサイトやブログを作りたいですよね。

 

そこで今回はワードプレスのヘッダー画像を変更して、トップページへのリンクを実装する方法をサイト、ブログ作成初心者の方にお教えします。

 

 

ヘッダー画像の変更

 

まず、ワードプレスの初期段階はこんな感じ。

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-16-16-55-17

 

テーマがSTINGERの場合なんだけど、どのテンプレートでもデフォルトのワードプレスでは「タイトル」「タイトル説明文」「ヘッダー画像」の３つで装飾されています。

 

これを自分好みにどんどん変えて行きます。その為のヘッダー画像変更ですね。

 

 

 

ヘッダー画像を用意する

 

まず最初にやる事はヘッダー画像を用意しましょう。

過去記事にロゴの作成方法は書いているので参考にして下さい。

 

この記事では、アマゾンで販売する為の出品者ロゴを作成する方法を説明してるんですが、ヘッダー画像も同じ要領で作る事が出来るし、大きさを変えれば良いだけなので、自分好みでヘッダー画像が無料で作成出来ます。

 

 

ヘッダー画像を差し替える

 

自分好みのヘッダー画像を用意したら、ヘッダー画像を変更します。

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-16-17-16-59

 

変更の仕方はワードプレスの管理画面に入ります。

 

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-16_17_16_59

 

管理画面から「外観」→「ヘッダー」をクリックするとワードプレスのヘッダー画像を変更する事が出来ます。

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-16-16-20-00

 

するとデフォルトで設定されているヘッダー画像が表示されています。もしかすると現在のヘッダー画像は設定していない人には表示されていないかも。

そこで、「新規画像」をクリックして、作成したヘッダー画像を追加して行きます。

 

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-16-17-23-59

 

「新規画像」をクリックすると、自分がアップロードした画像達が出てくるので、そこからヘッダー画像を選択して下さい。

 

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-16_17_23_59_1

 

仮にヘッダー画像をまだアップロードしていないと言う事なら、変更したいヘッダー画像をクリックして、そのままメディアライブラリにかざせば、画像をアップロード出来ます（ドラック&ドロップ）

 

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-16-16-55-58

 

すると希望するヘッダー画像に変更出来ました。

ただ希望するヘッダー画像には変更出来たんだけど、デフォルトで決めたサイトタイトルとサイト説明文が残っちゃっているのが問題です。ちょっと見栄えが良く無いですからね。

 

 

サイトタイトルを消す

 

ヘッダー画像を変更したらサイトタイトルを消して行きます。

ただ一番最初に設定したサイトタイトル「○○ブログ！」みたいなのを消して行くと、SEO的にあまり宜しく無いんですね。

なのでサイトタイトルを消すと言うよりは、サイトタイトルを隠す、表示させなくする。方がSEO的にも優遇されます。

 

その方法を説明して行きますね。

 

 

外観→テーマ編集

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-16_17_16_59_1

 

サイトタイトルを非表示にする為には、ワードプレスの管理画面から、①外観→②テーマ編集をクリックします。

 

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-16_16_18_36

 

①外観→②テーマ編集をクリックした後に下にスクロールしていくとスタイルシート（style.css）という項目があると思います。

サイトタイトルを表示しない様にするには、ここのスタイルシートに変更を加えて行きます。

 

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-16_16_22_33

 

スタイルシートを見てみると「基本のhタグ」って言う部分があって、その下に/*ブログタイトル*/と言う項目があると思います。

 

 

（※/*ブログタイトル*/をより早くするには、Macでは「command」キーと「f」キーを同時惜しすると、検索窓が開くので、その検索窓に「/*ブログタイトル*/」と入れると場所を特定出来ます。）

 

 

/*ブログタイトル*/

#container #header #header-in #h-l .sitename {
	font-size: 30px;
	color: #fff;
	margin-bottom: 10px;
	line-height: 30px;
}

 

/*ブログタイトル*/

#container #header #header-in #h-l .sitename {
	font-size: 30px;
	color: #fff;
	margin-bottom: 10px;
	line-height: 30px;
display: none;
}

 

この様に変更して行きます。「display: none;」と言うのは、表示させないと言う意味なので、サイトタイトルを表示させない為に、「display: none;」を記入したって感じですね。ただ付け加えるだけです。

 

変更を加えたら、下にある「ファイルを更新」を押して完了です。

 

 

すると、

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-16-16-56-56

 

サイトタイトルが表示されなくなりましたね。

 

 

 

/*ブログタイトル*/が見当たらない場合

 

スタイルシートの中に、「/*ブログタイトル*/」が見当たらず、変更する場所が分からない。

なんて方も居るかもしれません。

 

 

そんな場合は、スタイルシートの一番下に

 

/* ヘッダーの説明文を非表示にする */
#site-title{
  display: none;
}

 

と書き込んで「ファイルを更新」をクリックしてみて下さい。

こうすることで、/*ブログタイトル*/がなかったとしても、サイトタイトルを非表示にする事が出来ます。

 

 

サイト説明文を非表示にする

 

サイトタイトルが非表示に出来ても、サイト説明文がまだ消えていません。

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-16_16_56_56

 

ここですね。

サイト説明文がまだあると、やはりまだ見栄えが悪いので、次にサイト説明文を非表示にして行きます。

やり方としては、サイトタイトルを表示させなくする方法とほとんど同じです。

 

 

 

外観→テーマ編集→スタイルシート（style.css）

 

サイト説明文を非表示にするには、外観→テーマ編集→スタイルシート（style.css）の順番でクリックして行きます。

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-16_17_16_59_2

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-16_16_18_36

 

するとstyle.cssに編集が出来るページに行ったと思いますので、そこに編集を加えて行きます。

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-16_16_24_01

 

スタイルシート（style.css）の下の方に、/*ブログタイトル下の文*/と言う項目があるので、その中に「display: none;」と付け加えます。

 

 

/*ブログタイトル下の文*/

#container #header #header-in #h-l h1 {
	font-size: 12px;
	color: #666;
	font-weight: normal;
}

 

/*ブログタイトル下の文*/

#container #header #header-in #h-l h1 {
	font-size: 12px;
	color: #666;
	font-weight: normal;
display: none;
}

 

と言う風にスタイルシートに変更を加えます。変更するって行ってもただ単に「display: none;」と付け足すだけですが。

 

付け加えたら、「ファイルを更新」をクリックして、編集を保存します。

 

 

 

すると、

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-16-18-13-57

 

ヘッダー画像の上にあったサイト説明文が消えていますね。

これで大分すっきりです。

 

 

 

/*ブログタイトル下の文*/が見当たらない

 

サイトタイトルを非表示にさせるのと同様に、/*ブログタイトル下の文*/がスタイルシートに見当たらない。なんて方も居るかもしれません。

 

そんな方はスタイルシートの下に、

#site-description {
  display: none;
}

と追記してみて下さい。

 

このタグはサイト説明文を非表示にする様に指示するタグなので、/*ブログタイトル下の文*/が見当たらなくても、非表示にする事が出来ます。

 

 

ヘッダー画像にトップページへのリンクを実装する

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-16-18-13-57

 

ここまでの段階で、ヘッダー画像を変えて、サイトタイトル、サイト説明文を表示させない様にワードプレスを編集して来ました。

ただここでヘッダー画像に問題が出て来ます。

 

それがヘッダー画像をマウスにかざしても、「トップページへのリンクが無くなってしまう」と言う事。

 

なんでヘッダー画像を変更すると、トップページへのリンクが無くなってしまうのかと言うと、サイトタイトルがトップページへのリンクを貼る様に、ワードプレスのデフォルトでは設定されているんですね。

つまり、サイトタイトルを表示させない様にすると、トップページへのリンクごとなくなってしまうというのが原因です。

 

 

そこで新しくトップページへのリンクとヘッダー画像とを紐付けていく必要が出て来ると言う事。

 

 

外観→テーマ編集→テーマヘッダー（header.php）

 

ヘッダー画像とトップページへのリンクを紐づけるには、テーマヘッダー（header.php）を編集して行きます。

 

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-16_17_16_59

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-16_16_27_50

 

ワードプレスの管理画面から、外観→テーマ編集をクリックし、右側の中間ほどにある、テーマヘッダー（header.php）をクリックします。

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-16_16_46_59

テーマヘッダー（header.php）の中にある、<div id=”header-in”>というタグを編集して行くので、「<div id=”header-in”>」を探してみて下さい。

 

これはワードプレスのテンプレートによって、ある場所が変わってくるので、「どこどこにある」ってことは異なってくるんですが、大体「<body>」タグの直下にある事が多いです。

 

もし分からない場合は、Macユーザーは「command」「f」キーの同時押しで検索窓をだして見つけてみて下さい。

 

 

ヘッダー画像をトップページへのリンクを実装する場合、

<div id="header-in">

<div id="header-in"onclick="location.href='あなたのサイトのurl'" style="cursor:pointer">

と変更して行きます。

 

要するに<div id=”header-in”>の部分に、

onclick=”location.href=’あなたのサイトurl'” style=”cursor:pointer”>を追加するだけですね。

 

こうする事で、ヘッダー画像をクリックすると自分のサイトのトップページへ移行する様になります。

 

 

これでスッキリしたヘッダー画像で、ヘッダーを変更しても、画像をクリックするだけでトップページに戻る様に設定出来る様になったと思います。

 

よくわからん、アルファベットが色々出て来て戸惑うかもしれませんが、慣れてくれば短銃なので、ワードプレスを実装した際には、最初の方にやってしまいましょう。

 

 

まとめ

 

ヘッダー画像を変更し、トップページへのリンクを実装する方法

  1. ヘッダー画像を用意する
  2. ヘッダー画像を変更
  3. サイトタイトル、サイト説明文を非表示にする
  4. ヘッダー画像からトップページへのリンクを実装する

 

と言う順番ですね。

 

なかなか慣れていないとワードプレスの編集って時間が掛かる事と思います。

ただ初心者の方でも見てもらうってコピペするだけで簡単に変更する事が出来ます。

 

 

またヘッダー画像って言うのは、サイトに取って顔なので非常に重要な部分。

キレイにしてスッキリさせておくに超した事は無いので、ぜひワードプレスのヘッダー画像の変更をしておきましょう。