【初心者必見!】WordPressヘッダーのカスタマイズ方法!

ブログ

こんにちはこうじです!こうじブログを読んでいただきありがとうございます。

さて、本記事ではブログの顔でもあるヘッダーのカスタマイズ方法について解説していきたいと思います。

ヘッダーをオリジナルのものにすることによってブログに愛着が生まれ、雰囲気も良くなりますよ^^

ヘッダーのカスタマイズについて解説していきますので参考にしてください!

ヘッダーってなに?

ヘッダー(header)は文字の通りサイトのと顔となるものです。

様々なサイトがありますが、どのサイトにもヘッダーがあり目を引きますよね!

ヘッダーをカスタマイズするだけでブログ自体の雰囲気もかなり変わってくるのでみなさんにもぜひ挑戦してほしいです!

↓kojiBlogのヘッダー(現在は未設定です。)

少し工夫するだけで全然雰囲気が変わります(^^♪



ヘッダーのカスタマイズ手順

今回はWordPressの管理画面から簡単にできるカスタマイズを中心に解説していきます!

WordPress管理画面から「Cocoon設定」→「ヘッダー」をクリック!

各カスタマイズ説明

ヘッダーレイアウト(1)

ヘッダーに表示されるロゴの位置とメニューバーの大きさ位置を設定できます!!

例:センターロゴスリムメニュー)ならロゴが真ん中にきて、メニューが細くなります。

ヘッダーの固定(2)

説明にも書かれていますが、ヘッダーがページのスクロールに追従してくる機能です!

ヘッダーロゴ(3)

ヘッダーは画像として読み込むこともできます。自分でロゴを作るか、プロに委託してヘッダーを書いてもらいましょう!”ココナラ”では安いもので1000円からヘッダーを作ることができます^^下の記事で僕がココナラを利用して作ってもらったアイコンについて解説しているのでぜひ読んでみてくださいね!

ブログキャラクターを作ろう!

ヘッダーロゴサイズ(4)

この欄は任意で入力してください。僕の場合1240×240になっていますが、微調整で合わせていいたものなので決して正しい数値とは言えません。なので、みなさんが作業する際は入力しないかプレビューを見ながら微調整してくださいm(__)m

キャッチフレーズの表示(5)

キャッチフレーズはロゴの上または下に表示されるものです。このキャッチフレーズは僕は表示していませんが、うまいこと書ければいいものになるのでぜひ活用していただきたいと思いまし。たとえば、僕のブログの場合だと、、、こんな感じですかね↓”学生ブロガーになってみた”の部分がキャッチフレーズにあたります。

ヘッダーの背景画像(6)

ヘッダーの背景画像を設定します。自分が挿入したい画像があればしてくだい!

ここでポイント!

背景画像は少しぼかすことによってヘッダーロゴが際立ちますよ!ぜひ参考にしてみてくださいね^^

ちなみにこんな感じです



ヘッダー背景色(7)

これはヘッダー背景の色を設定することができます。しかし、この欄を設定してしまうとヘッダーが一色だけになってしまいシンプルなものになります。自分でしかっりとデザインしたい方はロゴを用意して、背景も画像を挿入することをお勧めします!

注意点!

シンプルなものを否定しているのではありません!!自分のサイトを一色で統一し、シンプルなデザインに仕上げたい方はぜひ色を設定してくださいね^^

ヘッダー色(ロゴ部)(8)

ロゴの背景色と文字色を設定することができます。この欄はロゴの画像を使用している方は変更しても反映されません。ヘッダーの背景色を決めて、ロゴを挿入する方向けです。

ここでポイント!

おすすめは背景色を一色に決めて、そこに白文字でロゴを書きましょう。そうすることによってシンプルかつスタイリッシュなヘッダーになりますよ^^

グローバルナビメニュー色(9)

グローバルナビメニューはヘッダーの上または下に表示されるメニューです。そのメニューからホームに戻ったり、お問い合わせフォームにとんだりすることができます。この欄ではそのメニューの色と文字色を設定します。

グローバルナビメニュー幅(10)

グローバルナビメニューの幅を設定できます。ちょうどいい幅になるようにプレビューを見ながら設定してみてください!僕の場合は157になっています。だいたい150前後の数値になると思います!

さいごに

今回の記事はいかがでしたか?もしこの記事に関してわからないことがあればコメントお願いします!SNSもやっておりますのでそちらのDMでも質問受け付けております!!次回の記事もお楽しみに^^

コメント

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