Amazonランキング1位本を無料プレゼント!

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


Amazonランキング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-17

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

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

ヘッダー画像を用意する

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

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

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

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

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

%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」キーを同時惜しすると、検索窓が開くので、その検索窓に「/*ブログタイトル*/」と入れると場所を特定出来ます。)

この様に変更して行きます。「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

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

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

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

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

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

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

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

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

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

%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;」と付け加えます。

と言う風にスタイルシートに変更を加えます。変更するって行ってもただ単に「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

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

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

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

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

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

と追記してみて下さい。

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

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

%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”>の部分に、

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

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

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

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

まとめ

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

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

と言う順番ですね。

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

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

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

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

P.S.

1000円が9800円に変わる仕入れ先、業界の約6倍以上の利益額を稼ぐ超高利益せどりのノウハウ、副業開始わずか2ヶ月で会社からの給料を超えたノウハウを伝えるメルマガを発行しています。

今だけAmazonランキング1位獲得、価格1000円の本が特典として、もれなくもらえます。

タダで見れるので、お気軽にご登録下さい。

メルマガ登録はこちら。極秘の超高利益せどりノウハウ本のプレゼント付き

Amazonランキング1位本を今だけ無料プレゼント!

当ブログに始めて訪れた方にオススメ記事

運営者プロフィール

名前:ちゃんこま(※実績)

経歴: 実家で営んでいる美容院が経営悪化により倒産し、父親が自己破産。大学生だった当時、学費が払えず大学を中退し、家族4人どん底生活へ。中退した後、あえなく就職し、工場勤務や営業など様々な労働地獄の波に呑まれる。

ブラック企業の会社員として、12時間以上働きながら始めた副業が、開始2ヶ月で23万円稼ぎだしサラリーマンの給料を超える。さらに4ヶ月目には月収30万円、その後も月収63万円と減ることはなく、サラリーマン時の約4倍の収入を得る。

これまでの経緯やノウハウを電子書籍化した結果、大手電子書籍掲載サイトにて、新着ランキングトップ10位入りの常連と化し、最高位2位を受賞。更に2017年4月にはAmazonに電子書籍を出版し、アマゾンランキング1位を2部門で受賞。見事2冠を達成し大きな反響を得る。

現在は独立しオウンドメディア運営、情報ビジネス、webマーケティング関連など様々な事業を展開。節税の為に法人化するか現在検討中。

会社に雇われなくとも,自由に生きて行ける」をモットーに、誰にも雇われない人生を送る。更に今後活躍が期待される注目株。

⇨詳しいプロフィールはこちら

シェアする

フォローする