【WordPress超初心者】ヘッダーの設定方法!背景画像とロゴ制作つき

WordPress初心者講座

こんにちは!

このブログを作って最初のほうに、スキンによってヘッダーとかフッターとかをカスタムする方法をお話したのですが…

スキンて本当に便利で、すぐにオシャレにできるので初心者にはありがたい機能なのですが、そろそろ変えたいなーと思いはじめ、ロゴも変えてみたいなーと思いはじめ…

やってみました。
難しくは…ないです、はい。
わたしができるくらいだから。

それではやってみよー!

結構長いので、設定からという人はメニューから飛んでくださいね。

スポンサーリンク

ヘッダーに使う画像を作る

では、これから。

この前のアイコンと同じですね。

ご自身で制作できるならそれが一番いいかな、と思います。

まず、それだけで個性でるから他との差別化できるし、被らない。これ大事。
それか、ご自身で撮った写真でもOK!

ま、わたしはできないからフリーサイトから探すんですけどね(笑)
今回はこちらのサイトでお世話になりました。

なので、このサイトを使った方法を軽くご紹介します。

…が、すでに画像は決まっていて、ロゴだけ何とかしたいかたはこちらへどうぞ☺ロゴ部分からよめます。 なんなら画像もロゴも用意できているよーって方はこちらへどうぞ☺設定方法です!

まずはCanvaに登録

すみません、登録制です。

『Canva-pro』という有料ページもあります。
…が、無料でもたくさんあるので、無料で大丈夫です。

Canvaで調べると、最初に有料の『pro』が出てきてそこの登録画面に行ってしまう方もいるかもしれませんが…
そういうときは一回戻って、無料ページの登録ページをクリックしてくださいね。
(このサイトからのリンクからなら無料版に飛ぶと思いますが…念のため)

で、ページを開けるとこんな場面が出てくるので、そこから登録しましょう。

GoogleでもFacebookでもメアドでもお好きなもので登録してください。
画面にしたがってたら簡単に登録できます。

画像を探そう

登録できましたか?

では、実際に作っていきましょう!

サイズを設定する

まずは画像を検索していくのですが…
左側のデザイン作成をクリックして、その中からカスタムデザインを選びます。

そしたら、なんやら縦幅と横幅を聞かれるので、入力します。

この数字なのですが、調べてたら色々な意見があるわけですよ。
『ワードプレス ヘッダー サイズ』って調べたんですけど、どうやらテーマによって推奨サイズが違うと。で、その推奨サイズはダッシュボードのヘッダー設定のところに書いてあると。

よし!と思って探したけど、見つからないorz
どうやらコクーンでは推奨サイズが書かれていないもよう。

いや困るんだけど!!!!!!!!!!

ってことで、さらに検索してみると、どうやら『ベスト幅は1240px』だとの情報が!
この幅だと拡大されても画質が悪くならないらしいです。

もっと勉強したら『いや~この大きさがいいよね』とかなるんでしょうが、何もわからないけど、とりあえず先に進みたい初心者としては、その情報に頼ってみました。

ちなみに、縦幅については、200pxがいいとか300pxとかありましたが、この辺はお好みだそうです。
横幅は意味わからなかったけど、縦幅に関しては、違いがわかりやすいので両方試して気に入ったほうでいいと思いますよ。

ちなみに、このブログのサイズは300pxです。200だとこれより縦が狭くなります。

画像を探す

というわけで、検索窓に『横1240px 縦300px』と入力しまして、『デザイン作成』をクリックします。

するとたくさんのデザインがでてきます。
その中から好きなデザインを探しましょう。

左側のオレンジの○の部分のうえの『テンプレート』で作ると、サイズがぴったりな上にそのままロゴ入力ができて簡単なのですが、ワードプレスの設定として、『ロゴ設定が別にある』んですよね。

これを設定しないと元々のテキストスタイルが出てきてしまうので、オススメしません。

CSSをいじれる方は、そちらでタイトルを消せるようです。
が、今回はハードルが高いのでやりません。

なので、オレンジで○をつけた『写真』をクリックしてそこから選びます。

で、選ぶと、設定した枠のなかに写真がポンッと現れるので、それをオレンジの○の中にある白い□にマウスを合わせて引き伸ばします

このとき、横は、その設定した枠の範囲でOKなんですけど、縦は枠を超えて引き伸ばしてください。

こんな感じ。

これ、引き伸ばすことによって、写真全体が枠に入らないので、大きく引き伸ばしてから使いたい部分を枠に収めていかなきゃいけないからです。

引き伸ばした後、写真の真ん中にカーソルを合わせれば簡単に移動できるので、『これだ!』って位置をみつけてください。

それができたら、右上の↓をクリックしてダウンロードして保存します。

これで画像はOK!

ロゴを作る

お次はロゴを作ります!

このままワードプレスのフォントで良い方は飛ばしてもいいんですけどね、せっかくだからね。
もう少し頑張りました。頑張りましょう。

こちらもそのままCanvaを使って作っていきますよー。

保存が終わったら、まず『ホーム』に戻って貰って、さっきと同じように、『デザイン作成』から始めます。サイズも同じ『横1240 縦300』でいきましょう。

そしたら、左側の『テキスト』を選びます。

で、たくさんある中から、すきな書式を選んで入力してください。

書式を選んだら、その見本のままの文字が出てくるので、クリックして消しまして―
で、ご自身のブログ名とあればキャッチフレーズもいれます。

大きさも好きに決めてもらって、できたら保存します。

これでOK!

ロゴの透視化

で、ですね。このさっき作ったロゴ、これ、このまま張り付けると、後ろの白い背景までくっついてきちゃうので…

この背景を透明にしていきます!
そのために、このサイトを使っていきます。

まずは、ここにさっき作ったロゴのファイルをアップします。

そしたら、下にある『透明化』をクリックして、そのあと、ロゴの白い部分をどこでもいいのでクリックします。

そしたら、白い部分がこんな風に、白とうすい灰色の格子柄になるので、そうなったらOK!
無事透明化できでます!

これで、すべて準備完了! あとは設定していくだけです!

設定をしよう!

ということで、設定です。

ワードプレスのダッシュボードから、おなじみの左サイドバーから今回は『Cocoon設定』をクリックします。

で、たくさんあるタブの中から『ヘッダー』を選ぶわけですが、

その前に

スキンを解除しましょう。これしないと、設定できないのでね。

これね。『スキン』選んで、スキン一覧から『なし』を選択してから、上のタブで『ヘッダー』を選びます。

で、ひとつずつ設定していきます。

ヘッダーレイアウト

まずは『ヘッダーレイアウト』ですね。

これの中からお好きなものを選びます。

参考までに、すべて試してみました~
見にくいのですが、こちらの4つはメニューの位置とその幅の違いですね。

で、こちらは、もはやメニューがメイン!
で、そのメニューの幅と右寄せかセンターかの違いです。

ヘッダー固定

これはもう書いてある通りなんですけど、どんだけ下に読み進めようが、画面上にはメニューがいるようになる設定です。

上を向けばやつがいる、的な?

すみません、お好みでどうぞ。

ヘッダー高さ・ヘッダー高さ(モバイル)

これは、設定しなければ、そのまま記入しなければ、デフォルトでいいようにしてくれるらしいので、設定してません。

というか、勉強不足!

ヘッダーロゴ・ヘッダーロゴサイズ

やっときました!

頑張って透視化までしたロゴをここに入れます。

で、サイズは作った時と同じ『横1240 縦300』で設定。

キャッチフレーズの配置

キャッチフレーズね。
おそらくデフォルトで入ってると思うのですが…

これがあると、今まで作ってきた画像のなかにキャッチフレーズが『え、なにか?』レベルで居座るので、『表示しない』を選択します。

ヘッダー背景画像

はい、きました(その2)

こちらに満を持して、選んだ画像をアップしましょう。

その下にある『ヘッダー背景画像の固定』は先ほどの『ヘッダーの固定』の背景バージョンです。

どこまでも背景画像が追いかけてきます。お好みで。

ヘッダー全体色・ヘッダー色(ロゴ)

これらは設定しなくて大丈夫です。
というか画像を設定したら無意味かと…

簡単に説明すると、ヘッダー画像を設定せずにロゴのみ設定する場合に使います。
その時、ロゴの背景色どうしようか?って使うのが『ヘッダー全体色』。

で、ロゴ画像を設定せずに、ワードプレスに入ってるフォントで背景画像に入れる場合に使うのが『ヘッダー色(ロゴ部分)』です。

今回は、両方とも設定しているので、スルー。

グローバルメニュー色

こちらはヘッダー画像のすぐ下にはりついているメニューの色です。

ちょっと画像使いまわしですみませんが、このピンクの部分です。
この部分をお好きな色に変えることができますよーってのがこれです。

グローバルメニュー幅

こちらは、このメニュー幅を変えるのですが、デフォルト設定のままです。

デフォルトでトップメニュー幅176、サブメニュー幅240です。
この辺はお好みなので、自分で数字を打ち込んで色々実験して好きな幅を見つけてもいいと思います。

設定を保存

はい、一番大事なことですよ。
今までいろいろやってきた設定をしっかりと保存しましょう!

保存したら、画面上のプレビュー画面で確認できるので、色とかレイアウトとか、色々試して見てくのもいいと思いますよ!

さて、完了!

さぁ、できましたか?

ちなみに、わたしのヘッダーはロゴを透視化せずに、同じ背景動画にロゴを入れて、二重にしてます。

透視化とかわかってなくて、画像にそのままロゴを入れこんじゃったものだから、設定したときに、ワードプレスのデフォルトのロゴと被っちゃいまして。

そんで、次にロゴだけで作ったら白い背景がまんま残ってて、それで打ちのめされてどうしようもなくて二重にしたんです。

その後、透視化というものを知って、やってみたんだけど、個人的にはこっちのが好みだった、という次第です(笑)

長くなりましたが…参考になれば嬉しいです!

コメント

タイトルとURLをコピーしました