jQueryにお世話になってみる

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

難易度表示付き記事一覧はこちらです

今回はjQueryにお世話になってみたいと思います。

jQueryというのは、HTML文書の解析、イベントハンドリング、アニメーション、Ajaxとの相互利用を単純化するウェブ開発に役立つ高速・軽量なJavaScriptのライブラリー

だということです。

jQueryってのは私のイメージとしては、ブラウザがページの内容を分析するので、その分析にのっかって、「ここ！」とか、「あそこ！」とか言って、好きなもので置き換えたり、挿入したり、スタイル設定したりできる機能って感じですかね。

まだ私自身、実務レベルで正確に使用できるほど勉強がすすんでいませんので、当記事では、jQueryを使って当サイトで実験中の事柄についてご紹介してみたいと思います。

以下、短い念仏です（笑）→ご活用される場合は、当方は一切責任を終えませんので、自己責任でお願いいたします。

jQueryを使うには

アメブロのCSS編集可能なテンプレートでは（他のテンプレートは詳しく見ていません）、デフォルトではjQueryを使える状態にはなっていません。ですので、jQueryを読み込みそれを活用するには、フリープラグインを使わざるを得ません。また、jQueryは、prototype.jsと競合してしまうようですので、フリープラグインの文字数をすでに限界まで使っている方および、prototype.jsを使用している方は今回の記事を活用できない可能性がありますのでご注意ください。

記事の最後に「人気投票」のブロックを挿入する

アクセス対策のために人気ブログランキングをつかっている方、結構いらっしゃるんじゃないでしょうか？例に漏れない私は、各記事を読んでいただいた方に投票してもらえたらうれしいなぁ～なんて思い、各記事の最後に「人気投票」ブロックを挿入するようにしています。トップページでは、最新の記事の最後にのみ表示されます。

HTML部分の説明

いま背景をピンクにしている下のブロック部分ですね。

この部分のHTMLソースコードは、以下のようにしています。

<div class="b_ranking clearfix">
<p class="b_banner">
[人気ブログランキングのソースコード]
</p><p>
[もし記事が気に入ったら、クリックいただければうれしいです
<img alt="ニコニコ" src="http://stat.ameba.jp/blog/ucs/img/char/char2/139.gif" width="16" height="16" />　
またのご訪問、お待ちしております<img alt="音譜" src="http://stat.ameba.jp/blog/ucs/img/char/char2/038.gif" width="16" height="16" />]
</p></div>

黄色い文字の行、

[人気ブログランキングのソースコード]

を、人気ブログランキングで発行されたソースコードで置き換えます。詳しくは「人気ブログランキング」に登録すると分かると思いますが、この部分は、選択したバナーに応じて、各個人ごとに違ってきます。別に人気ブログランキングでなくて、他の画像でも問題ないです。別のランキングのものでもかまいません。ただ、画像が極端に大きかったり小さかったりする場合は、次に記述している文章の分量調整をしてくださいませ。

で、同じく黄色の行、

[もし記事が～]

の部分は、お好きな文章をお入れください。まったく同じでいい場合は、黄色い箇所の最初と最後の[]は両方削除してください。メッセージを変更する場合は、この部分をそっくり差し替えてくださいね。

元のソースでは、顔文字を使用してますので、同様に顔文字を使用して他の文章にしたい場合は、Amabloで普通に記事を書いてみて（HTMLタグを表示以外で）、それを、「HTMLタグを表示」に切り替えてソースをまるまるコピー＆ペーストすればOKです。ただ、その際にという文字が自動的に付け加えられることがありますので、もしあったら削除しましょう。レイアウトに応じて、文字分量は調整してください。バナーの右側に文章が表示されるようになっているのですが、3行目はバナーの下側にも文字が回り込みますので、格好わるいです。ですから、文字分量は調整してくださいね。

以上が第一ステップ。次が第二ステップです。

<script type="text/javascript" src="http://stat.ameba.jp/common_style/js/library/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript">$(function(){$(".b_ranking").insertBefore(".articleThemeListArea");});</script>

先ほど編集したソースコードの下に、上記のソースコードを丸々はりつけます。これで第二ステップは終了。次は第三ステップです。

CSSの設定

スタイルシート（CSS）の設定は、次のようにしています。

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.b_ranking {
	margin: 20px 0 10px 0;
	padding: 5px 10px;
	border: 1px solid #666666;
	background: #ffdbe7;
}
.b_ranking p.b_banner {
	float:left;
	padding-right: 10px;
}

外側の境界の色（borderと背景の色（background）を設定している黄色文字部分は、お好きに設定してください。

色の設定方法がわからない場合は、「CSS　色」でgoogle検索してみてください。色見本と設定の仕方を解説しているサイトがたくさん見つかると思います。

フリープラグイン、CSSをそれぞれの変更作業ができれば、作業は完了です。

「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座

「HTMLなんて分からないけど、アメブロを好きなデザインにしたい！」そんな方の思いにも答えられるサイトを目指しています

jQueryにお世話になってみる

jQueryを使うには

記事の最後に「人気投票」のブロックを挿入する

HTML部分の説明

CSSの設定