ココログ画面カスタマイズ（まとめ）

日本ブログ村のバナー貼りから始まったココログ画面のカスタマイズが、自分の中では一段落しました。

個別の記事では判りにくいところもあるので、区切りとしてここで纏めておきます。

今回のカスタマイズで使ったプログラム言語はJavaスクリプトのJqueryライブラリです。

【何故Jqueryライブラリなのか？】
ブログ村のバナー貼りの参考にさせていただいたサイトでJqueryを使った記事を見て、非常に少ないプログラム行数で実現されていたのに驚いたことがきっかけで、そのまま、Jqueryを使ってカスタマイズを行いました。

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript">//Jqueryを動かすライブラリ</script> <script type="text/javascript"> //facebookいいねボタン作製 //<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fanocora.cocolog-nifty.com%2Fblog%2F2014%2F01%2Ffacebook-3-229b.html&amp;width=105&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:105px; height:21px;" allowTransparency="true"></iframe> //分割_1 var myFb_1 ='<iframe src="//www.facebook.com/plugins/like.php?href=' //分割_2 var myFb_2='&amp;width=105&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:105px; height:21px;" allowTransparency="true"></iframe>' //twitterボタンの後への追加処理 $(function() { $('.entry-footer-share').append(function () {return myFb_1+$('a[href]',$(this)).attr('data-url')+myFb_2; }); }); </script> <script type="text/javascript"> //ブログ村用バナー作製 //クリックのお願い var myMe ='<FONT size="-2">　面白かったら、クリックをお願いします。→</FONT>'; //自転車修理・整備バナー設定 myMe =myMe+'<a href="http://cycle.blogmura.com/cycle_service/" target="_blank"><img src="http://cycle.blogmura.com/cycle_service/img/cycle_service88_31.gif"  width="80" height="25" border="0" alt="にほんブログ村 自転車ブログ 自転車 修理・整備へ" /></a>'; //川越情報バナー設定 myMe =myMe+'<a href="http://localkantou.blogmura.com/kawagoe/" target="_blank"><img src="http://localkantou.blogmura.com/kawagoe/img/kawagoe106_24.gif" width="80" height="25" border="0" alt="にほんブログ村 地域生活（街） 関東ブログ 川越情報へ" /></a>'; //twitterボタンの後への追加処理 $(function() { $('.entry-footer-share').append(myMe); }); </script> <script type="text/javascript"> //ボタンエリアを記事の直後に移動 //ボタンエリアを移動 $(function() { $('.entry-footer').slice(0,1).insertAfter('.entry-body:first');//クラス名がentry-bodyの最初の要素を取得 }); </script> <script type="text/javascript"> //ボタンエリアの背景を色付け $(function() { $('.entry-footer').css('background-color','#f5e8ff'); }); </script> <script type="text/javascript"> //ウェブページのリンク先を外部のホームページに変更 $(function() { //対象要素を選択 var myObj_1 = $('h2:contains("ウェブページ")').parent('.module-inner');//h2タグのクラス名(module-inner)の親要素を選択 var myObj_1 = $('a[href]',myObj_1);//href属性を持つaタグを選択 //リンク先を外部ページに変更 $(myObj_1).attr('href','http://minami373373.web.fc2.com/anocora/newpage1.html'); //新しいページで開く属性の追加 $(myObj_1).attr('target','_blank'); }); </script> <script type="text/javascript"> //自転車出張修理の外部リンクを新しいページで開く処理 $(function() { //対象要素を選択 var myObj_2 = $("h2:contains('自転車出張修理')").parent(".module-inner");//h2タグのクラス名(module-inner)の親要素を選択 var myObj_2 = $('a[href]',myObj_2);//href属性を持つaタグを選択 //新しいページで開く属性の追加 $(myObj_2).attr('target','_blank'); }); </script> <script type="text/javascript"> //facebookへのリンクを新しいページで開く処理 $(function() { //対象要素を選択 var myObj_3 = $("h2:contains('facebook')").parent(".module-inner");//h2タグのクラス名(module-inner)の親要素を選択 var myObj_3 = $('a[href]',myObj_3);//href属性を持つaタグを選択 //新しいページで開く属性の追加 $(myObj_3).attr('target','_blank'); }); </script>

少し、以前の記事と変わっているスクリプトもあります。

１．ライブラリの指定
２．facebookのいいねボタン
３．ブログ村のバナー
４．ボタンエリアの移動
５．ボタンエリアの色付け
６．ウェブページのリンク先変更
７．外部リンクを新しいページで開く処理２件

の順で並んでいます。

最初のライブラリーは必須ですが、それ以外は、単独で動くようにしています。
<script type="text/javascript">・・・</script>
で一単位です。

Jqueryは初挑戦だったので、まだ最適ではないかもしれませんが、動作についてはIE8とGoogleChromeで確認しています。

デザインやパーツの配置が変わっても、動くよう、タイトルや特定の要素を基準に要素、属性を取得しています。

ブログに反映するには、ブログ村バナー貼り -2で記事にしたとおり、ブログのサブタイトルに貼ればＯＫです。

言葉の定義に慣れないと、とっつきにくいですが、ＷＥＢでの情報も豊富で慣れればいろんなことが出来る面白い言語？です。
是非挑戦して、ブログ画面をユニークにしてください。

もしうまく動かないときは、コメントいただければ、調査訂正してお返しします。