「読者になる」ボタンをカスタマイズ【全行程写真付きで初心者でも簡単】【はてなブログ】
はてなブログで、初期設定の「読者になる」ボタンが目立たない…。
という人は、もっと目立つ「読者になる」ボタンを設置してみましょう！
この記事では、デフォルトだと無機質な「読者になる」ボタンを
もっと目立つボタンにカスタマイズする方法を説明します🌹
私はこれから紹介する読者になるボタンに変えてから、読者登録者数が６０人増えました😊
登録してくださった方、ありがとうございます🌹
目立つ「読者になる」ボタンの設置方法
「デザイン」
まず、ダッシュボード画面の「デザイン」を選択します。
「カスタマイズ」
次に、レンチマークの「カスタマイズ」をクリックします。
「デザインCSS」
そして、カスタマイズ欄を下にスクロールすると出てくる「デザインCSS」を選択して開きます。
コードを貼り付け
デザインCSSの白い枠を一度クリックすると編集画面が拡大するので、そこに以下のコードを貼り付けます。
/* 2018-06-02 */
/*
* 読者になるボタン
*//*共通の読者ボタンの設定*/
.hatena-follow-button {
font-size:15px; /*文字の大きさ*/
border: 0px !important; /*枠線なし*/
width: 100px; /*ボタンの横幅*/
height: 30px; /*ボタンの縦幅*/
text-align: center; /*文字を左右の中心に*/
vertical-align: middle; /*文字を上下の中心に*/
padding: 4px 10px !important; /*上下に4px 左右に10pxの隙間*/
}
/*読者の人 通常時*/
.hatena-follow-button.subscribing {
box-shadow: 0 2px 4px rgba(0,0,0,.4); /*影をつける*/
background-color:white; /*ボタンの色*/
border: 1.2px solid #a9a9a9 !important; /*薄く枠線を描いてあります*/
}
/*読者の人 マウスを重ねたとき*/
.hatena-follow-button.subscribing.hover {
width:100px; /*調整のためいれてます*/
top: 2px; /*ボタンを下げる*/
box-shadow: none; /*影をなくす*/
}
/*読者じゃない人 通常時*/
.hatena-follow-button.unsubscribing {
color:white !important; /*文字の色*/
background: #3F4146; /*ボタンの色*/
box-shadow: 0 2px 4px rgba(0,0,0,.4); /*影をつける*/
}
/*読者じゃない人 マウスを重ねたとき*/
.hatena-follow-button.unsubscribing.hover{
background: :#F57A8F; /*ボタンの色*/
color : white !important; /*文字の色*/
margin-top: 2px; /*ボタンを下げる*/
box-shadow: none; /*影をなくす*/
}
.hatena-follow-button-box .subscription-count-box {
margin: 0 0 0 6px!important;
top:-2px;
}
/*読者人数の部分*/
.hatena-follow-button-box .subscription-count {
height: 26px;
line-height: 26px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:1px 10px 1px 10px;
}
コードはこちらの記事を参考にしています➡
はてなブログ［読者になる］ボタンをカスタマイズ - はてなブログのSEO対策
ちなみにこのコードをデザインCSSに貼り付けると、現在の私のブログと全く同じデザインの読者ボタンになりますので、オリジナリティのある「読者になる」ボタンが良い人はさらにカスタマイズを加えてみましょう🌹
カスタマイズ方法
色を変える
ボタンの色や文字の色を変更したい場合、コード内の
/*文字の色*/
/*ボタンの色*/
の左隣にあるカラーコードを変更しましょう^^
変えたい色のカラーコードはこちらのサイトを使うと簡単に見つけられます➡
大きさを変える
読者ボタンの文字・ボタンの大きさを変えたい場合、コード内の
/*文字の大きさ*/
/*ボタンの横幅*/
/*ボタンの縦幅*/
のそれぞれ左隣にある、○○pxの数字の部分を変えてみましょう。
数字を大きくすると文字・ボタンサイズが大きくなります。
この設定方法の注意点
今回紹介した「読者になる」ボタンの設置についての注意点が１つあります。それは、
この設定でカスタマイズできるのは「プロフィール欄」にある「読者になる」ボタンだけ
だということです。実は、
「デザイン」➡「カスタマイズ」➡「サイドバー」➡「記事」
の順に選択していくと、「読者になる」ボタンを記事上や記事下にも設置できるのですが、私が今回紹介した方法では
記事上と記事下に設置した「読者になる」ボタンのデザインはデフォルトのまま
なんですよね～
それでもいいよ！という寛容な方は適用してみてください^^
私も記事下の「読者になる」ボタンのデザインを何とか変更できないか試行錯誤している途中なので、もし方法を知っている方がいましたら教えてください🌹
まとめ
この記事では、
デザインCSSにコードを貼り付けるだけで
プロフィール欄の「読者になる」ボタンを目立たせる方法
について解説してきました！
はてなブログの他のカスタマイズ方法も気になる！という方は、こちらのまとめ記事が参考になるかもしれません➡
【初心者向け】はてなブログ無料版のカスタマイズまとめ - Free Life Kyoka Blog
また、「アマゾンアソシエイトからのアドセンス審査結果がなかなか来ない…」という方がいましたら、こちらの記事も読んでみてください➡
もしもアフィリエイトのamazon審査期間【初心者ブロガーの場合】 - Free Life Kyoka Blog
最後まで読んでくださりありがとうございます🌹
これからも継続してはてなブログのカスタマイズ方法をお伝えしていきますのでよろしくお願いします🌹
