どうも、うふのわーるです。
アメブロのカスタマイズシリーズ第2段
ということで、勝手にシリーズ化してみましたが(笑)
以前はヘッダー画像を
オリジナルのものに差し替える方法を書きとめました。
今回は自分のアメブロの人気に大きく影響してくる
読者登録をしてもらうための「読者登録ボタン」を
記事本文の上のスペースに配置する方法について。
いろいろな方々のブログを拝見してみても
やはり、しっかり作りこんでいるブログには
往々にして「読者登録ボタン」がついているように感じます。
まあ、このボタンの効果については
わたくし、うふのわーる自身まったく未検証なので
付いていないよりは、いいのではないか
という感覚でしかありません。
ですので
「ボタン付けたけど集客できましぇ~ん」という苦情は
受付かねますのであしからず(笑)
【アメブロ読者登録ボタンの作り方&配置方法備忘録】
↓マイページ右上ボタンから「プイラグインの追加」をクリック
↓「フリープラグイン」のタブをクリックし
空欄スペースに下記(※1)をコピー&ペースト
(※1ここから) 赤字部分
<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">google.load('jquery', '1.6.2');</script><script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script><script type="text/javascript">$(function(){var r = $('<br><div class="readercheck"><a href="http://blog.ameba.jp/reader.do?bnm=nonononoirman">うふのわーるブログの読者になる(クリック)</a></div>');$('.globalLinkArea:first').after($(r).clone());$('.globalLinkArea:last').before($(r).clone());});</script>
(※1ここまで)
そして、上記画像内の赤枠で囲ってある部分が
読者登録ボタンに表示される文言になるのでお好みで変更。
それと、青下線のところは各自のブログIDを入力。
私、うふのわーるのブログであれば
http://ameblo.jp/nonononoirman/
の赤字の部分がIDですね。
↓また、マイページ右上のメニューからフリースペースの編集をクリック
↓空欄の中に下記(※2)の部分をコピー&ペーストし保存
(※2ここから)赤字部分
<style type="text/css"><!--.readercheck{margin:0 auto;padding:0;width:330px;height:45px;}.readercheck a{text-align:center;margin:0;padding-top:5px;width:315px;height:25px;box-shadow: 5px 5px 5px #999999; border-radius: 5px;font-size:15px !important;font-weight:normal !important;background:#cccccc;/* ←通常時のボタンの色 */color:#666666 !important;/* ←通常時のボタンの文字の色 */text-decoration:none !important;display:block;}.readercheck a:hover{background:#993300;/* ←マウスが乗った時のボタンの色 */color:#FFFFFF !important;/* ←マウスが乗った時のボタンの文字の色 */}--></style>
(※2ここまで)
↓ボタンや文字の配色決め
(※2)の部分を貼り付けたら
上記図の①をクリックし、カラーパレットを表示させます。
マウスを希望のカラーのところに合わせると
③部分に6ケタの英数字コードが表示されるので
希望の色のコードを覚えておきます。
↓下記4か所のコードを希望のカラーコードに変更し保存
上記図の赤線分4か所を
それぞれ希望のカラーコードに変更します。
・通常時のボタンの色
・通常時のボタンの文字の色
・マウスが乗った時のボタンの色
・マウスが乗った時のボタンの文字の色
↓またまたマイページ右上から、「配置設定」をクリック
↓下図のように「使用しない機能」から「使用する機能」へ
フリープラグインをドラッグ&ドロップ(掴んで離す)し保存
以上。
最後に自分のブログを目視確認して
読者登録ボタンが表示&機能していれば成功。
プラグインを追加した影響か
若干ページが重くなった気がしますが
見栄え&ユーザービリティ(?)重視ということで
当面はこの仕様で続けてみたいと思います。
「ページ読み込みが遅い」というご意見が多くなったら
要検討ですかね。
空欄スペースに下記(※1)をコピー&ペースト
(※1ここから) 赤字部分
<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">google.load('jquery', '1.6.2');</script><script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script><script type="text/javascript">$(function(){var r = $('<br><div class="readercheck"><a href="http://blog.ameba.jp/reader.do?bnm=nonononoirman">うふのわーるブログの読者になる(クリック)</a></div>');$('.globalLinkArea:first').after($(r).clone());$('.globalLinkArea:last').before($(r).clone());});</script>
(※1ここまで)
そして、上記画像内の赤枠で囲ってある部分が
読者登録ボタンに表示される文言になるのでお好みで変更。
それと、青下線のところは各自のブログIDを入力。
私、うふのわーるのブログであれば
http://ameblo.jp/nonononoirman/
の赤字の部分がIDですね。
↓また、マイページ右上のメニューからフリースペースの編集をクリック
↓空欄の中に下記(※2)の部分をコピー&ペーストし保存
(※2ここから)赤字部分
<style type="text/css"><!--.readercheck{margin:0 auto;padding:0;width:330px;height:45px;}.readercheck a{text-align:center;margin:0;padding-top:5px;width:315px;height:25px;box-shadow: 5px 5px 5px #999999; border-radius: 5px;font-size:15px !important;font-weight:normal !important;background:#cccccc;/* ←通常時のボタンの色 */color:#666666 !important;/* ←通常時のボタンの文字の色 */text-decoration:none !important;display:block;}.readercheck a:hover{background:#993300;/* ←マウスが乗った時のボタンの色 */color:#FFFFFF !important;/* ←マウスが乗った時のボタンの文字の色 */}--></style>
(※2ここまで)
↓ボタンや文字の配色決め
(※2)の部分を貼り付けたら
上記図の①をクリックし、カラーパレットを表示させます。
マウスを希望のカラーのところに合わせると
③部分に6ケタの英数字コードが表示されるので
希望の色のコードを覚えておきます。
↓下記4か所のコードを希望のカラーコードに変更し保存
上記図の赤線分4か所を
それぞれ希望のカラーコードに変更します。
・通常時のボタンの色
・通常時のボタンの文字の色
・マウスが乗った時のボタンの色
・マウスが乗った時のボタンの文字の色
↓またまたマイページ右上から、「配置設定」をクリック
↓下図のように「使用しない機能」から「使用する機能」へ
フリープラグインをドラッグ&ドロップ(掴んで離す)し保存
以上。
最後に自分のブログを目視確認して
読者登録ボタンが表示&機能していれば成功。
プラグインを追加した影響か
若干ページが重くなった気がしますが
見栄え&ユーザービリティ(?)重視ということで
当面はこの仕様で続けてみたいと思います。
「ページ読み込みが遅い」というご意見が多くなったら
要検討ですかね。