アメブロをお仕事に利用したい方にとってヘッダー設置の次に需要のあるカスタマイズは、なんと言ってもメニューバー（グローバルメニュー）の設置です。
メニューバーとは、ヘッダーエリアと記事エリアの間に、メニュー一覧やアクセスなど見てもらいたい記事へのリンクボタンを設置するカスタマイズのこと。
4～5個くらいのメニューボタンを写真のように横に並べて設置し、メニュー記事やアクセス記事、お客様の声などにリンクを貼ることで、訪問した方がクリックをすると記事が表示されます。
今回は、新デザインでのメニューバーの作り方を載せてみたいと思います。
目次
アメブロカスタマイズ メニューバーの作り方（新デザイン）
設定をする前に、カスタマイズができるようにこちらの設定にしておきましょう。
基本設定は、こちらです。
アメブロカスタマイズをする際の基本手順
グローバルメニューの設定をする
アメブロのブログ管理ページを開きます。
設定・管理→「フリースペースの編集」を開きます。
1 2 3 4 5 6 7 | <div class="nav-wrap"><nav><ul class="nav-body"> <li><a href="URL">リンク先</a></li> <li><a href="URL">リンク先</a></li> <li><a href="URL">リンク先</a></li> <li><a href="URL">リンク先</a></li> <li><a href="URL">リンク先</a></li> </ul></nav></div> |
URLにリンクしたいアドレスと、リンク先に自己紹介などの文字を入力して保存します。
（事前に設定・管理→フリースペースの配置設定でフリースペースを「サイドバーに使用する機能」の中に入れておきましょう）
CSSを入力します
CSS編集デザインに記載されているCSSタグの一番最後に下記を入れます
ナビメニューの色設定
ナビメニューの色設定を行います。色の参考はこちらから見てください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | /* (6-4) グローバルメニュー --------------------------------------------*/ /* グローバルナビゲーションメニュー */ .nav-wrap { position: absolute; margin: 0; padding: 0; } .skin-blogSubA, .skin-blogSubB { position: relative; } [data-uranus-layout="columnB"] .skin-blogSubA .nav-wrap, [data-uranus-layout="columnC"] .skin-blogSubA .nav-wrap, [data-uranus-layout="columnE"] .skin-blogSubA .nav-wrap, [data-uranus-layout="columnB"] .skin-blogSubB .nav-wrap { left: auto; right: 0; } [data-uranus-layout="columnA"] .skin-blogSubA .nav-wrap, [data-uranus-layout="columnD"] .skin-blogSubA .nav-wrap, [data-uranus-layout="columnC"] .skin-blogSubB .nav-wrap { left: 0; right: auto; } [data-uranus-layout="columnE"] .skin-blogSubB .nav-wrap { left: auto; right: -360px; } .nav-body { margin: 0; padding: 0; } .nav-body:after { display: block; clear: both; content: " "; height: 0; visibility: hidden; } .nav-body>br { display: none; } .nav-body li { display: block; float: left; margin: 0; padding: 0; text-align: center; } .nav-body li a { display: block; text-decoration: none; } .skin-blogBodyInner { padding-top: 90px; /* メニューバーの表示場所確保 */ } .nav-wrap { top: -90px; /* メニューバーの上下位置調整 */ } .nav-body { width: 1120px; /* メニューバー横幅 */ background: #f5deb3; /* メニューバー全体の背景色 */ } .nav-body li a { width: 223px; /* ボタンの横幅 */ line-height: 50px; /* ボタンの高さ */ border-right:1px #fff solid;/* ボタンの隙間 */ color: #fff; /* 文字の色 */ background:#d2b48c; /* ボタンの色 */ } |
変更が必要な場所は赤字にしています。
文字・ボタン・背景色の色は、#○○○となっています。
こちらは、カラーコード表から色コードを見て選んでください。
こんな感じで、メニューとメニューの間にスキマの入ったデザインを作ることができます。
