はてなのデフォルトの記事シェアボタンって超押しづれえ...。とずっと思ってたので、シェアボタンを目立ちやすくかつクリックしやすいデザインに変更しました！せっかくシェアしようと思っても「シェアボタンねえじゃん！」と探す羽目になって諦める。みたいなことがあったので、そんな体験を生まないためにも大事な配慮かなと思います！
今回はshun (id:shun_prog0929)さんの記事を参考にさせてもらいました。ありがとうございました！
後世のはてなブロガーのために、記事シェアボタンのデザイン変更のコードを貼って軽く解説しておきます。
【PC画面】はてなブログ記事シェアボタンのデザインを変更するコード
デフォルトのシェアボタンを消しておく
新しいシェアボタンを追加していくので、デザイン→カスタマイズ→記事のソーシャルパーツを消しておきましょう。
記事上と記事下にHTMLコードを追加&調整
次に、デザイン→カスタマイズ→記事→記事上・記事下にHTMLを記載していきます。
<!--JQueryを使用--> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <!--シェア数の取得--> <script> //はてなブックマークのシェア数 function getHatenaBookmarkCount(entryUrl, selcter) { entryUrl = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(entryUrl) $.ajax({ url:entryUrl, dataType:'jsonp', }).then( function(result){ $(selcter).text(result || 0); }, function(){ $(selcter).text('0'); } ); } //Facebookのシェア数 function getFacebookCount(entryUrl, selcter) { entryUrl = 'https://graph.facebook.com/' + encodeURIComponent(entryUrl) $.ajax({ url:entryUrl, dataType:'jsonp' }).then( function(result){ if(result.share && result.share.share_count) { $(selcter).text(result.share.share_count); } else { $(selcter).text('0'); } }, function(){ $(selcter).text('0'); } ); } $(function(){ getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count'); getFacebookCount('{Permalink}', '.facebook-count'); }); </script> <!--SNSシェアボタン--> <div class="share-buttons"> <div class="inner"> <!--はてなブックマーク--> <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i> <span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br> <span class="share-text">Bookmark!</span></a> <!--Facebook--> <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br><span class="share-text">Facebook</span></a> <!--Twitter--> <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i><br><span class="share-text">Twitter</span></a> </div> </div>
コードを貼り付けたら、「変更を保存する」ボタンを押して変更を保存しておきましょう。コードの内容の説明は後ほど行います。
カスタムCSSにコードを追加&調整
次に、デザイン→カスタマイズ→デザインCSSのCSSを記載できる箇所に以下のコードを記載します。
/*share-botton*/ .share-buttons{ margin-bottom: 20px; margin-top: 20px; text-align: center; } .share-buttons .inner a { position: relative; display: inline-block; width: 30%; height: 45px; line-height: 25px; font-size: 16px; text-align: center; color: #ffffff; text-decoration: none; padding:5px; } .share-buttons .inner .share-text{ font-size: 15px; } .share-buttons .inner .hatena-bookmark-button{ background: #008fde; box-shadow: 0 3px #5478a5; } .share-buttons .inner .hatena-bookmark-button:hover{ background: #1db4eb; } .share-buttons .inner .hatena-bookmark-button:active{ background: #5478a5; } .share-buttons .inner .facebook-button{ background: #305097; box-shadow: 0 3px #213254; } .share-buttons .inner .facebook-button:hover{ background: #4c70ba; } .share-buttons .inner .facebook-button:active{ background: #213254; } .share-buttons .inner .twitter-button{ background: #55acee; box-shadow: 0 3px #0285b7; } .share-buttons .inner .twitter-button:hover{ background: #83c3f3; } .share-buttons .inner .twitter-button:active{ background: #0285b7; } .share-buttons .inner .share-buttons a:active{ top: 3px; box-shadow: none; }
こちらも貼り付けたら、「変更する」ボタンを押して変更を保存しておきましょう。これで、いい感じに押しやすいシェアボタンが表示できているはずです。
↑ できてる！すげー押しやすそう！！
【PC画面】変更後シェアボタンのコード解説
ここからは、上記のコードを軽く解説しておきます。困ったらここを見てコードの該当箇所をチューニングしてください。
シェアボタン全体の調整
/*share-botton*/ .share-buttons{ margin-bottom: 20px; margin-top: 20px; text-align: center; }
こちらでシェアボタン全体の調整をしています。上下にmarginで20px分の間隔をあけていますが、もう少し間隔あけたい場合はpxを大きくしたりと変更してみてください。
シェアボタンの各々の要素の調整
.share-buttons .inner a { position: relative; display: inline-block; width: 30%; height: 45px; line-height: 25px; font-size: 16px; text-align: center; color: #ffffff; text-decoration: none; padding:5px; }
こちらで、シェアボタンのそれぞれ(はてブやTwitterなど)のサイズや大きさなどを調整しています。はてブの「B」やTwitterの鳥のマークなどのサイズを調整したければ「font-size: 16px;」を変更したり、ボタンの幅をもう少し広くしたければ「width: 30%;」をもう少し大きくしたりと調整しましょう。
ボタンの各々の下部分文字の調整
.share-buttons .inner .share-text{ font-size: 15px; }
こちらは、「Bookmark!」などの箇所の大きさを調整しています。適宜調整しましょう。
これらを調整すればより自分のサイトに最適化されたシェアボタンになるかと思います！
【スマホ画面】はてなブログ記事シェアボタンのデザインを変更するコード
次に、スマートフォンサイトのシェアボタンも同じように変更しておきます。
記事上と記事下にHTMLコードを追加&調整
次に、デザイン→カスタマイズ→記事→記事上・記事下に以下のHTMLを記載していきます。
<!--JQueryを使用--> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <!--シェア数の取得--> <script> //はてなブックマークのシェア数 function getHatenaBookmarkCount(entryUrl, selcter) { entryUrl = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(entryUrl) $.ajax({ url:entryUrl, dataType:'jsonp', }).then( function(result){ $(selcter).text(result || 0); }, function(){ $(selcter).text('0'); } ); } //Facebookのシェア数 function getFacebookCount(entryUrl, selcter) { entryUrl = 'https://graph.facebook.com/' + encodeURIComponent(entryUrl) $.ajax({ url:entryUrl, dataType:'jsonp' }).then( function(result){ if(result.share && result.share.share_count) { $(selcter).text(result.share.share_count); } else { $(selcter).text('0'); } }, function(){ $(selcter).text('0'); } ); } $(function(){ getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count'); getFacebookCount('{Permalink}', '.facebook-count'); }); </script> <!--SNSシェアボタン--> <div class="share-buttons"> <div class="inner"> <!--はてなブックマーク--> <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i> <div class="share-count-box"><span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span></div><br> <span class="share-text">Bookmark!</span></a> <!--Facebook--> <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FBwindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <div class="share-count-box"><span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span></div><br><span class="share-text">Facebook</span></a> <!--Twitter--> <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TWwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i><br><span class="share-text">Twitter</span></a> </div> </div> <style type=text/css> /*share-botton*/ .share-buttons{ margin-top: 10px; margin-bottom: 10px; text-align: center; } .share-buttons .inner a { position: relative; display: inline-block; width: 30%; height: 45px; line-height: 25px; text-align: center; color: #ffffff; text-decoration: none; padding:2px; } .share-buttons .inner .share-text{ font-size: 12px; } .share-count-box { height:1.33333em; display:inline-block; text-align:center; } .share-buttons .inner .hatena-bookmark-button{ background: #008fde; } .share-buttons .inner .facebook-button{ background: #305097; } .share-buttons .inner .twitter-button{ background: #55acee; } </style>
こちらは、CSSもHTML内に記載しています。変更を保存して画面を確認してみると、シェアボタンが反映されています。
↑ 変更うまくいっていますね。
スマートフォンは特にボタンが押せないとストレスになるので、押しやすいデザインになっていない方はぜひ対応してみると良いと思います！
コードの内容は、基本的にPC画面のものと変わらないので割愛します。
まとめ
デザイン変更方法を紹介し始めて今回で3回目になるのですが
「コピペで実現できて、非エンジニアでも自分の望みのデザインに調整できる。」
という記事を目指して、今後も紹介していきたいと思います！
ブログの基本設定はこちらの本が参考になるのでオススメです。
