このjQueryを勉強したというので書きましたが、blogger のCSSをjQueryで書き換えるというのは便利だなとだんだんと思えるようになってきましたので、ここに整理して記録していくことにします。 bloggerの設定が判明するにつれて増えていくでせう。
*liの中でb設定のところを赤にする。
現代数学社様でやってみました。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$('li > b ').css('color','red'); // >←は子セレクターと言います。
});
</script>
以下
jqueryの$(function(){ ｝）；部分は省略します。
*本文をすべて太文字に
高齢者に読みやすいように近畿宮崎県人会ブログに設定してみました。
<script type='text/javascript'>
$(function(){
$('.post-body').css('font-weight','bold');
});
</script>
-->
・好き放題にfont 130%とかspan で設定してくるので110％に統一してみた
ネタ元…
<script type='text/javascript'>
$(function() {
$('span').filter(function()
{return ($(this).css("fontSize") == "130%");}).css("fontSize","110%")
});</script>
が、思い直して…↓以下のように書きました。
*************************************
<script type='text/javascript'>
$(function(){$(".post-body").css("font-weight","bold").css("font-size","110%"); });
$(function() {
$('span').filter(function()
{return ($(this).css("fontSize") == "130%");}).css("fontSize","100%")
});</script>
*************************************
post-bodyが統一で110％大きくなり、それに対して、spanで130％を設定したものが100％に設定されるため、全部が110％になります。
こうやってみると、ブログの運用にケッコウjquery使えるなと…
jQueryのcssで!importantが効かない場合の対処法とかもあるみたい…これだとうまく動かなかったけど。
上へ
今はもうないブログだけど…。
トップにtextのウジェットを入れて、そこのtext内にdiv要素を書き込みます。 SEO対策でh2をここに書き込みますが、bloggerはそれを表に出さないようにしている。ですがログイン状態なら簡単に入り加工ができます。
そこにいろいろ設定してみましたが、fadeInとかできんだろうかと思いましたが、できませんでした…そうかぁ。ではなく、最初のcssにdisplay: none;を設定してないとfadeInしないんですね！
背景画像だがredとかじゃなく#で始まるのは以下のjavascriptの書き方をしないと反映されなかった気がする…
**************************************************************************
<script type='text/javascript'>
$(function(){
$('p.cn ').css('text-align', 'center').css('margin-top','-10px').css('letter-spacing','1px');
$('p.top').css('text-align', 'center').css('padding-top','-10px').css('font-weight','bold');
$('#topcont').css('padding','2px').css({ backgroundColor:"#999933"}).css('width','846px');
});</script>
**************************************************************************
#topcont はcss設定の一番下にdisplay: none;を設定しておく。
さらにこの#topcontをすべて表示させてからfadein表示させるというのは… setTimeout
とういうことで以下を追加してみました。
$(function(){setTimeout(function(){$('#topcont').fadeIn('100').fadeOut('100').fadeIn('100').fadeOut('100').fadeIn('100');}, 2000);});
fadeInの数字はある程度まですると同じになりますね。 上部の日付のヘッダーの上に緑の（#999933）バックの部分が2秒後にチカチカ？します。 チカチカという感じじゃないので、なんとかならんかなぁと、fast にしてみたら、ちょっとそれらしく…。hideになると右上から飛び出す感じになる。おもしろいわぁ。
delayというのもありますが、これは前の動作に対して設定するものらしくそれではうまく動かなかった。
まぁ。ここにあるのように、普通にcssだけの設定ならアドバンスでcssの追加をしたほうが楽ですが、絞り込んでそれだけを変更しろとか、アニメ設定ができないとjqueryでやる意味がないよね。
ちなみにSEOですが、bloggerもgoogle siteと同様意識してh1 h2を入れないととんでもないところがh3とかになっています。seoに確かにgoogle blogger 強いですが、h1～h3くらいはきちんと入れてないと最後まで上がりきれないと思います。
contain を使って ラベルの中でも指定した言葉だけに色を塗りたい
セレクターをつなぐのはコンマですが、ここまでできる！
$("#Label1 ul>li a:contains('jQuery'),#Label1 ul>li a:contains('blogger'),#Label1 ul>li a:contains('google apps')")
.addClass("labelhover");
↑このようにすることで このブログの右側のラベルにクラスを設定し、色をつけました。
Box-shadow:0px 0px 5px 2px #ccc; というCSS3をつけて周囲にぼーっとした枠もつけてみました。
個人的によく見るブログのラベルをぱっとわかるようにしたいというのがあり…。でもvisited の色をホワイトにjquery ではできないようで… hover とか visited をセレクターで指定するのはできないのねと。
最近見つけました とても便利な検証ツール jsbin.com 超便利！JavaScript書いてすぐ検証できるので仕事が楽になりました！ こういのいろいろあるみたいですね。 知らなかったわ。
bloggerのCSS設定の名前メモ
h1.title がタイトルなので、リンク先のようにアドバンス設定で細かい設定を入れるとよい。
.post h3 投稿のタイトル。フォント設定とかして他と変えるとメリハリがつく。
メニューバーだけの設定は#PageList1 です。
.columns-inner{margin-top:-34px;} とすることによって、上のガジェットと下のコンテンツの間を縮めることができるようです。
.date-header 日付のところ
.sidebar h2 サイドバーガジェットのタイトル
一番下のパワードbywidgetを消すのは… id='Attribution1' を探します。
ものすごい便利な一覧を発見！
**************************h1.title がタイトルなので、リンク先のようにアドバンス設定で細かい設定を入れるとよい。
.post h3 投稿のタイトル。フォント設定とかして他と変えるとメリハリがつく。
メニューバーだけの設定は#PageList1 です。
.columns-inner{margin-top:-34px;} とすることによって、上のガジェットと下のコンテンツの間を縮めることができるようです。
.date-header 日付のところ
.sidebar h2 サイドバーガジェットのタイトル
一番下のパワードbywidgetを消すのは… id='Attribution1' を探します。
ものすごい便利な一覧を発見！
こちらの先生にご連絡をどうぞ…
安く書いてくれますよ～～！
偶然見つけた bloggerのカスタマイズチュートリアル ここまで行きたいね～。 誰がこれをブロガーと思いますでせうか！
ぐるぐるもどるボタン！かっこいい～つけたい～
このサイトで公開されているのをいいなぁと眺めて発見。このjqueryってgoogleにあるのね。
http://b-templates4u-com.googlecode.com/svn/jquery.nivo.slider.pack.js
知りませんでした。NIVO Slider いいじゃん！楽じゃん！
0 コメント :
コメントを投稿
コメントありがとうございます。