英語とappleとDIYと

apple製品、英語関連、DIYについて

はてなブログコピペで目立つ「読者登録」ボタン設置するカスタマイズ方法公開

Check!!!▼

スポンサーリンク

 

f:id:buchibuchi4647:20170421145937j:plain

 

はてなブログ「読者になる」ボタンをコピペのみで簡単カスタマイズしましょう。いろいろなパターンを作ってみたのであなたのサイトに合わせて選んでください。

「 読者になるボタン」を簡単にカスタマイズする手順

はてなブログの「読者になる」ボタンは初期設定のままではなんだか寂しい気がします。

f:id:buchibuchi4647:20170420210946p:plain

いろいろカスタマイズした結果、この基本に落ち着く人もいますが、せっかくなら「読者になる」ボタンをもう少し目立つようにしたいと思います。

コピー&ペーストで簡単に設定できるようにまとめていますのでよかったら変更してください。

手順1:コードを貼る場所

最初に「読者になる」ボタンをどこに設置したいのか決めてください。設置したい場所に以下のコードをコピーして貼り付けます。

たとえば、記事下の記事が終わった直後に設置したいのであれば、デザイン→カスタマイズ→記事下(1番上)に以下のコードを貼り付けてください。

注意IDはあなたのブログIDを入力、ブログURLはhttp://を除いたブログのURLを入力してから貼付けるようにしましょう。

手順2:CSSの設定

デザイン→カスタマイズ→デザインCSSの設定にコードを貼り付けます。これから紹介する読者登録ボタンの中から好きなタイプを選んで、CSSに貼り付けてください。

パターン1:カーソルを合わせると枠が変化

f:id:buchibuchi4647:20170421133916p:plain

カーソルを合わせると↓↓↓

f:id:buchibuchi4647:20170421134037p:plain

コードは以下になります。

枠の色は黒に設定しています。好みで変更可能です。わからない方はコメント欄より質問ください。

パターン2:カーソル合わせると色が変化

f:id:buchibuchi4647:20170421140942p:plain

最初は背景が白です。カーソルを合わせると↓↓↓

f:id:buchibuchi4647:20170421141052p:plain

このように背景色が変わります。とりあえずは白→黒ですが好みで設定可能です。

CSSコードは以下になります。デザインCSSに貼り付けてください。

 

パターン3:オシャレに動きのある変化

これは僕のお気に入りデザインです。

f:id:buchibuchi4647:20170421142252p:plain

カーソルを合わせると↓↓

f:id:buchibuchi4647:20170421142330p:plain

上から背景が降ってくるように変化します。

説明が難しいので、僕の「読者登録」を参考してください。

 

 

CSSコードはこちらです。

枠やフォントサイズも大きめに設定しています。理由は特にありません。ただの遊び心です。(すいません)

文字や枠の大きさ変更方法

font size 20pxの数字の値を変更すると文字の大きさを設定できます。

width(横幅)、height(高さ)の数字の値を自由に変更して好みの大きさに設定できます。

おわりに

今回は「読者になる」ボタンを3パターン紹介しました。あなたの好みやサイトに合わせて選んでください。この記事を最後まで読んでいただけたら「読者登録」していただけるとありがたいです。

ありがとうございました。