いっぷくブログのヘッダーエリアを自分好みに変えてみるよ！
記事の一番上の部分です。
デザイン力があれば色々施したいのですが、センスもアイデアもあまりないので
シンプルな感じにしています。
もっとかっこいいデザインにしたいなぁと思ったら、例えばココナラで得意な方に作ってもらうのもいいかもしれませんね(*^^*)
ちなみに私は「canva」でロゴ作成し画像を貼り付けました。
それでは、一つずつ設定していきましょう。
ヘッダー設定
ステップ１
ワードプレスのダッシュボードの外観からカスタマイズをクリックします。
次にこちら
お次はこちらです。
ステップ２
では一つずつ設定していきます
まず■ヘッダーのレイアウト選択からみていきましょう
選択肢は２つあります。
シンプル（default）を選択するとこんな感じ↓
ダイナミックを選択するとこうなります↓
わたしは「いっぷくブログ」のロゴが真ん中にあるといいなぁと思い、ダイナミックを選択しました。
それぞれのブログの画像に合わせて好みでいい方を選んでみてください。
ステップ３
次に■ヘッダーを固定表示するか選択をみてみましょう
これはヘッダーを常に表示させた状態に固定するのか、しないのかという選択になります。
固定表示させた場合、記事を読み進めて、下にスクロールしてもヘッダーは常に上部に表示されます。
固定表示しない（default）を選択すると、下にスクロールするとともにヘッダーも見えなくなります。
わたしは以前は固定表示にしていたのですが、
ヘッダーが常に表示されることによって
画面の上部1/４がヘッダーに占領されてしまい
記事や画像が見えなくて損してますよ！と、アドバイスをいただき
固定表示しない（default）選択に変更しました。
固定表示すると結構スペースとっちゃって肝心の記事が見えずらくなります。
記事が読み辛くなっては元も子もないので、、、。
ステップ３
次に■ヘッダーのテキスタカラーを選択と■ヘッダーの背景色を指定を同時にみていきましょう
この部分を変更してみます。
テストとして適当に変更してみます。
するとこうなります↓
ここはロゴマークのデザインとの兼ね合いもあるので自由に楽しんでくださいね！
ステップ４
次に■ヘッダーエリアの区切り装飾を選択というところをみていきましょう
区切り装飾とはどこのことかというと、
ヘッダーと記事の部分の境界線のところ
選択肢は３つ
ぶっちゃけ、どれにしてもほとんど違いがわかりません。
わたしはボーダーにしていますが、正直どれでもいいかなぁと思います。
グローバルメニュー設定
グローバルメニューとは
赤い線を引いた部分がこのブログのグローバルメニューです。
当ブログは雑記なのでどんな内容の記事があるのかパッと見てわかるよう、
カテゴリーを表示しています。
カテゴリー以外に
- ホーム
- お問い合わせ
- プライバシーポリシー
- サイトマップ
- プロフィール
などを表示させるブログもたくさんあります。
ユーザーがサイト内を閲覧しやすくなったり、目的のページに誘導できたり
なにげに大事なところなので見やすくなるように設置していきましょう！
ここでは当ブログが設定しているカテゴリーを表示する方法を解説していきます。
ステップ１
ワードプレス編集画面から
外観→カスタマイズをクリック
次に、共通エリア設定【THE】をクリックし
ヘッダーエリア設定をクリックして準備完了！
ステップ２
■グローバルメニューを表示するか選択という項目で選択肢が４つあるので
デフォルトのPC/スマホで表示する(default)を選択
そのあと右上部の公開をクリックしてください。
続いて実際に表示させる内容を設定していきます。
ステップ３
外観→カスタマイズをクリック
次に少し下の方にあるメニューをクリックします。
次にメニューを新規作成をクリック
次の画面が出たらメニュー名を記入します。
自分がわかりやすい名前で大丈夫です。
わたしはグローバルメニューとしておきました。
次に、このメニューをどこに表示するのか設定していきます。
ヘッダーエリアにチェックを入れて次をクリックします。
ステップ４
次に項目を追加していきます。
＋項目を追加をクリックすると、
次のような画面になります。
カテゴリーを追加するので▼をクリックします。
すると、
登録してあるカテゴリーが一覧ででてくるので、項目を一つずつクリックします。
そうすると、
これで、グローバルメニューの設定が完了しました。
ステップ５
次にグローバルメニューを階層化する方法を解説します。
階層化とは、一つの項目をマンションのように何層かにすることです。
このブログでいうとこんな感じ↓
例えるなら、
副業が親でその中にTHE THORという子のカテゴリーがあるっていうイメージです。
ゆくゆくは、子のカテゴリーの部分は増やしていく予定です。
ではやってみますね。
先ほどステップ４で完成した画面にもどりますよ。
副業が【親】でTHE THORが【子】にあたるので【親】である副業を上にします。
やり方は簡単で、マウスで副業をドラッグ＆ドロップするだけです。
次に【子】の部分にあたるTHE THORを階層化していきます。
これもやり方は簡単で、
THE THORをマウスでドロップ＆ドラッグします。
THE THORをマウスで掴んで右にちょっとずらしてみてね。
設定が終わったら忘れずに公開をクリックしてくださいね！
サブメニュー設定
次にサブメニュー設定の解説をします。
どこの部分かというと、
ちなみにこのブログには何も設定してません。
イメージを持っていただくためにテスト設定してみました！
できあがったのがこちら、
それでは設定していきましょう。
ステップ１
ワードプレス編集画面から
外観→カスタマイズをクリック
次に、共通エリア設定【THE】をクリックし
ヘッダーエリア設定をクリックします。
ステップ２
サブメニュー設定の項目に任意のテキストとリンク先のURLを入力
今回は、注目ボタンのテキストは『テスト』
リンク先URLはこのブログのURLを入れてみました。
メニューパネルにはこのように表示されます。
注目ボタンの使い方がいまいちピンとこないなぁ…
例えば、何か商品を売るサイトだとして、
商品紹介のページがいくつかあり、
でもすぐに購入してもらえるように、ヘッダーに
『購入はこちら』という注目ボタンにそのページのリンクを貼っておけば
お客様が迷わずにすみますよね(*^^*)
他にもアイデアしだいで色々活用できそうです。
あっ！設定が済んだら、公開ボタンを忘れずにクリックしてくださいね！
サーチパネルの設定
次にサーチパネルの設定について解説します。
サーチパネルとは画面のはしっこにある虫メガネの形をしたアイコンのことです。
このブログではここ↓
それでは設定していきます。
ステップ１
ワードプレス編集画面から
外観→カスタマイズをクリック
次に、共通エリア設定【THE】をクリックし
ヘッダーエリア設定をクリックします。
ステップ２
サーチパネルの設定の項目は２つあります。
このブログでは2つともデフォルトにしています。
表示するかどうかの選択は４通り
迷ったらデフォルトでいいと思います。
■サーチパネル内の検索機能を選択では
複数条件検索(default)とキーワード検索の2択になります。
複数条件検索(default)を選択
キーワード検索を選択
ダイナミック
シンプル
メニューパネルの設定
次にメニューパネルの設定をやっていきます。
メニューパネルとは、
3本の横線が目印です。
ここをクリックすると、
今はまだ未設定なので真っ白です。
ここにカテゴリーを表示していきます。
ステップ１
まず、外観からウィジェットをクリックします。
そうすると、この画面になります。
この画面を下へズーッとスクロールします。
すると、
メニューパネルをクリックしたあと、
ウィジェット追加をクリックします。
ステップ３
すると、
画面を少し上に戻り、右サイドをみると下記のような画面になります。
タイトルをカテゴリーと入力し以下をお好みに設定して最後に保存をクリックしましょう。