アメーバブログのサイトタイトルの下にメニューバーを作成する方法

サイトタイトルの下にメニューバーを設置するには

アメブロでは、初期状態ではタイトルの下に「ブログトップ」「記事一覧」「画像一覧」のメニューがあります。

しかし、これ以外にも自分が好きなページへリンクしたメニューバーを設置したい、という人も多いと思います。

この記事では、どうすればアメブロでタイトルの下にメニューバーを設置できるかについてご紹介いたします。

フリースペース編集

タイトルの下にメニューバーを設置するには、まずはフリースペースの編集を行います。

ブログ管理画面の右上にある「三本線」ボタンを、押して出てきたメニューの「フリースペース編集」を押します。

アメブロのサイトタイトルの下にメニューバーを作成する方法3 (1)

テキストボックス欄に、以下の内容を書き込みます。

<div class="global-menu"><ul><li class="left"><a href="【表示したい1つ目のページのURL】">【表示したい1つ目のページのタイトル】</a></li><li><a href="【表示したい2つ目のページのURL】">【表示したい2つ目のページのタイトル】</a></li><li><a href="【表示したい3つ目のページのURL】">【表示したい3つ目のページのタイトル】</a></li><li><a href="【表示したい4つ目のページのURL】">【表示したい4つ目のページのタイトル】</a></li><li><a href="【表示したい5つ目のページのURL】">【表示したい5つ目のページのタイトル】</a></li></ul></div>

「保存」を押して、「フリースペースの配置設定はこちら」を押します。

アメブロのサイトタイトルの下にメニューバーを作成する方法3 (2)

「サイドバーの配置設定」「使用しない機能」にある「フリースペース」を押します。

なお、「フリースペース」「使用する機能」にある場合は、ここから先は不要です。

アメブロのサイトタイトルの下にメニューバーを作成する方法3 (3)

「フリースペース」が移動できるようになるので、「使用する機能」へ移動します。

「使用する機能」での位置はどこでもかまいません。

「保存」を押します。

アメブロのサイトタイトルの下にメニューバーを作成する方法3 (4)

ブログデザインのCSSの編集

フリースペースの編集ができたら、ブログデザインのCSSの編集を行います。

なお、CSSの編集を行うためには、ブログデザインを「CSS編集用デザイン」にする必要があります。

もしほかのデザインを使用している場合は、「CSS編集用デザイン」に変更をお願いします。

ブログ管理画面の右上にある「三本線」ボタンを、押して出てきたメニューの「デザインの変更」を押します。

アメブロのサイトタイトルの下にメニューバーを作成する方法3 (5)

ページ上部にある、「適用中のデザイン:CSS編集用デザイン」の下にある「CSSの編集」を押します。

アメブロのサイトタイトルの下にメニューバーを作成する方法3 (6)

「現在使用中のブログデザインCSS」の一番下に、以下の内容をコピーして貼り付けをして、「保存」を押します。

/* メニューバーを設置する */
.skin-blogBodyInner{
  position:relative;padding-top:60px;
}

.skin-bgHeader {
  padding-bottom: 47px;
}

div#subA{
  position:static;
}

.global-menu{
  position:absolute;
  top:-122px;
  left:0;
  width:1120px;
  font-size:12px !important;
}

.global-menu ul{
  margin:0;
  padding:1px 0;
  list-style: none;
}

.global-menu ul li{
  margin:0;
  padding:0 0 0 1px;
  display:inline;
  width: 223px;
  line-height: 3.6;
  float: left;
  overflow: hidden;
  white-space:nowrap;
}

.global-menu ul li.left{
  margin:0;
  padding:0;
  display:inline;
  width:224px;
  line-height:3.6;
  float:left;
  overflow:hidden;
  white-space:nowrap;
}

.global-menu ul li a{
  display:block;
  text-align:center;
  font-weight: bold;
  background-color:#ffffff;
  text-decoration:none;
  border:1px solid #ffffff;
}

.global-menu ul li ul li{
  display:block;
  margin: 0;
  padding: 0;
  position:relative;
  border-top:1px solid #ffffff;
  float:none;width:223px;
}

.global-menu ul li ul li.left{
  display:block;
  margin:0;
  padding:0;
  position:relative;
  border-top:1px solid #ffffff;
  float:none;width:224px;
}

.global-menu ul li ul {
  display:none;
}

アメブロのサイトタイトルの下にメニューバーを作成する方法3 (7)

タイトルの下にメニューバーが表示されました。

アメブロのサイトタイトルの下にメニューバーを作成する方法3 (8)

まとめ

以上、アメブロでタイトルの下にメニューバーを設置する方法についてご紹介させていただきました。

オリジナルのメニューバーを設置することにより、皆さんが見てほしいページのアクセスを増やすことができるようになります。

この記事を参考に、ブログの利便性をより高めましょう。

「アメーバキング2」アメブロ売上倍増&アクセスアップの多機能ツール

http://ci-s.net/amebaking2/

おすすめ参考記事

Twitterでフォローしよう

おすすめの記事
ココナラサムネイル画像4
ネット副業種類
ココナラってなに? ココナラは自分の得意なことや趣味にしているものを売ることができるサイトです。 ココナラをするのに必要なもの ・パソコンも...
アドモールに無料会員登録する方法
アフィリエイト
今回は、アドモールに無料会員登録する方法について紹介します。 アドモールについて アドモールは、情報商材のアフィリエイト広告をあつかっていま...
FC2ブログのスマホの広告を消す方法
FC2ブログ カスタマイズ初心者講座
今回は、FC2ブログのスマホの広告を消す方法について紹介します。 FC2ブログの広告 FC2ブログの無料プランでは、初期状態だと広告が数箇所...