WordPress初心者必見【超シンプルなヘッダーカスタマイズ方法】

最近、ブログ始めたけどコードとかわからなくて、サイトのデザインがデフォルトのままだからちょっといじってみたいなぁ、、、
なかなかサイトのデザインが決まらなくて悩むなぁ、、、

こんな疑問を解決します。

本記事の内容
  • デザイナーがおすすめするサイトのシンプルなデザイン方法
  • ヘッダーをカスタマイズする方法

ブログのデザインを考えるようになるといろんなところいじりたくなりますよね。

今回は【初心者のための超簡単「ヘッダー」設定方法】を解説していきます。

この記事で設定するとこんなデザインのおすすめカードが設定できます↓

この記事では初心者の人やブログのデザインに悩んでいる人にむけて、僕が初心者のときに悩んでいた事を中心に書いていきます。

学生時代に4年間学んだデザインの知見を生かしたサイトデザインを発信していきます。

この表示設定は初心者でも簡単にカスタマイズできるので、ぜひ自分のブログにも取り入れてほしいと思います。

WordPress初心者必見【超シンプルなヘッダーカスタマイズ方法】

このブログでも愛用中のワードプレステーマ【cocoon】におけるヘッダー画像の設定方法を解説していきます。

やはり、ヘッダー画像があったほうが見やすいですね。ユーザーがブログに来たときの離脱率とデザインは相関的に関わり合っているので、離脱率軽減のためにも重要なことですね。

これはプログラミングができない・コードが読めない初心者でも超簡単につけることができるので、その方法を順番に解説します。

ヘッダーとは?

ヘッダーを既に知っている人は次の「流行りのCANVAではなく【squarespace】を活用」からご覧ください。

ヘッダーとは、ブログを開いたときの頭に出てくる画像のことをいいます。

僕のサイトでいうここのところです↓

ヘッダー画像を挿入するときのポイント

ヘッダー画像を挿入するときに、ただ挿入すればいいのではなく、以下のようなポイントを抑えて作成していく必要があります。

ヘッダー画像の効果
  • ぱっと見てキレいか?
  • サイトの内容とあっているか?
  • どんな情報を発信しているのかがすぐわかる
  • サイトの雰囲気が統一されているか?

一つずつ順に解説していきます。

ぱっと見てキレいか?

ヘッダーは最初の印象を与えるためとして重要です。

ここの時点で統一感がなく見るからに下手だと、サイトが大したことないというふうに見られてしまいます。

そんなに凝ったものを作成しなくても、今回紹介する方法をつかえば、簡単かつきれいなヘッダー画像を作成できます。

サイトの内容とあっているか?

たとえばビジネスのことを発信しているのに、ヘッダー画像が料理の画像だったら全くあってないですよね。

このように、自分のテーマと合うようなヘッダー画像の作成を心がけましょう。

どんな情報を発信しているのかがすぐわかる

ヘッダー画像には文字を必ず入れて、このサイトでは何を発信してるのかをはっきりして、そのタイトルやサブテーマを入れるようにしましょう。

サイトの雰囲気が統一されているか?

ヘッダー画像の色やデザインがちゃんとサイト全体の雰囲気と一致しているのかを意識して作成しましょう。

流行りのCANVAではなく【squarespace】を活用

ヘッダー画像を作成する際の便利なツールを紹介します。

squarespace】と【CANVA】です。

squarespace
CANVA

今回はCANVAではなく【squarespace】での作成方法を解説していきます。

CANVAは多くの人が使っており、解説がたくさんされています。
そのため、「みんなと一緒になりたくないな」と思う人にはおすすめな内容となっております。

ヘッダーの作成方法の流れ

ヘッダーの作成方法の流れはたいだいこの3つに分けられます↓

手順
  • 手順1:シンプル背景の作り方
  • 手順2:おしゃれ文字の作り方
  • 手順3:作成画像の設定方法

一つずつ順に解説していきます。

手順1:シンプル背景の作り方

ここではほとんど、画像を選ぶだけになります。
以下がおすすめの画像サイトです↓

おしゃれ画像サイト3選

この中から選んでヘッダー画像を作成するのはいいと思いますが、画像が比較的ごちゃごちゃしているため、統一感を保つのが難しいです。
しかし、ヘッダー画像だけを派手に目立たせたい人にはおすすめです。

シンプルなデザインを目指したい人や洗礼されたデザインにしたい方にはおすすめできません。

シンプルなデザインにしたい人

シンプルにするには、現実的な背景のある画像は基本的にはサイトのトップページに活用しません。

文字】と【色】のみでサイトをきれいにしていきます。

背景画像の作成方法:ヘッダー画像の背景は、一色の塗りつぶしにします。macの場合はKeynotePowerPointを使ってヘッダー画像の背景をオリジナルで作って見てください。
背景画像のサイズは【1240 × 240】のサイズで作成してください。

→この【1240 × 240】のサイズは、モバイル(携帯)で見るときとPCで見るときに崩れないサイズになっているので、なるべくこのサイズに則って作成したほうが見栄えは良くなります。

手順2:おしゃれ文字の作り方(squarespace)

squarespace】を利用して、ロゴを作成します。

まずは、上記のサイトにアクセスします。その後、赤い四角で囲ったところに自分のサイトのコンセプトやタイトルを入力します。(後から変更できます。)

右向きの矢印で次に行きましょう。

次にこの画面に切り替わると思います。

左のブロックにサイト名やキャッチフレーズを入れて、真ん中の赤い四角のプレビューに反映させていきます。

【探す】のところでアイコンを検索します。自分の好きなアイコンを選びます。

たくさんアイコンを入れるとごちゃごちゃになるのでどれか一つにすることをオススメします。

アイコンとキャッチフレーズ・タイトルが入力できたら左下の【ロゴを保存】をクリックします。

保存する際にアカウントの作成が必要です。新しく作成してロゴを保存します。

手順3:作成画像の設定方法

次に【手順1】【手順2】で作成した画像を設定していきます。

まず【Ccoon設定】をクリックしてください↑

次に【ヘッダー】をクリックしてください↑

ここから細かい設定に入っていきます。

①ヘッダーのレイアウトは【センターロゴ(デフォルト)】に設定してください。

②高さ・高さ(モバイル)は【300】が一番いいぐらいの位置になりました。

③へッダーロゴは【手順1】で作成したアイコン文字の画像を選択してください。

ここは手順1で作成したシンプルな背景を設定してください。
手順1で紹介した画像サイトでダウンロードしたものでもいいです。

下記参照↓

おしゃれ画像サイト3選

【ヘッダー色】と【グローバルナビメニュー色】はこの組み合わせで色を設定してください。

サイトのメイン色を自分で一色決めておくと、決めやすいと思います。

【変更をまとめて保存】を忘れずに。

これでヘッダー画像の設定は完了です。

WordPressに関してもっと詳しく知りたい方はこちら↓

WordPressのデザインの知識に関してはこの一冊で十分です。ネットで大雑把にかいてある説明をもっと細かく噛み砕いて解説してくれてます。ネットに詳しくない人には特におすすめな書籍となっています。

たくまのまとめ

いかがでしたか?

画像を多めにして解説してきました。このように画像を使って解説して行くほうがわかりやすいのかなと思います。

ブログのデザインは記事の情報に触れる前に見られる、住宅で言う【玄関】みたいなところです。
玄関が散らかっているところに彼氏彼女を連れてこれますか?

このように考えると、しっかりきれいに整えておきたいところですね。

他にも「グローバルメニューにアイコンを表示する方法」「デザイナーが教える初心者のための超簡単【おすすめカード】設定方法」などいろんなカスタマイズ方法を投稿しています。

興味のある方は以下の記事からどうぞ!

最後まで読んで頂いてありがとうございます。

当ブログではビジネスに関しても多く発信しています。興味のある方は以下の記事からどうぞ!

【2020年8月最新】MUPって入った方がいい?

なぜビジネスで失敗するのか【経営拡大に最低条件の仕組み化を解説】

サラリーマンが起業前に知っておくべき【価格設定】の考え方

カフェではコーヒーを売らない方がいい?ビジネス初心者が戸惑う経営の基礎

お宝物件選びの方がわからん!サラリーマンが戸惑う不動産屋での第一歩

この記事を書いた人

アバター

takuma

【経歴】
●1997年年生まれ、岐阜県出身。たくまと言います。

●高校3年間は成績学内1位。その後、名古屋の名城大学を卒業

●2020年4月に東証一部上場企業に新卒入社し、webデザインとコンテンツ販売で副業をしています。

●webデザイン / コンテンツ販売 / ブログなどで月6桁達成。