サイドバーの『読者になる』ボタンを上に移動したい(フリープラグイン編) | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。


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

旧デザインの方は、上部にあるのですが、

川上雄大のワンポイントレッスン


新デザインの方は、下部に表示されています。

川上雄大のワンポイントレッスン


やっぱり・・・
上にあると、読者登録するボタンに気づきやすかったりします。


ですので、新デザインにおいて、サイドバーの「このブログの読者」欄で『読者になる』ボタンを上部に表示する方法をお伝えいたします。


次のコードをフリープラグインに追加するとOKです。

<!--読者になる-上に移動-->
<script>
$(function(){
$('.readerRequestArea').prependTo('.readerMenu .skinMenuBody');
});
</script>

(注:フリープラグインの先頭にjQueryコードが入っていることとしています。)

なお、もうフリープラグインの最大文字数3,800文字到達していて、追加できない方は、
こちらの過去記事『アメブロ フリープラグインの外部化…Dropboxを使う編』で再チャレンジされるとよいです。


このままでもOKですが、「CSSの編集デザイン」の方は、

[CSSの編集]でCSSコードを追加して、ボタン位置の調整を行うとよいですね。

/* 読者になるボタンの位置調整 */
.readerRequestArea {
margin:5px 0 10px 0;/*上 右 下 左*/
}

margin:5px 0 10px;/*上 左右 下*/ でも同じです。)


川上雄大のワンポイントレッスン

↑上と下の茶色の部分に余白が設定されます。


こうやって私も『読者になる』ボタンを上に移動していますが、私の場合はさらにオリジナルの画像に変えています。


川上雄大


その方法は次回にお知らせしますね~^^!




以上、ワンポイントレッスンでした。


LIDS澄川・ライフデザインスクール
川上 雄大