あるとたたん

写真好きの前向き日誌〜只今、母になる準備中〜

ブログっぽさアップ!グローバルメニューを設定する方法

f:id:masami11662277:20170812115627p:plain

 

ヘッダーに設置した横長のメニューです。今回も、初心者でも簡単にコピー&ペーストで出来るように説明していきますので画像が多めです!デザインのことやHTML、CSSのこと分かってるよ!って方は目次で追ってみてくださいね。

 

 

できあがりイメージ

カーソルを親カテゴリー(以下、メインカテゴリー)に置くと、分けておいた子カテゴリー(以下、サブカテゴリー)が下に出てきます。記事の編集画面では、メインカテゴリー、サブカテゴリーとして分けることはできませんが、自分でメニューを作ることで見やすく分けることができます。

 

f:id:masami11662277:20170812115709p:plain

 

HTMLとCSSをそれぞれ対応する場所にコピー&ペーストすれば、簡単にできます!つまり、2種類の文字列を2ヶ所にコピペするだけ!

 

 

CSSをペーストする場所

 まずは、貼る場所を確認しましょう。1つ目のCSSと言われる文字列を貼る場所です。

 

▼貼る場所までの経路(クリックしていくだけ)

「ダッシュボード」⇛「デザイン」⇛「工具マーク」⇛「デザインCSS」⇛「デザインCSSの下に出てくる枠」

 

f:id:masami11662277:20160821164908p:plain

 

f:id:masami11662277:20160821164925p:plain

 

f:id:masami11662277:20160821164932p:plain

 

f:id:masami11662277:20170812120110p:plain

 

f:id:masami11662277:20170812120206p:plain

 

CSSをコピー

場所は分かりましたか?次に、貼り付けるCSSです。このブログで使用している黒いメニューになるので、分かる人は好みの色に編集してみてください。「文字色」「背景色」「マウスオーバー時の色」の設定ができ、#の後ろの英数字を変えると色が変わります。初めての人はコピーするだけで大丈夫!

 

nav.global-menu-normal, .global-menu-normal a {color: #ffffff; /* 文字色 */background-color: #1d3557; /* 背景色 */}.global-menu-normal a:hover {background-color: #264673; /* マウスオーバー時の色 */}

 

▼色の参考サイト

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

 

HTMLをペーストする場所

2つ目のHTMLと言われる文字列を貼る場所です。デザインにあるヘッダを開き、タイトル下のHTMLに貼り付けます。

 

▼貼る場所までの経路 

「ダッシュボード」⇛「デザイン」⇛「工具マーク」⇛「ヘッダ」⇛「タイトル下」⇛「タイトル下に出てくる枠」

 

f:id:masami11662277:20160821164925p:plain

 

f:id:masami11662277:20170812120050p:plain

 

f:id:masami11662277:20170812120143p:plain

 

f:id:masami11662277:20170812120206p:plain

 

HTMLをコピー

 次に、コピーするHTMLです。CSSよりも長く、必ず編集しなければならないところがあるので確認してください。最後に編集する部分について詳細を説明していきます。編集する部分を分かりやすくするために①〜の数字を付けていますが、編集する際には消して下さい。

 

<!-- メニューバー -->
 
<nav class="global-area global-menu-normal">
  <div class="menu-instance">
    <div id="toggle">Menu<br><i class="blogicon-list lg"></i></div>
    <ul>
      <li><a href="http://①alto.hatenablog.jp">⑭HOME</a></li>
      <li><a href="http://②alto.hatenablog.jp/archive/category/写真" class="dropdown">⑮写真</a>
        <ul><li><a href="http://③alto.hatenablog.jp/archive/category/アルバム">⑯アルバム</a></li>
        <li><a href="http://④alto.hatenablog.jp/archive/category/お気に入り写真館">⑰写真館</a></li>
          </ul>
  </li>
  <li>
        <a href="http://⑤alto.hatenablog.jp/archive/category/ブログカスタム" class="dropdown">⑱ブログカスタム</a>
        <ul><li><a href="http://⑥alto.hatenablog.jp/archive/category/全体/記事欄">⑲全体/記事欄</a></li>
          <li><a href="http://⑦alto.hatenablog.jp/archive/category/サイドバー">⑳サイドガジェット</a></li>
          </ul>
  </li>
  <li><a href="http://⑧alto.hatenablog.jp/archive/category/ライフログ" class="dropdown">㉑ライフログ</a>
        <ul>
           <li><a href="http://⑨alto.hatenablog.jp/archive/category/ママライフ">㉒ママライフ</a></li>
           <li><a href="http://⑩alto.hatenablog.jp/archive/category/ごはん">㉓ごはん</a></li>
          </ul>
      <li>
        <a href="http://⑪alto.hatenablog.jp/archive/category/コトバログ" class="dropdown">㉔コトバログ</a>
        <ul><li><a href="http://⑫alto.hatenablog.jp/archive/category/ゆめへ向かう">㉕ゆめ</a></li>
          <li><a href="http://⑬alto.hatenablog.jp/archive/category/やりましたリスト">㉖やりましたリスト</a></li>
          </ul>
    </ul>
  </div>
</nav>
 
①〜⑬はこのブログのURLなので、貼付けたあと自分のサイトのURLに編集してください。
 
▼URLとカテゴリーを変える
alto.hatenablog.jp
alto.hatenablog.jp/archive/category/写真
alto.hatenablog.jp/archive/category/アルバム
以下④〜⑬も同様なので省略します。
 
▼注意するポイント
①、②、⑤、⑧、⑪については「メインカテゴリー」となる部分です。その他は、それぞれ「メインカテゴリー」からトップダウンしてくる「サブカテゴリー」です。自分が管理画面で仕分けしているカテゴリーに編集してください。
 
▼カテゴリー名を編集する
⑭〜㉖は実際にメニューバーに表示されるカテゴリー名です。自分で分けているカテゴリーでもそうでないものでも大丈夫ですので、記事管理で長いカテゴリー名の場合は短い単語にすると良いと思います。
 
 ※分からないことがあれば、コメント欄にて質問を受け付けています!

忘れずに変更を保存!

ペーストしたら右のプレビューに反映されますが、まだ完了していません。必ず「変更を保存する」を押してくださいね。私はこれを忘れて何度も白紙に戻ったことがあります…。

 

f:id:masami11662277:20160901082600p:plain

 

 

参考ブログ

この記事を書くにあたり、参考にさせてもらったブログです。どちらもコピペするだけという形で紹介してくれているので、このブログ用に編集して使っています。

 

▼当ブログのデザインから何までたくさんお世話になっているブログです。

www.ituore.com

 

▼知識がある人向けに編集の仕方を教えてくれています。

www.yukihy.com