アメブロで集客をしているお店は、少なく無いと思います。
商用利用禁止とはいえ、できるだけホームページに近づけたい・・と
思っているオーナーさんもいると思います。
今回は、アメブロのヘッダーにナビゲーションを追加するシンプルな方法をお伝えします。
この方法であれば、アメブロのテーマを使っている人でも、
テーマに関わらず、メニューを追加できます。
※ただし、対応していないテーマもあるかも・・
こんなテーマでも
こんなテーマでも、メニューは出ます
修正方法は、いたってシンプル。
の2つの工程で実装が可能です。
フリースペースへのナビゲーション内容追加
設定・管理 > フリースペース編集
から、フリースペースの中身を修正します。
追加するものは、以下の内容。
<div id="headerMenu"><!-- --><ul class="menu"><!-- --><li><a href="リンクしたいアドレス1">見出し1</a></li><!-- --><li><a href="リンクしたいアドレス2">見出し2</a></li><!-- --><li><a href="リンクしたいアドレス3">見出し3</a></li><!-- --><li><a href="リンクしたいアドレス4">見出し4</a></li><!-- --><li><a href="リンクしたいアドレス5">見出し5</a></li><!-- --></ul><!-- --></div>
この中の
「リンクしたいアドレス」は、ホームページURLや、ブログの記事のURLを書きます。
「見出し1」〜「見出し5」までは、表示したいタイトルを書きます。
ちなみに、フリースペースは改行が自動的に反映されてしまうため、
<!– –> これを追加してコメントアウトし、改行を無効にしています。
外部サイトに飛ばしたい場合は、ターゲットブランクを追加する
ちなみに、リンクをアメブロの記事以外にしたい場合は、
クリックすると同じ画面で切り替わってしまい、ブログに戻って来れなくなります。
それを防ぐためにも、外部に移動させる場合は、リンクに「外部サイトですよ」という設定を追加します。
<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/
まとめ
よく、アメブロのナビゲーションを画像で設置している方がいます。
もちろん、画像にしたほうが表現の幅は広がるし、見た目もキレイにできるんですが、
なんせ、修正が難しい。
デザイナーに画像を依頼し直して、修正をする必要があります。
ナビゲーションは、スマートフォンなどでは表示されない部分。
シンプルにさくっと、テキストだけでつくるというのも、僕は良いと思います。
もちろん、ナビゲーションをおしゃれに見せたり、
ヘッダー画像との兼ね合いなどで、デザインを調整する必要はあると思いますが、
まずは、ヘッダーにメニューを出すのは意外と簡単ということがお伝えできたら嬉しいです。