カエテンジョイは普通のブログに比べて、見た目がスッキリとしていてオシャレですが
「メニューバー」も、より見た目が本格的なものにカスタマイズすることができます。
こんな「メニューバー」も最終的には
こんなふうにオシャレで本格的な「メニューバー」にカスタマイズすることができます。
カエテンジョイの「メニューバー」の設定方法についてはカエテンジョイメンバーズサイトの「設定マニュアル」欄の「 グローバルメニューの設定 」で詳しい解説が載っていますので、ぜひ参考にしてください。
Contents
カエテンジョイのメニューバー設定方法
カエテンジョイのメニューバーを設定するには「HTML」の部分をいじらなければいけません
ですが、専門的な知識は必要なく「コピペ」などですぐにできます。
さっそくやってみたいと思います。
メニュー名を変える(fc2ブログ、Seesaaブログ、忍者ブログの場合）
カエテンジョイの「デフォルト」のメニューバーは、下のように
「ホーム」「メニュー」「メニュー」と並んでいます。
まずは、この殺風景な「メニュー名」を変えてみます。
ブログ管理画面の「デザイン」や「テンプレート設定」の場面から、テンプレートのHTML画面を表示させます。
下は、FC2ブログの管理画面です。
しかし、Seesaaブログや忍者ブログでもやることは一緒です。
HTML画面を少しスクロールしたところに <!– ▼グローバルメニュー –> という箇所があるので、そこの「メニュー」の部分をお好きなものに変更します。
また、メニュー部分を追加したければ
< li > < a href = “<%url>” > < i class = “fa fa-th-large fa-fw” > </ i > メニュー </ a > </ li > の部分 を コピーして、下に追加すれば新しくメニュー項目が増えます。
（必ず </ul> の中に収めてください）
今回はこのようにして、こんな感じに設定してみました。
下の「更新」ボタンを押してブログを確認してみると、ちゃんと各ブログごとの「メニューバー」に変更されています。
ライブドアブログの場合
ライブドアブログの場合は元々「メニューバー」機能がついていますから、それを利用してカスタマイズします。
「ブログ設定」画面から「PC」→「メニューバー」へと進み、「新しいメニュー項目を作る」を選びます。
「HOME」はトップページを別ウィンドウで開く設定に、「各ブログ名」はカテゴリページを別ウィンドウで開く設定にします。
設定完了後、ブログを確認してみるとスッキリとしたメニューバーになっています。
普通のブログに比べても、見た目が良いですね。
メニューバーのアイコンを消そう
カエテンジョイのデフォルトのメニューバーには、四角形のようなアイコンがあります。
これを消したほうが「見た目」が良くなりますので、消してみたいと思います。
また、ライブドアブログの場合は元々表示されない設定になっているので
気にしなくて構いません。
FC2ブログ、Seesaaブログ、忍者ブログを使っている方だけ設定してみてください。
これも簡単で、HTML内の < i class = “fa fa-th-large fa-fw” > </ i > の記述を削除するだけです
この < i class = “fa fa-th-large fa-fw” > </ i > が、アイコンを意味する記述になっていますので
必要ないようなら、削除してください。
邪魔な < i class = “fa fa-th-large fa-fw” > </ i > を消して、 記述もスッキリしたのが下のコードです。
下の「更新」ボタンで確定して、ブログを確認してみると四角形のアイコンが消えライブドアブログと同じようにスッキリしたデザインになりました。
リンクの設定
メニューバーの見た目が良くなったところで今度は「リンクの設定」をします。
これをやらないと、メニューバーをタップやクリックなどしても、リンク先に上手く飛んでくれません。
といっても設定自体はとても簡単で「カテゴリ」をクリックして、カテゴリ一覧ページを表示させて、そのURLをコピーして
FC2ブログの場合は <%url> に
Seesaaブログの場合は <% blog.page_url -%> に
忍者ブログの場合は <!–$g_url–> に貼り付けるだけです。
ちなみに、上図はFC2ブログのHTML編集画面になります。
各ブログでコードに細かい違いはあるものの、「記述されている箇所」や「意味」などは一緒ですのでご安心ください。
「ホーム」には、 トップページのURL を
「各ブログ」には、 各ブログのカテゴリページのURL を貼り付けました。
「更新」ボタンで確定して、ブログを確認してみてください。
きちんとリンクになっていて、各カテゴリごとに移動できるようになっているのがわかるかと思います。
なお、ライブドアブログにこの設定は必要ありません。
元々「メニューバー」機能が備わっていて、メニューごとに設定ができるからです。
プルダウン式メニューにする場合
カエテンジョイでは普通のブログではあまり見られないオシャレな「プルダウン式」のメニューにも設定できます。
やり方は簡単で、ブログの「HTML編集」の「グローバルメニュー」の画面にこちらのカエテンジョイの「プルダウン式メニュー」の記述を追加するだけです。
また、上の <i class=”fa fa-chevron-down fa-fw”> はアイコンを表示させる記述なので、削除してしまって構いません。
「展開メニュー」や「第2階層メニュー」の名前はもちろん変えてください。
また、 <a href=”##”> と <a href=”/”> の ## と / の部分には
「リンクの設定」と同じように、カテゴリー別のURLのリンクを貼り付ける必要があります。
今回はこうしてみました。
「メニュー名」だけ変更して、「リンクの設定」は省略してあります。
「更新」ボタンで確定して、ブログを確認してみるとこんなふうになっていました。
やっぱり「 プルダウン式 」の方が見た目がかっこいいですね。
これはFC2ブログの画面ですが、Seesaaブログや忍者ブログでも同じ設定で「プルダウン式」のメニューを表示させることができます。
ライブドアブログでプルダウン式メニューにする方法
ただ、ライブドアブログだけは元々「メニューバー」機能があるせいか、ちょっと勝手が違います。
ライブドアブログの場合は、「デザイン設定」のHTMLの トップページ・個別記事ページ・カテゴリアーカイブ・月別アーカイブ の4つすべての <$MenuList$> の下に
下の記述を追加で貼り付ける必要があります。
ただ、これも <i class=”fa fa-chevron-down fa-fw”></i> の部分はアイコンを意味しているので、削除してもらって構いません。
「メニュー名」を変更して、「リンクの設定」をすれば完了です。
ただ、ライブドアブログの場合はHTML部分の「 トップページ・個別記事ページ・カテゴリアーカイブ・月別アーカイブ 」の 4つすべて に同じ設定を施さないといけないので、他のブログに比べると面倒くさい設定になっています。
ですが現在ライブドアブログを使っていて、見た目を良くしたいという方はぜひ「 プルダウン式 」のメニューバーにしてみてください。
その方がカッコよく、本格的なブログだという印象を与えられますよ。
カエテンジョイのメニューバー設定のまとめ
カエテンジョイのメニューバー設定は、それほど難しくはありません。
ただ、「リンクの設定」の
- カテゴリをクリックする
- カテゴリ一覧ページを表示させる
- そのURLをコピーして、該当箇所に貼り付ける
この部分でつまづく人は多いかと思います。
カエテンジョイメンバーズサイトの「設定マニュアル」の「グローバルメニューの設定」でしっかり解説されていますので
わからない場合は、こちらを良く読んでカスタマイズしてください。
少しでも本格的でデザインの良いブログを目指しましょう。
ちなみに、アフィリエイトに必須の
・読者の「興味を引き付ける」記事の書き方
・読者に「制約させる」記事の書き方
を学びたいなら、「マジカルライティング」がおすすめです。
