在宅ワーク・副業 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
アメブロの読者登録のやり方

アメブロの読者登録機能は、アメブロ独自の機能です。 この機能は、読者登録をしたアメブロが更新された際に、更新がお知らせされるなどの機能があります。せっかくアメブロを始めるなら、この読者登録を使わないの ...

 








おすすめ記事

1

SNS集客からWeb集客へ時代が変化しつつある中、ホームページサービスにあたらめて注目が集まっています。 WordPress、Jimdo、Ameba Ownd、Wixなどなど色々ホームページ制作のサー ...

2

WordPressを使用する際に、迷うのはデザインテーマ。 それもそのはず。 WordPressのデザインテーマは、日本のみならず世界中で作られています。 本当にたくさんテーマがあるので、どれが良いの ...

3

世界で一つだけ、自分だけのオリジナルのものを作るハンドメイドは、最近人気の起業です。 書籍もたくさん出ていますし、作品をminneやクリーマなどに出展したり自分でショップカートを持って販売しているハン ...

4

レースや枠、ライン画像など無料で使えるWeb素材のリンク集を作ってみました。 自作でチラシやデザイン制作、アメブロカスタマイズを行う際にご利用下さい。 無料・商用利用可能、改変可能、リンク不要のモノを ...

5

ホームページやブログカスタマイズをするとき、デザインパーツ全てを自分で作るのは正直大変です。 そこで登場するのが、市販の素材集。 ヘビロテする本当に使える素材集をご紹介します。 本当に使える可愛いもの ...

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

Copyright© Bloomin! , 2018 All Rights Reserved.