Xeory Base ソーシャルボタンの軽量化【WordPressカスタマイズ】
【WordPressカスタマイズ】
読み込みに時間のかかるソーシャルボタンをCSSとウェブフォントを使って軽量化してみました。Xeory Baseの使用を前提としたcssも掲載しています。
（※2018年5月に別のテーマに変更しました）
わたしのwebスペック（？）はというと、HTML/CSSの基本は理解している。PHPはコピペで少々。WordPressは全くの初心者。
こちらのサイトが初心者にもとてもわかりやすく説明されていたので、参考にさせて頂きました！
ソーシャルボタンを自作してWordPressの高速化
説明ではIcoMoonでウェブフォントを取得するとなっていますが、私はfontawesomeを導入していたので取り急ぎあるものだけアイコン付けました。
デフォルトのソーシャルボタンが重い
Xeory Baseのデフォルトでは↑のような画像タイプのボタンになっています。
これが読み込みに結構時間が掛かってしまうので、CSSとウェブフォントで軽量化して表示を早くするという方法に挑戦しました。
変更後のデザインはこちら。
統一感があっていい感じになりました！
Xeory Baseで使用する際には
cssを少し調整
Xeory Baseであらかじめ設定されているcssと重複する部分を削除しました。
他、余白などを微調整した後のcssがこちら。
/* SNSボタン */
.share {margin : 40px 0;}
.share ul {margin : 0;
padding : 0;}
.share li a {display : block;
padding : 10px;
color : #fff;
font-size : 16px;
}
.share li a:hover {opacity :0.8;
color : #fff;}
.post-footer .share ul li a:hover {
text-decoration : none;}
.share li a:visited{ color: #fff;}
.share ul:after {content : "";
display : block;
clear : both;}
.tweet a{background-color : #55acee; }
.facebook a{background-color : #315096;}
.googleplus a{background-color : #dd4b39;}
.hatena a{background-color : #008fde;}
.line a{background-color: #00c300;}
.pocket a{background-color :#f03e51;}
.rss a{background-color: #ff8c00;}
.feedly a{background-color: #6cc655;}
.share li {float : left;
width : 25%;
margin-top:15px;}
.share li i {padding-right : 5px;}
@media screen and (max-width:767px){
.share {margin: 20px 0;}
.share li {
float : left;
width : 48%;
margin: 1% auto;}
.share li a {font-size : 14px;}
}
また、各ボタンの角丸を四角にしたかったので
.share li a { border-radius:6px;}
の一文を削除しました。
あとは、
.post-footer .share ul li a:hover { text-decoration : none;}
の一文を追記してリンクに下線が付かないようにしてあります。
ボタンの設置場所
Xeory Baseの場合、「single.php」内にある < ?php bzb_social_buttons();? >のコードを< ?php get_template_part( 'sns' );? >に書き換えます。
これで設置完了、無事反映されていました！
おわりに
記事内上部のファーストビュー内にソーシャルボタンがある場合、読み込みが遅いと本文ではないとは言え決して印象は良くないですよね。
Xeory Baseの仕様がそうなっているため、気になっている方もいるのかな？と思い記事にしてみました。
デザイン的にもフラットで統一感がありオススメなので、ぜひカスタマイズしてみてください＾＾