在宅ワーク・副業 Webにまつわるお役立ちTipsを公開中

Bloomin!

アメブロカスタマイズ

アメブロカスタマイズ メニューバーの作り方(新デザイン)

更新日:




アメブロをお仕事に利用したい方にとってヘッダー設置の次に需要のあるカスタマイズは、なんと言ってもメニューバー(グローバルメニュー)の設置です。

メニューバーとは、ヘッダーエリアと記事エリアの間に、メニュー一覧やアクセスなど見てもらいたい記事へのリンクボタンを設置するカスタマイズのこと。

4~5個くらいのメニューボタンを写真のように横に並べて設置し、メニュー記事やアクセス記事、お客様の声などにリンクを貼ることで、訪問した方がクリックをすると記事が表示されます。

今回は、新デザインでのメニューバーの作り方を載せてみたいと思います。

アメブロカスタマイズ メニューバーの作り方(新デザイン)

グローバルメニューの設定をする

アメブロのブログ管理ページを開きます。

設定・管理→「フリースペースの編集」を開きます。

<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が使用できませんのでご注意ください。
スタンダードタイプを選んだら、2カラム・メニュー右を選択します。

CSSを入力します

CSS編集デザインに記載されているCSSタグの一番最後に下記を入れます

ナビメニューの色設定

ナビメニューの色設定を行います。色の参考はこちらから見てください。

/* (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; /* ボタンの色 */
}

変更が必要な場所は赤字にしています。

文字・ボタン・背景色の色は、#○○○となっています。

こちらは、カラーコード表から色コードを見て選んでください。

こんな感じで、メニューとメニューの間にスキマの入ったデザインを作ることができます。

241
ローリスクハイリターンが魅力!アフィリエイトの始め方

働きたいのだけど、子どもが小さいし保育園も空いていないから、外で働くのは難しいな…。 在宅でできる仕事はないかな…。 ママの悩みのあるあるですよね。 働きたいけど、子どもは預けられない。 在宅でお仕事 ...

 



-アメブロカスタマイズ
-, ,

Copyright© Bloomin! , 2018 All Rights Reserved.