アメブロカスタマイズ

アメブロカスタマイズ メニューバーの作り方

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

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

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タグの一番最後に下記を入れます

ナビメニューの色設定

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

/* (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
女性の起業におすすめのブログサービス3選

お教室、占い、ネイルサロンなどなど、女性の起業には様々な種類があります。 そして、集客 それは、起業をする上で重要なことです。 集客をしないで商品やサービスが売れることは滅多にありませんし、お客さんが ...

 

  • この記事を書いた人
  • 最新記事
irodori

ヨリメグ

メール対応・資料作成・Webサイト管理・SNS運用・ライティングまでワンストップ対応できるクリエイティブ秘書&ブロガー。 ブログは、フリーランスお仕事系お役立ち記事を載せています。

おすすめ記事

1

確定申告の季節が近づいてきました。 ちなみに確定申告期間は2020年2月17日(月)から3月16日(月)になります。 確定申告をe-Taxで(電子申告)で行うと、青色申告は10万円の控除増加が期待でき ...

ヨリメグのペライチ 2

ペライチという1枚ページサイトに特化したサービスがあるのですが、そちらで秘書サービスに特化したサイトを作ってみました。 それがこちら↓ これこれ 結構上手に作れたのではないかと自画自賛。 内容がきちん ...

3

著作権が厳しい世の中になってきました。 フリー画像でもお仕事に関するものに使用する写真は「商用フリー」写真であることが利用の条件です。 ネットサーフィンをしていて見つけた商用利用可能なフリー写真サイト ...

4

インターネットで写真やイラストを販売することで、収入を得るストックフォト。 最近では、トッププレイヤーは月30万以上の収入を得ている方もゴロゴロいるそうです。 今回は、ストックフォトについてご紹介しま ...

5

お仕事ブログとしてアメブロを使う方にとって、既存デザインではなく、アメブロのヘッダーは自分のサービスのイメージに合ったものにしたいと思いますよね。 お仕事ブログへのカスタマイズの第一歩は、ヘッダーの設 ...

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

Copyright© イロドリワークス|オンライン秘書サービス , 2020 All Rights Reserved.