jQueryでフッターを作ってみよう

アメブロカスタマイズ担当Webデザイナーの佐野です。

今回は「jQuery」について紹介させて頂きたいと思います。
なお、アメデコでは「カスタム可能」な中にある「CSS編集用デザイン」を元に
記事を書かせて頂いておりますので、そちらをご了承頂いた上でご覧ください。

アメブロでは、残念な事に記事やメッセージボード等でしかHTMLを書く事ができません。
しかし「フリープラグイン」と「jQuery」を組み合わせて使う事により
ほぼ全ての場所に自由にHTMLを追加する事ができてしまうのです。

ただ、新デザインの方ではjQueryがデフォルトで読み込まれておりません。
このままではjQueryが動いてくれませんので、
フリープラグインの一番上にjQueryの本体を読み込ませてあげましょう。

では早速設置を・・・と言いたいところなのですが、
フリープラグインにただjQueryを読み込ませても、
本来読み込ませたいバージョンではなく古いバージョンが読み込まれてしまいます。
こちらは、カスタマイズ方法や様々な記事を書いておられるわざめーば様が
「新しいバージョンのjQueryが使えない？新デザイン『CSS編集用デザイン』」という
記事にて詳しく紹介して下さっております、感謝！

アメデコでは、わざめーば様が考案したやり方を使用させて頂いております。

まず、フリープラグインの一番上に必ず下記内容を記述してあげましょう。
これは、一度記述してしまえばそれ以降のjQueryでは何度も記述する必要はありません。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.2');</script>
<script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script>

これでjQueryが使用できるようになったので、早速jQueryを使ってみましょう！

今回はコピーライトなどを掲載するフッターを作ってみたいと思います。
フッターを作る方法は人によって様々だと思いますが、
今回はskinContentsFrameというヘッダー以降の内容を覆っているクラスの後に、
追加するフッターを読み込ませてあげる方法でやっていきたいと思います。

$(".skinContentsFrame").after('追加するHTMLをここに');

上記のjQueryの内容を解説していきたいと思います。
これは、オレンジ色の箇所の要素の後に赤色の内容を追加するというjQueryです。
.skinContentsFrameというヘッダー以降の内容を覆っているクラスの後に
フッターを追加したいので、オレンジ色の部分は.skinContentsFrameを設定します。
そして、フッターに直接表示したい内容をHTMLで書いていくとこうなります。

フリープラグインに追加する内容

<script type="text/javascript">
$(function() {
$(".skinContentsFrame").after('<div id="addFooter"><div id="addFooterbox"><p>フッターに掲載するテキストが入ります。フッターに掲載するテキストが入ります。</p><address>Copyright &copy; 2012 カスタマイズのテスト用ブログ. All Right Reserved.</address></div></div>');
});
</script>

まずはこちらを、フリープラグインに追加で記述してみましょう。



これだけでもフッターにはテキストが表示されるようになっているはずです。
では、次に上で追加したHTMLをCSSで装飾してあげましょう。

CSSの編集に追加する内容

#addFooter {
	background: #CCCCCC;
	height: 100px;
}
#addFooterbox {
	width: 980px;
	margin: 0 auto;
}
#addFooterbox p {
	text-align: center;
	padding-top: 25px;
	color: #333333;
}
#addFooterbox address {
	text-align: center;
	padding-top: 20px;
	color: #666666;
	font-style:normal;
}

追加する内容によってHTMLもCSSもそれぞれ違います。
ですのであまり参考にはならないと思いますが、
今回は一例として用意したjQueryの内容を装飾する為の
CSSの内容を簡単に解説していきたいと思います。

まず「#addFooter」では高さが100pxの灰色ボックスを設置します。
次に「#addFooterbox」を入れることにより、
横幅980pxのボックスを元のボックスの中央に表示します。

「#addFooterbox」の中の「p要素」を、文字色#333333で大本のボックスから
25pxの位置でテキストをセンタリングした状態で表示します。
「#addFooterbox」の「address要素」を、文字色#666666で上の「p要素」の後から
20pxの位置でテキストをセンタリングして表示します。

分かり難い解説となってしまいましたが、
こちらを「CSSの編集」に追加してブラウザで確認してみましょう！



縮小して表示してあるので実際のブラウザでみたサイズとは違いますが、
このような感じで表示されていれば今回の挑戦は完了です！

このように「フリープラグイン」と「jQuery」を組み合わせる事により、
カスタマイズの自由度はどんどん広がっていきます。
皆様もjQueryを使用してカスタマイズしてみてはいかがでしょうか？
今回はフッターに画像や複雑なCSSは使わずにカスタマイズしてありますが、
とりあえず設置してみよう！という方向けの記事ですので
デザイン要素を含んだカスタマイズをしたい場合は、
別途CSSの参考資料などで調べながら挑戦してみてください。

最後まで記事を読んでくれてありがとうございました！