自由度200％アップ！アメブロにロールオーバー付きのグローバルナビを設置する方法！

アメブロにグローバルナビゲーションを設置すると「ブログ」から「WEBサイト」へと、見た目の雰囲気がググっとあがります。

その設置はどうやるのか？その方法を以下に覚書。

とりあえずロールオーバー無しのナビゲーションの設置方法

●　まずは表示したいナビゲーションの部分をhtmlで作成。

●　生成したタグを「フリースペース」の個所に貼り付け。　

※　フリースペースは自動改行が適応されているので、タグ間の空白は全部つめちゃいましょう。

これでまずは不自然な個所にグローバルナビゲーションが登場！

次にｃｓｓで位置を調整します。

●ｃｓｓ設定個所に以下のようなcssを追加

#ボタンタグにつけたID名　｛

width:1000px;
height:35px;
position:absolute;
top:-60px;
right:20px;
background:＃000000;

｝

#wrap{

position:relative;

}

ようはブログ内の#wrapを基準にナビゲーションのボックスをposition:absolute;で絶対配置。

#warpとは、アメブロのヘッダーより以下の部分をくくってるボックスです。

これでとりあえずグローバルナビゲーションが設置できます。やった！

ロールオーバー有りのナビゲーションの設置方法

基本の配置は、変わらないですが、アメブロの仕様で直接jsなど追加できないので、

iframeの変異版で対応します。

※個人のサーバーにデータをアップする必要があるので、何かしらのレンタルサーバーを用意ください。

●ボタンにロールオーバーを設置したhtmlを用意

これ使うととっても綺麗なロールオーバーを実装できます。

smoothRollOver.js　解説サイト

●ナビゲーションだけ表示できるhtmlを個人レンタルサーバーあげる。

●あげたhtmlのパスをiframeタグを使用して、「フリースペース」に追加

※アメブロでiframeを使用する方法

●アメブロの「フリープラグイン」に以下のタグを追加

<!-- アメブロでiframe(インラインフレーム)を使う方法 -->
<script type="text/javascript"><!--
$(function(){
$("div.iframeCreate").each(function(i, O){
var tag = 'iframe';
var attrs = new Array("src", "width", "height", "frameborder", "scrolling", "marginwidth", "marginheight");
for(var i in attrs){
if ($(O).attr(attrs[i])) {
tag += ' ' + attrs[i] + '="' + $(O).attr(attrs[i]) + '"';
$(O).removeAttr(attrs[i]);
}
}
tag = "<" + tag + "></iframe>";
$(O).empty();
$(O).append(tag);
});
});
//--></script>

これで準備OK！

後は、iframeを書く際にちょっとタグの仕様を変更して書きます。

変更前

<iframe src="http://・・・" frameborder="0" width="400" height="300"></iframe>

変更後

<div class="iframeCreate" src="http://・・・" frameborder="0" width="400" height="300"></div>

これでレンタルサーバーにアップしたデータをアメブロ上に読み出せます。

●cssでレイアウトを調整

上記と同じcssを記載してグローバルナビゲーションの配置を調整。

iframeを使用したカスタムを覚えると、フラッシュだろうがスライドショーのjsだろうがなんでも

アメブロに設置可能です。

フラッシュがガンガン使われたアメブロはこの方法で設置しています。

現在テスト中のu-streamも同じようなやり方で設置しています。

html cssの知識はどうしても必要になってしまうのですが、

iphoneを脱獄するくらいカスタムの自由度があがるのでぜひチャレンジしてみてください！

以上「自由度200％アップ！アメブロにロールオーバー付きのグローバルナビを設置する方法！」でした。