Cocoonにグローバルメニューを設置する方法
グローバルメニューとは、以下のようなヘッダー画像の上、または、下にあるメニューをいいます。
グローバルメニューを設置すると以下のようなメリットがあります。
- 内部リンクになる
- 便利
- サイトが引き締まる
この記事では「Cocoonにグローバルメニューを設置する方法」について説明いたします。
グローバルメニューを設置する前の準備作業
今回は、以下の３つの項目ををグローバルメニューに追加します。
①トップページ ⇒ ブログのトップページへのリンク
②運営者情報 ⇒ 運営者情報ページへのリンク
③お問合せ ⇒ お問合せページへのリンク
上記項目をグローバルメニューに追加するための準備作業として
「運営者情報」と「お問合せ」のダミーページを作成します。
今回は、グローバルメニュー設置の説明のため「運営者情報」の記載、および「問い合わせフォーム」の設置の説明は割愛します。
実際にサイトを作成する時には、「運営者情報」の記載、および「問い合わせフォーム」の設置は行って下さい。
「運営者情報」のダミーページの作成
「運営者情報」のダミーページの作成手順を以下に説明します。
(1) ブラウザに以下のURLを入力し「WordPress管理画面」に接続します。
https://あなたのドメイン/wp-admin
(2)「ユーザー名」と「パスワード」を入力し「ログイン」ボタンをクリックします。
(3) サイドバーのメニューから「固定ページ」→「新規作成」をクリックします。
(4) 「新規固定ページを追加」画面が表示されるので、タイトル入力欄に「運営者情報」と入力します。
(5) 右ペイン上部にある「公開」をクリックします。
(6) 「xxxxxxxの内容記事を公開してもよろしいですか？」というポップアップが表示されるので「OK」をクリックします。
(7) 「パーマリンク」が表示されるので「編集」をクリックします。
(8) 「管理者情報」を「kanrisyajoho」に修正し「OK」をクリックします。
(9) パーマリンクが変更されました。パーマリンクURLはメモ帳などにコピーしておいて下さい。
(10) 再度、右ペイン上部にある「公開」をクリックします。
(11) 「xxxxxxxの内容記事を公開してもよろしいですか？」というポップアップが表示されるので「OK」をクリックします。
以上で「管理者情報」のダミーページの作成は完了です。
「お問合せ」のダミーページの作成
続けて、「お問合せ」のダミーページの作成を行います。
(1) 「固定ページを編集」の右にある「新規追加」をクリックします。
(2) 「新規固定ページを追加」画面が表示されるので、タイトル入力欄に「お問合せ」と入力します。
(3) 右ペイン上部にある「公開」をクリックします。
(4)「xxxxxxxの内容記事を公開してもよろしいですか？」というポップアップが表示されるので「OK」をクリックします。
(5) 「パーマリンク」が表示されるので「編集」をクリックします。
(6) 「お問合せ」を「otoiawase」に修正し「OK」をクリックします。
(7) パーマリンクが変更されました。パーマリンクURLはメモ帳などにコピーしておいて下さい。
(8) 再度、右ペイン上部にある「公開」をクリックします。
(9)「xxxxxxxの内容記事を公開してもよろしいですか？」というポップアップが表示されるので「OK」をクリックします。
以上で「お問合せ」のダミーページの作成は完了です。
グローバルメニューの作成
グローバルメニューの設置方法について説明いたします。
(1) サイドバーのメニューから「外観」→「メニュー」をクリックします。
(2) 「メニュー」画面が表示されるので「メニュー構造」の「メニュー名」に任意のメニュー名を入力します。
今回は、グローバルと入力しました。
(3)「メニュー設定」の「メニューの位置」の「ヘッダーメニュー」にチェックを入れます。
(4) 「メニューを作成」をクリックします。
(5) 「左カラムからメニュー項目を追加して下さい。」と表示されます。
(6) 左カラムの「固定ページ」にある「お問合せ」、「管理者情報」にチェックを入れ「メニューに追加」をクリックします。
(7)メニューに「お問合せ」と「管理者情報」が追加されました。
(8) 次に左カラムの「カスタムリンク」をクリックします。
(9) URLに「あなたのブログのトップページURL」をリンク文字列に「トップページ」と入力し「メニューに追加」をクリックします。
(10) メニューに「トップページ」が追加されました。
(11) メニューにの表示順が「お問合せ」、「管理者情報」、「トップページ」になっているので、表示順を「トップページ」、「管理者情報」、「お問合せ」の順番に変更します。メニューをドラッグすれば移動できます。
(12) メニューが「トップページ」、「管理者情報」、「お問合せ」の順になりました。
(13) 画面左下の「メニューを保存」をクリックします。
(14)ブラウザからあなたのブログに「グローバルメニュー」が設置されているか確認してみましょう。
「グローバルメニュー」が設置されました。でもデフォルトは、メニューの色が「白」で文字の色が「黒」です。何か締まりがないですね。
グローバルメニューの色と文字色の設定
メニューの色と文字色を変更する方法を説明します。今回は、メニューを「黒」、文字色を「白」に変更します。
(1) サイドバーのメニューから「Cocoon設定」→「Ｃocoon設定」を選択します。
(2) 「Cocoon設定」画面にて「ヘッダー」タブをクリックします。
(3) 「ヘッダー」タブをに切り替わります。
(4) 下に降りていくと「グローバルナビメニュー色」という設定項目があるので「グローバルナビ色」の「色を選択」をクリックします。
(5) 「グローバル色」の背景色選択画面が表示されるので赤枠の「黒」を選択します。
(6) グローバルナビ色に「黒」が設定されました。
(7) 次に「グローバルナビ文字色」の「色を選択」をクリックします。
(8) 「グローバル文字色」のテキスト色選択画面が表示されるので赤枠の「白」を選択します。
(9) グローバルナビ文字色に「白」が設定されました。
(10) 画面上部にある「変更をまとめて保存」をクリックします。
(11)ブラウザからあなたのブログに「グローバルメニュー」が設置されているか確認してみましょう。
「グローバルナビ色」と「グローバルナビ文字色」が変更されました。
グローバルメニューにアイコンを設置する
以下のようにグローバルメニューにアイコンが付くとメニューがカッコいくなります。
ここでは、グローバルメニューにアイコンを付ける方法について説明します。
(1) サイドバーのメニューから「外観」→「メニュー」をクリックします。
(2) メニュー画面が表示されるので、そのままでいて下さい。
(3) アイコンは、FontAwesome という無料のサービスから入手します。以下のリンクをクリックしてFontAwesomeに接続して下さい。
(3) FontAwesome に接続すると「アイコン検索画面」が表示されます。最初に「トップページ」のアイコンを設定するので「home」と入力します。
(4) 以下のような「home」アイコンが沢山表示されるのでお好きなアイコンをクリックして下さい。
今回は、赤枠のアイコンをクリックします。
(5) アイコン画面が表示されるので赤枠のHTMLをコピーします。
(6) 「トップページ」右の「▼」をクリックします。
(7) トップページの設定画面が表示されるので、「トップページ」の前に(5)でコピーしたHTMLを貼り付けます。
(8) 以下のようになります。
(9) 画面左下の「メニューを保存」をクリックします。
(10) 次に「管理者情報」のアイコンを設定するのでFontAwesomeに戻り「user」と入力します。
(11) 以下のような「user」アイコンが沢山表示されるのでお好きなアイコンをクリックして下さい。
今回は、赤枠のアイコンをクリックします。
(12) アイコン画面が表示されるので赤枠のHTMLをコピーします。
(13) 「管理者情報」右の「▼」をクリックします。
(14) 「管理者情報」の設定画面が表示されるので、「管理者情報」の前に(12)でコピーしたHTMLを貼り付けます。
(15) 画面左下の「メニューを保存」をクリックします。
(16) 最後に「お問合せ」のアイコンを設定するのでFontAwesomeに戻り「mail」と入力します。
(17) 以下のような「mail」アイコンが沢山表示されるのでお好きなアイコンをクリックして下さい。
今回は、赤枠のアイコンをクリックします。
(18)アイコン画面が表示されるので赤枠のHTMLをコピーします。
(19) 「お問合せ」右の「▼」をクリックします。
(20) 「お問合せ」の設定画面が表示されるので、「お問合せ」の前に(18)でコピーしたHTMLを貼り付けます。」
(21) 画面左下の「メニューを保存」をクリックします。
(22) ブラウザからあなたのブログに「グローバルメニュー」にアイコンが表示されているか確認してみましょう。
「グローバルメニュー」にアイコンが表示されていました。
まとめ
以下について説明いたしました。
・グローバルメニューの設置
・グローバルメニューの背景色と文字色の設定
・グｔローバルメニューへのアイコンの設置
もしもあなたがCocoonでブログを開設するのであれば、ぜひ、グローバルメニューの設置にチャレンジして下さい。
人気ブログランキング参加中！！
応援ポチお願いします。
コメントフォーム