 |
アメブロ〜フッターメニューをつけよう〜 |
先日アップした 「はてなブログ〜フッターメニューをつけよう〜」 の反響が大きく、「アメブロ版は？」という声を多くいただきましたので、ここではフッターメニューのアメブロへの実装方法をアップしていきます☆
|
１．ログイン |
まずは「アメブロ」の管理画面にログインします。
次にメニュー「デザインの変更」から「CSSの編集」をクリックします。
|
２．CSSの編集 |
そうすると、表示が画像のように切り替わります。
次に、画像中央のCSS欄の末尾に下記のCSSをコピーして貼り付けます。
/* フッターメニューの設置CSS */
#menu {
list-style:none;
margin:0;
padding:18px 0;
position: fixed;
left:0;
bottom:0;
width:100%;
background-color:#000000; /*背景の色（いまは黒です）*/
text-align:center;
z-index:9999;
}
#menu li {
display:inline-block;
*display:inline;
*zoom:1;
padding:0 20px; /*メニューの文字スペース*/
}
#menu li a {
font-size:12px; /*フォントの大きさ*/
color:#ffffff; /*フォントの色（いまは白です）*/
}
コピーして貼り付ける場所は、CSSの一番末尾でOKです。
「}」の貼り付け忘れがないように気をつけてくださいね☆
|
３．フリープラグインの追加 |
２．が完了したら、次はフッター部分に表示される文字と、そのリンクを設定していきますので、メニューから「プラグインの追加」をクリックします。
すると、画像のような画面になるので、下記のコードを追記しましょう。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu").hide(); //#menuが最初に出てこないように
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 200) { //ページトップから200ox動いたら表示します
$('#menu').fadeIn(); //ページトップから200ox動いたら#menuをイン
} else {
$('#menu').fadeOut(); //ページトップから200px以下は#menu表示しません
}
});
});
});
</script>
<ul id="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>
コピーして貼り付ける場所は、フリープラグインの末尾でOKです。
特にカスタマイズを施してない人は、このフリープラグインは空欄になってると思いますので楽チンですね。
CSSの編集と同様に「}」の貼り付け忘れがないように気をつけてくださいね☆
|
４．配置の設定 |
３．までが完了したら、次は「フリープラグイン」を有効にするためにメニューから「サイドバーの配置」をクリックします。
すると、画像のような画面になるので、使用していない機能からフリープラグインをドラッグして使用する機能の一番上に持っていきます。
表示の画像では、このフリープラグインを持っていった後の画像になります。
ちなみに、コレができていないと、せっかく実装しても表示されませんのでご注意くださいね☆
それでは、実際にこれを実装したブログを参考に載っけておきますので確認をかねてチェックしてみてください☆
|
５．リンクの設定 |
ここまで実装ができたら、いよいよリンクの設定をしていきましょう☆
３．のコード内の「ここにURLを入れます」という記載の部分にリンクさせたいページのURLを貼りつけ、その右側にある「メニュー１〜５」に表示させたい文字を入力していきます。
|
６．バランスの調整 |
初期設定では、フッターメニューの色は黒、表示文字は白になってますので、４．デザインCSSの編集のコードに記載の「背景の色」「文字の色」のカラーコードを変更するだけで、オリジナルのフッターメニューが実装できちゃいます☆
カラーコードについては、はてなブログであれば ブログを書く→文字を入力→入力した文字をドラッグ→メニューの文字色→お好みの色を指定→ｈｔｍｌ編集をクリック で指定した色のコードを追っかけることができますので、チェックしてみてください☆
|
７．メニュー数の変更 |
初期設定では、メニューの数は５こになってますが、これを減らしたい場合は・・・
３．フッタの編集に記載がある、
<li><a href="ここにＵＲＬを入れます">メニュー１〜５</a></li>
の部分を削除すればOKです。
逆に、これを増やしたい場合は・・・
３．フッタの編集に記載がある、
<li><a href="ここにＵＲＬを入れます">メニュー１〜５</a></li>
のうちひとつをコピーして、初期設定コードの </ul> の前に貼り付けるだけでOKです。
ここで気をつけておきたいのは、実装をする前に「カスタム前のCSSのコピー」「実装するCSSのコピー」を残しておくこと。
というのも、他のブログサービスと比べアメブロの場合、「エラー」が出て保存ができないことが多々あるんです☆
「やっと実装できた〜」と喜んだのものつかのま・・・保存できません。。。これはツライですよね☆
コピーがあれば、元に戻すことも実装することもすぐにできちゃいますので、チェックしておいてください☆
|
ココはチェックしてくださいね☆ |
実装にトライされる前にチェックしておいてくださいね〜☆
・カスタムの実装はご自身の責任でお願いします。
（私もプロじゃないのでアフターが出来るときと出来ないときがあるので）
・運営者側（アメブロ）の規格変更で表示されないことも・・・
（そうなった場合は、ブログを通じてお知らせします。）
・はてなブログ、アメブロでは実装確認済みです！
（もしかしたら、他のブログサービスでも実装できるかも！？）
・残念ながらスマホでは表示されないんです。。。
（PCで閲覧、スマホで表示をPC版に変更した場合のみ使えるメニューです。）
・実装できたら教えてください！
（当サイトでご紹介させていただきたいので、お知らせいただけると担当者が喜びます☆）
・プラグインには文字数制限があります！
（メニューをいっぱいつけたい！と言っても文字数制限があるので限界があるんです。）
・ホントによくエラーが出る
（頻繁にエラー画面が表示されるので、データの保存は必須ですよ〜☆）
|
このページの関連記事 |
 |
 | |
| 2014/11/08 「はてなブログ フッターメニュー」 | ||
| 誰でも簡単に「出来る人」に変身ですっ☆ | ||
 |
| |
| 2014/11/02 「はてなブログ幅を広げる☆」 | ||
| 人との差が出る！アップです♪ | ||
 |
| |
| 2014/10/12 「カスタマイズ前にやることは？」 | ||
| 初心者もプロも！アップです♪ | ||
