 |
はてなブログ〜フッターメニューをつけよう〜 |
やっぱりスキンのカスタムをやりはじめると、ほしくなるのがグローバルメニューですよね。
ヘッダー側のメニューの設置は様々なサイトで取り上げられていますが、フッター側については検索をしてもなかなか出てこないので、ココでアップしておきますね☆
|
１．ログイン |
まずは「はてなブログ」の管理画面にログインします。
※他サイトの管理をしてるので、必要のない部分は消してあります。
|
２．カスタマイズをするブログの管理画面を表示 |
画像左下の「デザイン」をクリックします。
|
３．カスタマイズする場所の指定 |
画像左中央にある「カスタマイズ」という青色のボタンをクリックして表示を切り替えます。
|
４．デザイン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です。
ここで気をつけておきたいのは、メニューを減らす時も増やす時も操作をしたらプレビューで確認することが大切です☆
減らしすぎると見た目が寂しくなり、「付けないほうがよかったじゃん」ということに。
増やしすぎると見たゴチャゴチャして、「見た目が汚っ」ということに。
ここではメニューの設置のみのアップですので、リンク先や表示文字などは予め計画性が必要になりますよっ☆
|
ココはチェックしてくださいね☆ |
実装にトライされる前にチェックしておいてくださいね〜☆
・カスタムの実装はご自身の責任でお願いします。
（私もプロじゃないのでアフターが出来るときと出来ないときがあるので）
・運営者側（はてなブログ）の規格変更で表示されないことも・・・
（そうなった場合は、ブログを通じてお知らせします。）
・はてなブログ、アメブロでは実装確認済みです！
（もしかしたら、他のブログサービスでも実装できるかも！？）
・残念ながらスマホでは表示されないんです。。。
（PCで閲覧、スマホで表示をPC版に変更した場合のみ使えるメニューです。）
・実装できたら教えてください！
（当サイトでご紹介させていただきたいので、お知らせいただけると担当者が喜びます☆）
|
このページの関連記事 |
 |
 | |
| 2014/11/02 「はてなブログ幅を広げる☆」 | ||
| 人との差が出る！アップです♪ | ||
 |
| |
| 2014/10/12 「カスタマイズ前にやることは？」 | ||
| 初心者もプロも！アップです♪ | ||
 |
| |
| 2014/09/27 「RSS複眼って？」 | ||
| 無料で使える便利なサービス☆ | ||
