第9回 3月16日(土曜日)
WEBクリエーターセミナー

jquery @ Blogger

この前学習したjquery でblogger で実装できることを考えました。


←ラベルの特定の内容だけを目立たせる

これは例えば商品一覧の中でも、オススメ商品を目立たせるためなどに使えると思います。

私のブログの記事

$("#Label1 ul>li a:contains('jQuery'),#Label1 ul>li a:contains('blogger'),#Label1 ul>li a:contains('google apps')").addClass("labelhover");

これで jQuery と blogger と google apps を含むものに labelhover という class を追加せよという意味です。


 セレクター部分を変更したら自由自在にいろいろできそう!

同じページにul liの要素はたくさんあるので、ちゃんとその前の情報の#の内容を指定することで、間違いなくラベル要素のみに色を付けられるようになりました。CSSは、こういう風に連続して書いて指定することがよくあります。

またjqueryのセレクター部分の条件は,で連続して書くことができます! ←詳しい説明

hover で色を変えています。設定したCSSの説明はこちら!リンクの色の付け方

/* ラベルのところをめだたせる */

.labelhover{background-color:#91072a;padding:1px;letter-spacing:2px;box-shadow: 0px 0px 5px 2px #ccc;}

.labelhover:hover{background-color:blue;color:white;padding:2px;}

.widget-content list-label-widget-content ul li:visted{color:#ffffff !important;font-weight:bold;}

参考 ←blogger ハック

メニューはCSSだけで基本作れます

参考サイト IE6はもう考えなくていいと思います。さすがに…

ちょっといつものところで実習してみましょう。  JSBinが動かない人はこちらもあります。

CSSは真ん中に書けます!

IE6はもう考えなくていいと思います。 これがなぜ hover した時に下のliが見えるのかを考えます。

display:none;
   
position
:absolute; アビソルートとは?
   top
:100%;
   left
:0;

基本absoluteはrelativeと合わせて使います。絶対配置の基準を定めるposition: relative

もうちょっと使える私の記事

と、いうわけですので、便利だから楽だからと言って、やたらめったらabsouteを使うと フレクシブルデザインとして考えた時に後から困ることになりますのでめったに使わないように注意します。

CSSでメニューいろいろ…参考サイト 話題のCSS3でいろいろございますのでご覧下さい。
こういう情報は日本語でもありそうですが、結局海外のサイトのリンク集だったりするのですが、基本は今日教えたことですから恐れずに…コピペしながら自分のものにしてください。

私が長年使っている menuにオシャレな加工をほどこすJS

選択しているページの色を変える この2つを組み合わせて画像でメニューを作っていた。

今はjquery とCSS3の時代ですので、もう紹介したものはいらないかもしれません。

ちょっとsexyなmenuを紹介します。


最近見つけた Bloggerのテンプレート集 すごいのでやってみてください。 こんなの作れるらしいです。
ċ
SexyDropDownMenu.zip
(32k)
さいきゆみ,
2013/03/15 19:20
ċ
Tech-Mag.zip
(62k)
さいきゆみ,
2013/03/15 19:29
ċ
contains.html
(11k)
さいきゆみ,
2013/03/15 22:25
ċ
メニュー.htm
(3k)
さいきゆみ,
2013/03/15 18:38