引き続き「読者になる」ボタン絡みをやってみる。
こんなことはないだろうか？
長～い記事を読んで、
「おもしろかった！この人の続きを読んでみたい」と思ったとき、
はて？「読者になるボタン」はどこ？
『メガネ、メガネ～』と古典的なギャクばりに、ボタンを探してた・・・なんてことは。
これでは、せっかく「読んでくれる気」になった読者に申し訳ない。
チャンスとしてももったいないので、ちょとした気遣いが光る工夫をしてみる。
今回の改造では、
・フリープラグイン
・ＣＳＳ編集ページ
の２つに、コードを追加する必要がある。
で、編集開始の方法は毎回書くのは大変なので、ココの２枚目以降の画像を参考に。
フリープラグインには、以下の「呪文」を追加する。
括弧「＜＞」は入力の都合上で全角にしているが、すべて半角に読み替えてくれ。
＜!-- jQuery --＞
＜script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"＞
＜/script＞
ただし、上記をすでに追加している場合は不要。その場合は下記のみを追加する。
＜!-- 記事最後に『読者になる』を移動 --＞
＜script type="text/javascript"＞
$(function() {
$(".skinArticle").after('＜div class="readerbtn"＞＜a href="http://blog.ameba.jp/reader.do?bnm=自分のアメブロID"＞このブログの読者になる＜/a＞＜/div＞')
}
);
＜/script＞
「自分のアメブロID」部分には、ブログログイン時に使っているＩＤをそのまま入力する。
次に、ＣＳＳ編集画面で、以下の「呪文」を追加
これは、ボタンの体裁を整えるためのもの。
/* 記事最後に『読者になる』を移動 */
.readerbtn {
border:#CCCCCC 2px solid; /* 枠 */
background-color:#f3fcba; /* 中地の背景色 */
text-align:center;
padding:10px;
margin:15px 0 30px 0;
}
.readerbtn a{
color:#0000FF; /* 文字色 */
text-decoration:underline; /* 文字に下線を引く*/
font-size:18px; /* 文字サイズ */
font-weight:bold; /* 文字太さ */
}
最終的な結果はこちら。赤矢印が指す、黄色地の四角枠の部分。（IE9で表示）
間の広告が邪魔だが、それなりに目立っている。
表示するＷｅｂブラウザによっては、意図通りに表示されない場合がある。
例えば、Google Chromeの場合は、表示が崩れてしまう。
おまけとして、
色をアレコレ試すに役に立ったのがこのサイト。
「カラーピッカーで色をさがそう 原色大辞典」