現在開発中のMT用テーマで、ヘッダーにフリーエリアを設けているオプションがあるのですが、そのフリーエリアに表示されるのは、MTのウェブページ機能で作成されたコンテンツで、なので、ユーザ様の利用方法によっては、コンテンツが長くなる場合もあります。しかし、デザインとして、ヘッダーには背景画像がcssで指定されており、コンテンツが長くなると、その背景画像の位置も下にずらす必要があります。これをjQueryで実現したいと。。

以下のコードは、MTテンプレート内の関連箇所のすぐ下に直接記述しているjQueryなので、ページのDOMの読み込みが終わってから処理されるようにするreadyイベントの書き方$(function () {～～～});はしていません。（コード中の＜＞は、全角で記述しています。）

＜script type="text/javascript"＞
var header_height = $('#header .text-info').height();
$('#header').height(header_height);

var position_value = "left " + header_height + "px";
$('body').css('background-position', position_value);
＜/script＞

上記のコードで無事に「#header」内の「.text-info」内にあるコンテンツの高さを取得し、それを「#header」の高さとし、また、その高さを使って、「body」のcssに指定している背景画像のポジションを変更することが出来ました！嬉

これまでjQueryは難しいものとばかり思っていましたが、違っていたようです。。元々javaScriptが苦手な私は、jQueryにも自然と苦手意識を持っていました。ですが、今回サイトのレイアウトデザイン上、jQueryを使ってみて・・、いとも簡単に出来てしまいました！jQueryって凄いんですね。

それからと言うもの、jQueryについて初心者用の勉強を少し始めてみました。過去にjavaScriptをかじった経験があるものの・・、関数とか数式が良く分からなかったのですが、以下のサイト様を読んで勉強させていただいています。あまり使用頻度は多くないと思うのですが、デザイン上必要ならば、jQueryでDOMをうまく扱えるようになりたいです。

■参考サイト
・jQuery入門講座
・JavaScript・jQueryの関数について
・7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
・jQuery 開発者向けメモ - 基本・サンプル
・jQuery 日本語リファレンス