アメブロで集客をしているお店は、少なく無いと思います。
商用利用禁止とはいえ、できるだけホームページに近づけたい・・と
思っているオーナーさんもいると思います。
今回は、アメブロのヘッダーにナビゲーションを追加するシンプルな方法をお伝えします。
この方法であれば、アメブロのテーマを使っている人でも、
テーマに関わらず、メニューを追加できます。
※ただし、対応していないテーマもあるかも・・
こんなテーマでも
こんなテーマでも、メニューは出ます
修正方法は、いたってシンプル。
の２つの工程で実装が可能です。
フリースペースへのナビゲーション内容追加
設定・管理 ＞ フリースペース編集
から、フリースペースの中身を修正します。
追加するものは、以下の内容。
<div id="headerMenu"><!-- --><ul class="menu"><!-- --><li><a href="リンクしたいアドレス１">見出し１</a></li><!-- --><li><a href="リンクしたいアドレス２">見出し２</a></li><!-- --><li><a href="リンクしたいアドレス３">見出し３</a></li><!-- --><li><a href="リンクしたいアドレス４">見出し４</a></li><!-- --><li><a href="リンクしたいアドレス５">見出し５</a></li><!-- --></ul><!-- --></div>
この中の
「リンクしたいアドレス」は、ホームページURLや、ブログの記事のURLを書きます。
「見出し１」〜「見出し５」までは、表示したいタイトルを書きます。
ちなみに、フリースペースは改行が自動的に反映されてしまうため、
<!– –> これを追加してコメントアウトし、改行を無効にしています。
外部サイトに飛ばしたい場合は、ターゲットブランクを追加する
ちなみに、リンクをアメブロの記事以外にしたい場合は、
クリックすると同じ画面で切り替わってしまい、ブログに戻って来れなくなります。
それを防ぐためにも、外部に移動させる場合は、リンクに「外部サイトですよ」という設定を追加します。
<a href="リンクしたいアドレス" target="_blank">
こんな感じに。
アンダーバー と、 blank です。
これで、別窓や別タブが立ち上がり、表示されるようになります。
フリープラグインに、スタイルを追加する
すると、サイドの部分にこんな感じで表示されると思います。
ここからは、この見出しにスタイルを設定して、ヘッダーに持って行きます。
アメブロのテーマは、デザインファイルを修正できない
カスタマイズ可能なテンプレートを使っていれば、
CSSというデザインファイルを修正することができますが、
テーマを使っている場合、それを修正することができません。
そんなときは、「フリープラグイン」を活用します。
フリープラグインのほうを、必ず選択します
この中に、以下のデザインファイルを入れます
<style type="text/css">
/* 位置・サイズ調整 */
#wrap,.skinContentsArea{
padding-top:50px; /* メニュー設置用スペース */
}
#headerMenu{
top:0px;
left:0px;
width:980px;
margin-bottom: 15px;
}
#headerMenu ul.menu li a{
width:196px;/* メニューの幅 */
line-height:45px; /* 高さ */
font-size:14px;/* 文字サイズ */
font-weight: bold;
}
/* 色・文字装飾・背景など */
#headerMenu ul.menu li a{
color: #6A4D4D; /* 文字色 */
text-decoration:none;
background-repeat:repeat;
}
#headerMenu ul.menu li a:hover{
color: #443131;/* マウスオーバー時の文字色(白) */
text-decoration: underline;
background-repeat: repeat;
}
#headerMenu ul.menu>li{
height:45px;
background-color:#ffffff;/* IE7対応 */
}
#wrap,.skinContentsArea{
position:relative;
}
#headerMenu{
position:absolute;
margin:0;
padding:0;
}
#headerMenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
#headerMenu ul.menu li{
display:inline;
}
#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}
#headerMenu ul.menu>li:hover{
height:auto;
}
</style>
これを、貼付けるだけ。
保存をすれば、ヘッダー部分にメニューが表示されます。
テーマによっては、文字の色や見た目の調整が必要になってくると思いますが、
先ほどのスタイルに追記をしていけば、実現できるはずです。
文字の色を変える時は
#headerMenu ul.menu li a{
color: #000;
}
とか、このあたりを修正すればOK。
ちなみに、#000は、「黒」を意味しています。
こういった便利なサイトもあるので、好みの色に変えてみてもいいかもしれません。
http://www.benricho.org/colors/color_picker/
まとめ
よく、アメブロのナビゲーションを画像で設置している方がいます。
もちろん、画像にしたほうが表現の幅は広がるし、見た目もキレイにできるんですが、
なんせ、修正が難しい。
デザイナーに画像を依頼し直して、修正をする必要があります。
ナビゲーションは、スマートフォンなどでは表示されない部分。
シンプルにさくっと、テキストだけでつくるというのも、僕は良いと思います。
もちろん、ナビゲーションをおしゃれに見せたり、
ヘッダー画像との兼ね合いなどで、デザインを調整する必要はあると思いますが、
まずは、ヘッダーにメニューを出すのは意外と簡単ということがお伝えできたら嬉しいです。
