サイドバー 「読者になる」ボタンのカスタマイズ | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

$やさしいアメブロカスタマイズ!と女性タレント画像




アメブロの新しいカスタム可能デザイン 【CSS編集用デザイン】では、

サイドバーの読者欄にある 『読者になる』ボタン が読者欄の下になりました。
これは凄く残念な事です。

上側にあった方が気が付いてもらいやすいです。
このボタンの移動の仕方です

こちらをコピーして、フリープラグインに貼り付けてみてください。 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".readerRequestArea").insertBefore(".readerHeader");
}
);
</script>


次にCSSにこちらを貼り付けると見やすくなります。
 

/*見やすく、内藤式↓*/
.readerRequestArea {
margin-top:5px!important;
margin-bottom:10px;
}



次に、このボタンをオリジナルのものにする方法です。




【CSS編集用デザイン】で、『読者になる』ボタンを変えるやり方です。

『読者になる』ボタンは、サイドバーの

プロフィール

「このブログの読者」欄の「読者になる」ボタンをのようにカスタマイズする方法です。


~~



/*↓このブログの読者 の読者になるボタン*/
.readerMenu .readerBtn{
background:url(画像URL) no-repeat;
display:block;
height:80px; /*高さ*/
width:182px; /*幅*/
text-indent:-9999px;
margin:3px auto;
}


画像URLを変更し、高さ、幅を調整してCSS編集で、上のコードを末尾に追加します。
(ボタン画像は作っておいて、アップロードしておきます。)←CSS編集の画像フォルダーに。


※『このブログの読者』 をワイドサイドバーに設置するのか、ワイドではないサイドバーに設置するかで幅が異なりますので注意してください



以上、サイドバーの「読者になる」欄の「読者になる」ボタンを上に移動する方法と、オリジナルにする方法を内藤さんのサイトから引用させて貰い、ご紹介しました。

あと、理由は解らないのですが、内藤さんのサイトでは、フリープラグインに貼り付けるタグの山括弧(<)←がそのまま、特殊文字&lt;で表記されてました。
このまま、貼り付けると、反映、作動しないと思います(たぶん;汗)のでご注意ください。

参考までに、

&lt;⇒<

&gt;⇒>


に書き換えれば、OKだと思います。

参考になれば、うれしいのですが・・(;^_^A

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス