他のデザインテーマで「Brooklyn」のシェアボタン・読者登録ボタンを利用する方法【はてなブログ】

こんにちは。

あなたのブログでは、SNSのシェアボタンや読者登録ボタンはどのようなデザインのものを利用していますか。

はてなブログではSNSのシェアボタンや読者登録ボタンは使用しているデザインテーマごとにオリジナルのデザインが用意されていることがあります。

私が長らく使用させていただいていたデザインテーマ「Brooklyn」では、シンプルなデザインの「モノトーンのシェアボタン」や、マウスオーバーすると色が変わり”思わずクリックしたくなる！？”ブラックやレッドの「読者登録ボタン」が用意されており、とても気に入っていました。

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました – NO TITLE

はてなブログをはじめてここまで約１年半で400を越える方に読者登録いただけたのは、この「読者登録ボタン」の効果もあったような気がします。

このデザインテーマ「Brooklyn」に組み込まれたシェアボタンや読者登録ボタンのデザインはデザインテーマを変えると使えなくなってしまいます。

できればテーマを変えても「Brooklyn」のシンプルで機能美にあふれたシェアボタン・読者登録ボタンを利用したい、という方もいるかもしれません。

そこで今回は「デザインテーマ「Brooklyn」のシェアボタン・読者登録ボタンを他のデザインテーマで利用する方法」をご紹介します。

「Brooklyn」のシェアボタン・読者登録ボタンを他のデザインテーマで利用する方法

他のデザインテーマで「Brooklyn」のシェアボタン・読者登録ボタンを利用するには、デザインを決めるcssコードを貼る必要があります。シェアボタン・読者登録ボタンの順にご紹介します。

他のデザインテーマで「Brooklyn」のシェアボタンを利用する

まずは「Brooklyn」のシェアボタンのデザインcssコードを貼り付けます。

貼り付ける位置

「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「｛｝デザインcss」

貼り付けるコード

/* シェアボタン */
/* 共通設定 */
.share-button {
margin: 20px 0 10px 0;
width: 300px;
}
.share-inner a {
position: relative;
display: inline-block;
width: 55px;
height: 55px;
padding: 4px 0;
line-height: 18px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
text-align: center;
color: #111;
text-decoration: none;
vertical-align: bottom;
border: 1px solid #ddd;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.share-inner a:hover {
opacity: 0.6;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.share-button i,
.share-button .lg {
font-size: 24px;
}
.share-inner .hatena-bookmark-button .lg {
font-size: 38px;
}
.share-inner .hatena-bookmark-button {
padding-top: 1px;
padding-bottom: 7px;
}
.share-inner .twitter-button {
padding-top: 5px;
padding-bottom: 3px;
}
.share-inner .facebook-button .lg  {
font-size: 34px;
}
.share-inner .facebook-button .fa-facebook-square.lg {
font-size: 31px;
margin-top: -1px;
}
.share-inner .twitter-button .lg {
font-size: 28px;
}
.share-button .small-text {
font-size: 12px;
}
.share-button .fa-spin {
font-size: 8px;
color: #999;
}

モノトーンのシェアボタンを利用する場合は/* color */以下の部分は記載しなくても大丈夫です。

あとは「Brooklyn」を制作されたシロマ (id:shiromatakumi) さんが解説されている「Brooklyn」カスタマイズ方法の記事の「シェアボタンの設置」の手順にそって進めるだけです。

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました – NO TITLE

他のデザインテーマで「Brooklyn」の読者登録ボタンを利用する

まずは「Brooklyn」の読者登録ボタンのデザインcssコードを貼り付けます。

貼り付ける位置

「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「｛｝デザインcss」

貼り付けるコード

/* 読者登録ボタン */
.reader-button {
margin: 16px 0;
}
.reader-button a{
display: inline-block;
width: 200px;
height: 36px;
border: 2px solid #111;
text-decoration: none;
background-color: #111;
color: #fff;
font-size: 100%;
text-align: center;
line-height: 36px;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.reader-button a:hover {
background-color: #fff;
font-size: 110%;
font-weight: bold;
color: #111;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
/* カラーボタン */
.reader-button.color a {
border-color: #b01c1c;
background-color: #b01c1c;
color: #fff;
}
.reader-button.color a:hover {
background-color: #fff;
color: #b01c1c;
}

ブラックの読者登録ボタンを利用する場合は/* カラーボタン */以下の部分は記載しなくても大丈夫です。

あとは「Brooklyn」を制作されたシロマ (id:shiromatakumi) さんが解説されている「Brooklyn」カスタマイズ方法の記事の「読者登録ボタンの設置」の手順にそって進めるだけです。

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました – NO TITLE

---

これで他のデザインテーマに変更しても引き続き「Brooklyn」のシェアボタン・読者登録ボタンを利用できるようになりました。

なお「｛｝デザインcss」に記載したコードはデザインテーマを再インストールしたり、別のテーマに変更するとクリアされてしまいます。もし別のテーマに変更する時は、事前にコピーしておき、テーマ再インストール（変更）後、改めて記載し直せばそのまま利用することができます。

はてなブログで「デザインテーマ「Brooklyn」のシェアボタン・読者登録ボタンを他のデザインテーマで利用する方法」の紹介は以上です。