本記事は「ストーク」「ハミングバード」のワードプレステーマ向けの内容です。
以前、このブログでは「ハミングバード」を使用していましたが、2018年4月にJIN（WordPressテーマをJIN（ジン）に変更！デザインのカスタマイズ性が◎）にテーマを変更しました。
きたむ（wakajps）です。
WordPressテーマである『ストーク』『ハミングバード』のテーマでは、標準機能でSNSシェアボタンを設置することできます。
「他の方のブログデザインと差別化をはかりたいなぁ。」と思いネットで、良い方法がないか探してみましたが、あてはまる情報がなかったので、自分でCSSをいじって作成してしまいました。
この記事で紹介させていただくCSSを使うと、以下のようにSNSボタンのデザインをカスタマイズすることができます。
▼記事タイトル下
▼記事下
『ストーク』と『ハミングバード』は、テーマのCSSに互換性があるため、どちらのテーマを使っていても、同様の手順でデザインを変更することができます。
SNSシェアボタンのデザインをカスタマイズする手順
WordPressのテーマの編集から子テーマを開き、以下枠内のCSSをコピペして完了です。
コピペする場所は、スタイルシート『style.css』内の一番下でOKです。
.sns li a {
font-size:80%;
position:relative;
display:block;
padding:10px;
color:#fff;
border-radius: 2px;
text-align:center;
text-decoration: none;
text-shadow:none;
}
.sns li a:hover {
-webkit-transform: none;
-moz-transform: none;
transform: none;
box-shadow:none;
}
.sns li a .text{
font-weight:none;
}
/* ツイッター */
.sns .twitter a {
color: #22b8ff !important;
border: solid 1px #22b8ff !important;
background: #fff !important;
box-shadow:none;
}
.sns .twitter a:hover {
color: #fff !important;
border: solid 1px #22b8ff !important;
background: #22b8ff !important;
}
/* Facebook */
.sns .facebook a {
color: #6680d8 !important;
border: solid 1px #6680d8 !important;
background: #fff !important;
box-shadow:none;
}
.sns .facebook a:hover {
color: #fff !important;
border: solid 1px #6680d8 !important;
background: #6680d8 !important;
}
/* グーグル */
.sns .googleplus a {
color: #db4a39 !important;
border: solid 1px #db4a39 !important;
background: #fff !important;
box-shadow:none;
}
.sns .googleplus a:hover {
color: #fff !important;
border: solid 1px #db4a39 !important;
background: #db4a39 !important;
}
/* はてぶ */
.sns .hatebu a {
color: #5d8ac1 !important;
border: solid 1px #5d8ac1 !important;
background: #fff !important;
box-shadow:none;
}
.sns .hatebu a:hover {
color: #fff !important;
border: solid 1px #5d8ac1 !important;
background: #5d8ac1 !important;
}
/* Pocket */
.sns .pocket a {
color: #ff6d82 !important;
border: solid 1px #ff6d82 !important;
background: #fff !important;
box-shadow:none;
}
.sns .pocket a:hover {
color: #fff !important;
border: solid 1px #ff6d82 !important;
background: #ff6d82 !important;
}
/* Feedly */
.sns .feedly a {
color: #6cc655 !important;
border: solid 1px #6cc655 !important;
background: #fff !important;
box-shadow:none;
}
.sns .feedly a:hover {
color: #fff !important;
border: solid 1px #6cc655 !important;
background: #6cc655 !important;
}
テーマJINに移行しました！
これまでワードプレステーマ「ハミングバード」を使用していましたが、JINを購入し移行しました。テンプレートでデザインが用意されているので、書くことに集中できるとても良いテーマです。
JIN用のカスタマイズCSSも公開中です！
あいか（@aika_aimemo）さんのブログ『Ai MEMO』で本記事をご紹介いただきました。ありがとうございます！
参考になる記事をありがとうございます。アフリカの記事も大変興味深いです。
ひとつ質問なのですが、ボタンの上に▼ SNSでシェアする ▼ という一文がありますが、これはどこをいじって書き込めばこの位置に表示できるのでしょうか？
りなさん、コメントいただきありがとうございます。アフリカの記事もご覧いただきありがとうございました。
ボタン上に文字を表示する際は、PHP等のソースコードで変更を加えるのではなく、「外観＞カスタマイズ＞投稿・固定ページ設定＞記事下のシェアタイトルを入力」から表示させたい文字を入力させることができます。htmlを打ち込むこともできるので、文字の大きさや色も変えることができます。
よろしくお願いいたします。