アメブロのフッターにナビ(メニューバー)を付ける


アメブロにフッターナビを付けるを付けるやり方を紹介します。
(CSS編集用デザイン)

フリープラグインとCSSを使います

■フリープラグインに

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>

<script type="text/javascript">
$(function(){
var footermenu = '<div id="footermenu"><ul><li><a href="#pageTop"> ▲ ページ上部</a></li><li>|</li><li><a href="リンクURL">メニュー1</a></li><li>|</li><li><a href="リンクURL" >メニュー2</a></li><li>|</li><li><a href="リンクURL">メニュー3</a></li></ul><br><div class="copy">Copyright &copy; <a href="ブログURL">コピーライト名</a> All Rights Reserved.</div></div>';
$('.skinContentsFrame').append(footermenu);
}
);
</script>

を追加します。

・JQueryの記述が既に入っている場合は必要ありません

<!-- jQuery -->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>

・リンクURL、メニュー1などを書き換えます (右からの順番になります)
・ブログURL、コピーライト名を書き換えます。(フッターのコピーライト部分になります)

■CSSに次のコードを追加します


/*メニューリスト*/
#footermenu{
margin:0 auto;
background:#FFFFFF;
}
#footermenu ul{
width: 980px;/*ブログ幅*/
margin: 0 auto;
}

#footermenu ul li {
list-style:none;
float:right;
margin-left:10px;
padding:20px 0;
}
#footermenu ul li a{
color:#333333;/*文字色*/
}
.copy {
clear:both;
background: #014177;/*コピーライト部分の背景色*/
color: #FFFFFF;
margin: 0 auto;
text-align: center;
padding: 20px 0;
}
.copy a{
color: #FFFFFF;/*コピー文字色*/
}

コピーライトの部分を画面全体ではなく、ブログ幅と同じにしたい場合は

.copy{ の後に  width:980px;/*ブログ幅*/  を追加するようにします。

カラーコードなどは変更して使ってみてください

カラーコードはこちら

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください