最新記事を久々に書きました
最新記事を久々に書きました
副業アフィリエイトで給料以上稼げるようになった4つのコツを暴露します(2017年最新版)
副業アフィリエイターがアフィリエイトでサラリーマン収入以上を稼ぐ秘密を、全て暴露します。 副業アフィリエイトで...

2.2 子テーマを編集しヘッダーとグローバルナビを設定する方法

本記事では,インストールしたSimplicity2の子テーマを編集していき,サイトのヘッダー(画面上のタイトル部分)とグローバルナビ(画面上のメニュー部分)を設定していく方法について説明します.上の画像の変更前の状態から下側の変更後の状態に編集していきます.

画面のヘッダー(上の部分)を整える方法

① まずサイトのタイトルとキャッチコピーを整えます.キャッチコピーとは現在の自分のサイトで”Just another WordPress site”と表示されている部分で,ここには自分のサイトの説明を書きます.WordPress管理画面から左部メニューの「外観→カスタマイズ」を選びます.

161027_head2

②「サイト基本情報」を選び,サイトのタイトルとキャッチコピーを入力します.最上部の「保存して公開」をクリックすると入力された情報がサイトに反映されます.

161027_head3

③ キャッチコピーの文字をもっと黒くしたい場合は,「外観→カスタマイズ」から「色」を選択し,「サイト概要色」の色を濃い色にします.本サイトの場合,#555555にしています.

161027_head4

④ 次にタイトル部分にロゴ画像を入れる方法を説明します.本サイトの場合タイトル文字が書かれているのではなく,PCの絵とタイトルが入った1枚の画像を用意し,それをタイトルロゴ画像として貼り付けています.この方法のほうが自由度が高いのでお勧めです.

⑤ まずタイトルと絵の入ったロゴ画像を作成します.画像は絵心のある人は自分で作成すれば良いですが,普通の人にはCC0画像と呼ばれる自由に使用できる画像を集めたサイトから良いものを探すのがお勧めです.例えば,PixabayやVisual Huntなどが有名で私も使用しています.私は気に入った画像を探し,パワーポイントに貼り付けてトリミングし,文字を書いて,グループ化し,最後に画像としてpngで保存して使っています.

本サイトの場合以下のようなロゴ画像を作成して使用しています.

titlelogo

⑥ ロゴ画像を作成したら,「外観→カスタマイズ」から「ヘッダー」を選択し,「ロゴ画像」に作成した画像をアップして選択します.そしてその下の「ロゴを画像にする」にチェックを入れます.以上でヘッダーのタイトル部分が作成した画像に代わります.

161027_head5

⑦ これは必須ではありませんが,ヘッダーのロゴ部分の背景が白や別の色のベタ塗りが嫌な人は模様などにも変更できます. ヘッダー背景画像を作成し,「外観→カスタマイズ」から「ヘッダー」を選択し,「ヘッダー外側背景画像」に作成した画像をアップして選択します.

以上でヘッダー部分の編集は終了です.サイトを見てみると少し雰囲気が出てきたんじゃないでしょうか?

ヘッダー画像を作成する部分はこり出すと時間がいくらあっても足りません.

まずは暫定的な感じで作成して,後々にどんどんよい画像に変更していくことをお勧めします.

グローバルナビ(上のメニュー部分)を整える方法

本サイトで画面上部に,ホーム,1. サイト立ち上げ,・・・と並んでいるメニュー部分があります.ここをグローバルナビやグローバルメニューと呼びます.この部分を整える方法を説明します.

① まずメニュー項目を決めます.メニュー項目のことをカテゴリーと呼びます.カテゴリーを決める作業は悩ましいので,もう少し考えてから決めたい人はとりあえず項目決めはとばしていただいてもかまいません.

② まずWordPress管理画面から左部メニューの「投稿→カテゴリー」で,作りたい項目を作成します.名前には本サイトであれば”1. サイト立ち上げ”などが入力されています.スラッグとはそのカテゴリーの記事のURLに使用する文字列です.とある記事のURLは「サイトURL/スラッグ/記事URL」に設定されます.カテゴリー名が分かるような英数字を入力しましょう.本サイトでは5つのカテゴリーを作成しています.

161027_head6

③ 次に,「外観→メニュー」を選択します.そして,メニュー名を記入します.グローバルメニューvol1とでも入れておきましょう.そして「外観→メニュー」の画面左で固定ページの「すべて表示」タブをクリックし,「ホーム」を表示させ,チェックを入れて,メニューに追加を押します.同様に一番下のカテゴリーを選んで,すべて表示で先ほど作成した項目を表示させ,全てにチェックを入れてメニューに追加を押します.最後に画面右下にあるテーマ位置で「ヘッダーナビ」にチェックを入れます.メニューに間違えて追加した項目を消すには,項目の右端にある▼をクリックして,削除を選びます.

161027_head7

④ 次に,WordPress管理画面から左部メニューの「外観→カスタマイズ」を選択し,「ヘッダー」から「グローバルナビを横幅いっぱいにする 」にチェックを入れます.

161027_head8

⑤その後「外観→カスタマイズ」から,「色」を選択し,「グローバルナビ色」と「背景の色」を自分の好きな色に設定します.もしグローバルナビの色を濃い色にした場合は,グローバルナビリンク色を白色に設定しておくと見やすいです.このサイトではグローバルナビ色に「#2b2b2b」を設定し,グローバルナビリンク色に「#ffffff」設定しています.

161027_head9

⑥最後にサイトの背景色を設定します.本サイトでは灰色にしています.「外観→カスタマイズ」から,「色」を選択し,「背景色」を自分の好きな色に設定します.このサイトでは「#efefef」を設定しています.

161027_head10

以上で最低限のグローバルナビの設定は終了です.

ですがこのままですと,”あ,このサイトSimplicity2をそのまま使ってるなー”と一目で分かり,ちょっと恥ずかしいです.

注意していろいろなサイトを見て見ると,似たようなグローバルメニューをやたら見かけることに気付きます.

またスマホサイトでの状態もあまり良くありません.

そこで次回は,グローバルナビをさらにかっこよくして,使いやすくする方法について説明します.

2.3 プラグインを用いてグローバルナビを変更する方法とスタイルシート(style.css)の編集方法
本記事では,グローバルナビのデザインを変更する方法を説明します.上記のアイキャッチ画像の上の状態から下の状態へ変更します.今回グロー...

スポンサーリンク