▶ え!?なにこれ超簡単!!WordPressの始め方

WordPressのヘッダー完全攻略!ヘッダーまわりの設定手順、ヘッダー画像・ロゴ画像の作成方法も解説

WordPressのヘッダーについて徹底解説します。

ヘッダーとはWebサイトの最上部に表示される、ロゴ画像・ヘッダー画像・キャッチコピー・グローバルメニューなどが表示される部分のこと。

ヘッダーはWordPressへの訪問者がかならず目にするものなので、ブログやアフィリエイトサイトの印象を大き左右し、

結果的に、アクセスや収益にも影響をあたえるとても重要な要素です。

この記事ではヘッダーのメリット・重要性などを解説するとともに、

WordPressのヘッダーを設定する方法ロゴ画像やヘッダー画像などのヘッダーまわりの設定手順について、

WordPress初心者にもわかりやすいよう、簡単に優しく説明します。

目次

SEOに強くて、お洒落で、記事制作スピードも速いテーマ!
ブログ部でも使っている超おすすめテーマ「SWELL」はこちら!

「ヘッダー」でアクセス・収益が変わる!

WordPressヘッダー01_ヘッダーとはどの部分かを図解

「ヘッダー」とは、上記図のようにそのページの一番上にある部分のことです。

一般的にヘッダーには次のような要素が含まれます。

  • ロゴ(サイト名)
  • キャッチコピー
  • ヘッダー画像
  • グローバルメニュー
  • お知らせ欄 ……などなど

ブログやアフィリエイトサイトのようなWebサイトにとって、ヘッダーはとても重要な要素。

特に「ロゴ画像」と「ヘッダー画像」は、そのなかでもさらに重要です。

実は「ヘッダー」の良し悪し次第で、Webサイトのアクセス数や収益が左右されてしまうこともあるんですよ!

よめちゃん

え!? なんでヘッダーでアクセスや収益が変わるの?

サンツォ

それを今から説明するね。

Webサイトの見た目を決めるのは「ヘッダー」!

Webサイトの見た目にもっとも影響をあたえるのは「ヘッダー」です。

当たり前ですよね。だってページが表示されたら一番上にあるわけですから。

あなたのサイトに訪れた読者(ユーザー)は必ず一番最初にヘッダーを見ることになりますし、

どのページにいっても(ほとんどのサイトの場合)共通のヘッダーが表示されているので、ユーザーの目に触れる回数ももっとも多い箇所になります。

Webサイトは「見た目」が9割!

人は見た目が9割」なんて言葉を聞いたことありませんか?

これは(特に初対面の場合)その人のイメージは見た目で9割がた決まってしまう、

第一印象(ファースト・インプレッション)で人間の評価がほぼ決まってしまうという意味の言葉です。

これはなにも人間の見た目だけに限りません。Webサイトでも一緒です。

稚拙(幼稚でヘタクソなこと)な見た目のWebサイトでは、そこに書かれた情報の内容までもが信用できないと感じてしまいますよね……。

センスのない、ダサいデザインのWebサイトでは、なんとなく商品を買うのを躊躇してしまうと思います。

つまりヘッダーの見た目次第でリピートされるかどうかが決まるし、

広告のクリックや商品の売れ行きにも影響をあたえるということなのですね。

まずはWordPressのヘッダー画像を用意しよう!

写真画像がたくさんある

という感じでめちゃくちゃ重要な「ヘッダー」ですが、

WordPressにヘッダーを設定するためには、いくつか用意しておくものがあります。

ヘッダーにはどんな画像を用意するべき?

WordPressにヘッダーに必要な画像は次の2点です。

  • ロゴ画像
  • ヘッダー画像

このどちらにも共通するポイントとしては「そのサイトの内容を表わす画像であること」「ターゲットにあわせた画像であること」です。

たとえば「おうちカフェ」をテーマにしたブログであれば、おしゃれなインテリアのお部屋にあるコーヒーやスイーツのヘッダー画像を使うべきですよね。

たとえば「若い女性」がターゲットのアフィリエイトサイトであれば、男性向けのデザインではなく女性向けのロゴ画像やヘッダー画像を用意するべきでしょう。

もし画像がサイトの内容と合っていなかったら、読者は違和感を覚え、離脱してしまうかもしれません。

また、画像の「デザイン性」「おしゃれさ」にも気を配りたいですよね。

ダサくてセンスを感じられない画像では、かえって逆効果になってしまいます。

ヘッダーの画像を用意する方法とは?

ヘッダー画像やロゴ画像を用意するには下記のような方法があります。

ロゴ画像を用意する方法

  • Illustratorを使って自分で作成する
  • Canvaを使って自分で作成する
  • ロゴジェネレーターを使って自分で作成する
  • ココナラなどでデザイナーさんに発注する

グラフィックデザインのスキルがある人であれば、Illustratorなどを使って自分でデザインをすればいいと思います。

WordPressヘッダー02_Canvaでロゴ制作

デザインの経験がない人でも、上記の「Canva」を使えば簡単におしゃれなロゴを作ることができます。

WordPressヘッダー03_LOGASTERでロゴ制作

また、「ロゴジェネレーター」を使って、ロゴを生成するという方法もあります。

ロゴジェネレーターには、「Logaster」「Logo Maker」「online logo maker」「STORES.JP LOGO MAKER」「LOGO FACTORY」…など、さまざまなサービスがあります。

ロゴジェネレーターは無料で簡単にロゴが作れるんですが…

上記画像のように、正直あんまりおしゃれなものができないのでおすすめはしません。

WordPressヘッダー04_ココナラでロゴ制作

プロのデザイナーさんに作成をお願いしたいという場合はスキルマーケットの「ココナラ 」でデザイナーさんを探すのがおすすめです。

ほかにも「クラウドワークス 」「ランサーズ 」などで発注してもいいかもですね。

ヘッダー画像を用意する方法

  • 自分で撮影した写真を使う
  • 素材サイトにある写真を使う
  • Canvaを使って自分で画像を作成・加工する
  • ココナラなどでデザイナーさんに発注する

写真を加工しないで使うのであれば、自分で撮影したり、素材サイトにある写真を使用すればいいと思います。

WordPressヘッダー05_Pixabayで画像素材を入手

素材サイトには、僕も使っている「Shutterstok」や「Adobe Stock」、他にも「PIXTA」「Pixabay」「写真AC」…など、さまざまなサービスがあります。

素材サイトには有料素材と無料素材がありますが、他人と被らないヘッダー画像にするという意味でも、有料素材を使うことをおすすめします。

WordPressヘッダー06_Canvaでヘッダー画像を作成

また、ロゴと同様に 「Canva」 のテンプレートを使えばデザイン未経験者でもお洒落なヘッダー画像を作ることができます。

WordPressヘッダー07_ココナラでヘッダー画像を作成依頼

自分のセンスに自身がない人は、スキルマーケット 「ココナラ 」 でプロのデザイナーさんに発注してしまいましょう。

WordPressのヘッダー画像を設定する方法

Webサイトのデザイン、レイアウト

では、ここからは実際にWordPressのヘッダー(ロゴ画像・ヘッダー画像・メニュー・キャッチコピーなど)の設定方法について解説します。

ヘッダーの設定方法は、WordPressテーマによって若干異なりますが、今回は以下の2つのテーマを例に説明します。

  1. Cocoonのヘッダー設定
  2. SWELLのヘッダー設定

※どのテーマもだいたい同じような設定方法でいけると思いますが、もしこの記事で紹介している方法でヘッダーを設定できない場合は、お手数ですがご利用中のテーマの公式ページをご確認いただくか、運営側に問い合わせしてみてください。

Cocoonのヘッダーを設定

まずはCocoonのヘッダーまわりを設定する方法です。

WordPressヘッダー08_Cocoonのヘッダー設定_管理画面からヘッダー設定画面へアクセス

WordPressのダッシュボード(管理画面)から、「外観」→「ヘッダー」へと進みます。

WordPressヘッダー09_Cocoonのヘッダー設定_サイト基本情報を編集

するとカスタマイズ画面が開くので、「サイト基本情報」を開いてみましょう。

WordPressヘッダー10_Cocoonのヘッダー設定_サイトタイトルやキャッチフレーズを設定

この画面では、「サイトタイトル」「キャッチフレーズ」を設定できます。

変更したい場合はここを上書きして、左上の「公開」ボタンをクリックしてください。

ちなみに「サイトアイコン」(ファビコン)とは、PCのブラウザのタブに表示される小さなアイコンのことです。

WordPressヘッダー11_Cocoonのヘッダー設定_カスタマイザー画面に戻る

左上の「<」マークをクリックして1つ前のメニュー画面に戻ります。

WordPressヘッダー12_Cocoonのヘッダー設定_メニュー設定を開く

次は「メニュー」を開いてみましょう。

WordPressヘッダー13_Cocoonのヘッダー設定_メニュー設定からグローバルメニュー設定を開く

「グローバルメニュー」を選択してください。

WordPressヘッダー14_Cocoonのヘッダー設定_グローバルメニューで設定した内容はヘッダーにあるメニューに反映される

グローバルメニューで設定した内容は、ヘッダーにあるメニューに反映されるようになっています。(※デフォルトの場合)

変更したら左上の「公開」ボタンをクリックしてください。

WordPressヘッダー15_Cocoonのヘッダー設定_「×」マークをクリックしてヘッダー設定画面を閉じる

左上の「×」マークをクリックして、ヘッダー設定画面を閉じます。

※テーマによっては「ヘッダー設定」の中でロゴやヘッダー画像を設定できるものがあります。その場合は引き続き「ヘッダー設定」で作業してください。

WordPressヘッダー16_Cocoonのヘッダー設定_Cocoon設定からヘッダーの順に進む

WordPressのダッシュボードに戻るので、今度は「Cocoon設定」→「ヘッダー」の順に進みます。

するとCocoon独自のヘッダー設定画面が開きます。

※Cocoon以外のテーマを使っている場合も、テーマ独自の設定画面があることが多いので探してみてください。

WordPressヘッダー17_Cocoonのヘッダー設定_ヘッダーのレイアウトやロゴ画像などを設定する

❶ヘッダーレイアウト:
ヘッダーを構成するそれぞれの要素のレイアウトパターンを、いくつかの候補の中から選択することができます。

❷ヘッダーの固定:
ヘッダーがページ丈夫に固定され、スクロールしても追従してきます。

❸高さ ❹高さ(モバイル):
ヘッダーの高さを調整することができます。

❺ヘッダーロゴ:
ロゴ画像を設定したい場合はここ。

選択ボタンをクリックするとメディアライブラリから画像を選択できるようになります。新たにロゴ画像をアップロードすることも可能です。

❻ヘッダーロゴサイズ:
ロゴ画像のサイズを指定することができます。

❼キャッチフレーズの配置:
キャッチフレーズをヘッダー内の上・下に表示するか、またはそもそも表示をしないかを選ぶことができます。

WordPressヘッダー18_Cocoonのヘッダー設定_ヘッダー背景画像などを設定する

❽ヘッダー背景画像:
ヘッダー画像はここから設定できます(Cocoonの場合はロゴやキャッチフレーズの後ろに背景画像として表示されます)。

選択ボタンをクリックするとメディアライブラリから画像を選択できるようになります。新たにヘッダー画像をアップロードすることも可能です。

❾以下:
ここから下は、ヘッダー全体の色や文字色、ロゴ表示部分の背景色や文字色などを設定できる項目です。お好みで調整してください。

WordPressヘッダー19_Cocoonのヘッダー設定_すべての設定が完了したら画面の上・下にある「変更をまとめて保存」ボタンをクリック

すべての設定が完了したら、画面の上・下にある「変更をまとめて保存」ボタンをクリックして完了してください。

WordPressヘッダー20_Cocoonのヘッダー設定が完了した見本

真っ白でシンプルすぎた元のヘッダーから、写真とロゴ入りの豪華なヘッダーに変更することができました。

いろいろとレイアウトや使う写真を試してみて、お好みのデザインに仕上げていきましょう!

SWELLのヘッダーを設定

次にSWELLのヘッダーまわりを設定する方法です。

WordPressヘッダー21_SWELLのヘッダー設定_外観からカスタマイズへと進む

WordPressのダッシュボード(管理画面)から、「外観」→「カスタマイズ」へと進みます。

WordPressヘッダー22_SWELLのヘッダー設定_カスタマイザーのメニューが開く

するとカスタマイザーのメニューが開きます。

WordPressヘッダー23_SWELLのヘッダー設定_サイトタイトル・キャッチフレーズ・サイトアイコン(ファビコン)の設定

「WordPress設定」→「サイト基本情報」に進むと、サイトタイトルキャッチフレーズ・サイトアイコン(ファビコン)の設定ができます。

WordPressヘッダー24_SWELLのヘッダー設定_ヘッダーの背景色や文字色、ロゴ画像、ヘッダーまわりのレイアウトを設定

いったんカスタマイザーのメニューに戻り、今度は「ヘッダー」を選択します。

ここではヘッダーの背景色や文字色ロゴ画像ヘッダーまわりのレイアウトヘッダーの追従……などなど

ヘッダーまわりのさまざまな設定がおこなえます。

WordPressヘッダー25_SWELLのヘッダー設定_メインビジュアル設定でヘッダー画像まわりを設定

いったんカスタマイザーのメニューに戻り、今度は「トップページ」→「メインビジュアル」の順に進みます。

ここではヘッダー画像を設定することができます。

SWELLでは複数の画像をスライドでアニメーション表示させたり、動画を表示させたりもできます。

ヘッダーに複数の画像をスライド表示させるプラグイン

前述のとおり、テーマ「SWELL」ではデフォルト(初期機能)でヘッダーに複数の画像をスライド表示させる機能が備わっています。

もし今利用中のテーマにスライド表示の機能が無い場合でも、「Meta Sliderというプラグインを使えばスライド表示を実装することが可能です。

WordPressヘッダー26_プラグインMeta Slider

Meta Sliderにはスライドのエフェクト効果もいくつか用意されており、スライド時間の調整やナビゲーションの有り無しなども指定することができます。

画像を選んで各種表示設定をおこなうとショートコードが作成されるので、このショートコードをコピペするだけでヘッダー画像のスライド表示を実装することができます。

※ヘッダーにショートコードを貼り付ける方法は、テーマによって異なります。これはそれぞれ調べていただく必要があります。なかにはPHPファイルを編集する必要があるものもあるので注意しましょう。

WordPressのヘッダー設定 まとめ

パソコンデスク

WordPressのヘッダーは、サイトの印象を大きく左右するとても重要な要素です。

ヘッダーの印象が良いとサイトの信頼感・安心感が向上し、リピート率や滞在時間の改善につながります。

結果的に、アクセス増加や収益増加などのメリットが生まれるでしょう。

ヘッダーのなかでも特に重要なのが、ロゴ画像ヘッダー画像などのビジュアル要素です。

ビジュアル要素はテキスト要素よりも素早くユーザーの脳に情報を伝達し、記憶にも残りやすくなります。

写真の選択や画像のデザインには十分な時間をかけ、おしゃれで洗練された画像を設定してください。

ヘッダー画像を設定する際は、テーマごと・設定箇所ごとの推奨サイズを事前に確認するようにしましょう。

また、PCとスマホでは見え方が異なる可能性がありますので、かならずプレビューで確認しつつ、どのデバイスでも最適な表示ができるように注意してください。

WordPressの画像については、【WordPressの画像】初心者向けの挿入方法や応用設定、サイト収益&集客を改善するコツまで!の記事でもくわしく解説しているので、ぜひ参考にしてみてください。

収益&アクセスを激増させるツール紹介

ブログ&アフィリエイトの収益SEO集客アクセス流入を改善させる、

筆者おすすめのツールを紹介します。

SEOに強い記事を作れるツール!

エクセル、事前準備シート

収益がなかなか発生しない…」
検索順位が上がらず、アクセスも少ない…」

このようなお悩みの原因の99%は、記事の書き方がダメだから。

そしてその記事の品質は、記事を書き始める前の調査・準備の段階でほぼすべてが決まってしまいます。

そんなあなたにおすすめのツールが『 事前準備シート』。

事前準備シートは、下記のような記事作成に必要なあらゆる要素を1枚のエクセルシートにまとめたツールです。

  • キーワード調査
  • 検索結果ページの調査
  • 競合サイトの調査
  • ペルソナ(中心的ターゲット像)の設定
  • 検索意図の調査
  • 仮タイトルの候補案を作成
  • 記事構成(見出し構成)を作成

これらの事前調査をしておくことで記事の質は格段に向上し、

アクセスや収益を上げやすい記事、検索エンジンに評価されやすい記事を作ることができます。

ブログで累計1億円の確定収益を上げた筆者がふだんから利用している自作ツールです。

長年にわたってカスタムを続けた自信作。一度購入すればずっと使うことができます。

下記から1,500円で購入できますので、ぜひご利用ください。

「売れる記事テンプレート」が収益UP!

ブログ記事を書いている、ノートパソコンで作業中

ブログやアフィリエイトで商品を売るためには、

売れるための話の進め方・記事の書き方があります。

トップ営業マンが使う「セールストーク」のように、

ブログやアフィリエイトにも「セールスライティング」が存在するのです。

私サンツォがふだんからよく利用している5つの記事テンプレートをnoteにまとめましたので、

ぜひ下記からご確認ください。

お悩み相談&コンサルティング実施中!

マーケティング、分析03
  • ブログやアフィでなかなか結果が出ない
  • このままでいいのか心配になった
  • 記事の書き方はこれでいいのかな
  • 分野やサイト設計で迷っている

…などで不安を感じたり、悩んでいる方は、ぜひ私サンツォにご相談ください。

チャットやオンラインMTGにて、お悩み相談コンサルティングを受けつけています。

有料にはなりますが、悩んで立ち止まっていたり、

間違った方法を続けていても時間と手間のムダになりますので、ぜひ一度ご相談ください。

以下からお申し込みいただけます。

超高速&格安レンタルサーバーが限定500円OFF!

国内最速!超高性能&格安レンタルサーバーの「ConoHa WING」。

今ならキャンペーン中につき月額640円~で利用することができます。しかも初期費用は無料

しかも当「ブログ部」なら、さらに500円OFFになる特典付き!くわしくは下記の記事をご参照ください。

WordPressのカスタム・引越し・問題解決なら!

もしWordPressに関することで困ったことがあったら「サイト引越し屋さん」に相談しよう

WordPressからWordPressへの引越し、ドメイン移管、テーマ変更。無料ブログからWordPressへの引越し。

WordPressのカスタムやサイト高速化、セキュリティ対策など、あらゆる問題・お悩みを解決してくれるサービスです!

サンツォ

僕もいつもお世話になっているよ!
相談は無料なので、まずは問い合わせしてみよう!

\ WordPressで困ったことがあったら! /

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる