【はてなブログ】目立つ「読者登録」ボタン設置・簡単コピペカスタマイズ方法
congerdesign / Pixabay

はてなブログと言えば「読者になる」ボタン。本日はコピペのみで簡単に読者になるボタンをカスタマイズしましょう。

初期状態ではちょっと物足りないって感じているあなたにおすすめ!!いろいろなパターンを作ってみたのであなたのサイトに合わせて選んでください。

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

congerdesign / Pixabay

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

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パターン紹介しました。あなたの好みやサイトに合わせて選んでください。

おお!ちょっと参考になったよ!!!なっていただけましたでしょうか?もしそうであれば少しでも多くの人に届きますようにシェアしていただけると助かります。

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

 

企業向けHP/個人向けブログ|無料制作サービス3月31日まで

ホームページ・ブログ制作に高額料金を払っていませんか?

経費をかけるなら違うところでかけましょう。フリーランス・個人事業主だからこそ無料でできるサービス。もちろん、無料だからといって手を抜かないです。多数の企業様とのご依頼経験を今回は無料でご提供させていただきます。

ただし、コチラで指定のサーバーに契約していただ人のみ限定のサービスとなります。たったこれだけの条件でHPやブログを入手できます。サーバーがないとブログもHPも動かないのはご存知のはず。だったらおすすめのサーバーでいいのでは?

ということで3月31日までの期間限定となりますが、じゃんじゃん依頼お待ちしております。

※現在、多数のご依頼をいただいております。

依頼をご希望の方に関してはお問い合わせよりご連絡ください。基本即日対応させていただきますが、納期につきましては多少前後することがありますのでご了承ください。

※初めてホームページを依頼するという方も安心してご相談くださいませ。

初めてで分からないのはお客様皆様ご一緒です。まずはお気軽にDMくださいませ。

おすすめの記事