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

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

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

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

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

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

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

 

当サービスお得情報紹介

当サイトのサービスはサイト作成だけでなく修正・カスタム・アクセスアップだけに留まらず、初心者向けに副業・アフィリエイトのノウハウも紹介しております。少しでも購入者が満足できるようなサービス提供を提供中。

購入して終了ではなく….サービス終了後も定期的なやりとりを通じてお客様の相談・依頼をいただくことが一番重要だと思っております。長い付き合いになると思いますが、当サービスを利用して会社の利益アップ・脱ノウハウコレクターとなりませんか?

 

学生・主婦の方から社会人の方まで幅広くご依頼をいただいております。

上記のサービスはいずれも好評です。特にアフィエイトをしている人でなかなか成果の出ない人や初心者で何からすれば良いのかわからない人にはおすすめのサービスとなっております。

サービスご依頼ご希望の方はサイト内に設置「お問い合わせ」フォームより依頼・または下記よりご連絡ください。当サービスはプロフィールにもありますよう[ランサーズ・スキルクラウド・ココナラ」などCtoCサービスで1000件以上の販売実績があります。常にお客様の満足できるサービスを意識して運営しています。

現在ココナラでおすすめの案件

ここならでは現在全てのサービスを半額以下で販売中でございます。
コンテンツ副業「再販権・テンプレ付き」販売します 副業続かない・初心者「セールスレター・再販権付きサービス」
特におすすめの案件がコチラ!これ弊社の記載が悪いのか?あまり売れてないですが、絶対におすすめの案件です。なぜ売れないのか?逆に心配してます。おそらくココナラで1番の穴場案件です。この案件だけで絶対に成功します。

そのほかの安定した人気サービスもぜひご利用お待ちしております。

最新情報をチェックしませんか?