Blogger で jQuery slideToggle toggleClass を使う : たまさかANDROID

Androidメインで投稿している、当方のブログには適当ではないですが、サイトを少し弄ってみた。

触った部分は両sidebarの追加したガジェットのタイトル部分

タイトル（検索、アーカイブ、ラベル、人気の投稿など）をクリックすると、jQueryのslideToggleが動作して、表示、非表示になり、toggleClassでclass属性を同タイトルタグ（<h2>）に追加し、CSSでbackground-imageを変えるというもの。

テンプレートからのカスタマイズ

当サイトはbloggerテンプレートシンプルの一番左にあるテンプレートをカスタマイズして作っています。
始めた当初は,少しカスタマイズすると、ぐちゃぐちゃなレイアウトになったりと、ひどい物でしたが、色々と遊んでいると少しずつなんとなくわかってきて、今では、デザイン、レイアウト、配色そっちのけで、この有様。
素人が投稿していますので参考にすることはないとは思いますが、Bloggerをカスタマイズするときは、別途何かしらバックアップを取っておくとよいかもしれません。ここも恐縮ですが、自己責任でお願いします。

今回やったこと

レイアウトから、ガジェットを追加すると、左側であれば<aside><div id="sidebar-left-1">、右側であれば<aside><div id="sidebar-right-1">タグ以下に同ガジェットが<div id="****">として追加されます。今回やったことは、その追加された<div id="****">のタイトルとなる<h2>タグにカスタマイズしたjQueryとCSSをきかせてただけ。
当然ｊQueryを動作させるためにjQuery.jsを<head>内に記述していることが前提。

ガジェットを追加してみる

レイアウトからガジェットを追加を選び、HTML/javascript、ラベルなどを選ぶ

HTML/javascriptの追加画面ですが、とりあえずタイトルに何かしらを入力後、保存し、配置したい場所に、ドラッグ。変更を保存で、ブログページに追加されている。

この追加されたガジェットは、どう配置されているかというと、先ほども触れましたが”左側であれば<aside><div id="sidebar-left-1">、右側であれば<aside><div id="sidebar-right-1">タグ以下に<div id="****">として追加される。”

****の部分は各ガジェットによって付与される決まった属性があるようです。それが以下

検索ボックスだと: id="CustomSearch1"
ラベルでだと: id="Label2"
翻訳だと: id="Translate1"
アーカイブだと: id="BlogArchive1"
人気の投稿だと: id="PopularPosts1"

などのid属性が付与された<div>タグとなる。

****の属性が付与された<div>タグの中身はというと
ラベルを例に


<h2>ラベル<h2>
<div class="widget-content list-label-widget-content">
<ul></ul>
</div>

な感じ

<h2></h2>内の”ラベル”はガジェット追加時にタイトルを入力した文字が入る。

<div id="Label2">内の<h2>と<div>に対してscriptを記述

ターゲット<div id="Label2">内の<h2>と<div class="list-label-widget-content">に対してscriptを記述する。
jQuery slideToggle toggleClassのscriptは</body>の直前に配置。
テンプレート→HTMLの編集をクリックして編集画面にGO

#Label2 h2 をクリックすると .list-label-widget-contentが表示され .list-label-widget-contentが表示されたら #Label2 h2 タグに class属性 swich を追加する .stop()は繰り返しをさせないために記述
保存後、サイトを表示させて”ラベル”をクリックして、slideToggleが動作しているかどうかを確認。
動作を確認したら次の手順。

CSSを追記する

追加したラベル（ガジェット）の<h2>と<h2 class="swich">にCSS設定を追加してみる。
テンプレート→HTMLの編集をクリック
CSSが記述している項目の一番下の行あたりに追記していく。（CSSの記述が隠れている場合があるので注意、分からない場合は、Ctrl+F で CSS 適当なid 等を検索すると表示される）

背景画像に使用する2種類の画像のURLを控えておき下記****に記述する。

.list-label-widget-content {
　　display: none;
}

#Label2 h2 {
    background-image: url('http:******');
    color: #444;
    text-shadow: 1px 1px 1px #fff;
}
#Label2 .swich {
     background-image: url('****');
　　 color: #fff;
　　 text-shadow: 1px 1px 1px #444;
}

記述が終わったら保存して、表示させてみる。