かっこいいシェアボタンの配置｜はてなブログ（無料）

この度、運営しているブログを「ワードプレス」から「はてなブログ」に切り替えました。
そこで本記事では、はてなブログの無料バージョンで、どれだけのカスタマイズができるのか試してみたので、上手くいったものをお知らせします。

今回は、シェアボタンの配置です‼️
作業の手順を、わかりやすくまとめましたので、ぜひチャレンジしてみて下さいね。

作業．記事に以下を記述するだけ

管理画面→デザイン→工具マーク→「記事」の記事上と記事下スペースに以下をコピー＆テースト。

↓ ↓ ↓

<style type=text/css>/*シェアボタン*/
.share-flat .share-flat-inner .twitter-search{ background: #1DA1F2; width: 76%; height: auto; font-size: 12px; padding:4px; line-height: 0px;}.share-flat .share-flat-inner .twitter-search .share-text{ font-size: 12px;}.share-flat{ margin-bottom: 10px; text-align: center;}.share-flat-inner a { position: relative; padding:2px 0px; display: inline-block; width: 15%; height: 40px; line-height: 20px; border-radius: 4px; font-size: 16px; text-align: center; color: #ffffff; text-decoration: none;}.share-flat .small-text{ font-size: 10px;}.share-flat .hatena-bookmark-button{ background: #00A4DE;}.share-flat .twitter-button{ background: #1DA1F2;}.share-flat .facebook-button{ background: #405BA7;}.share-flat .pocket-button{ background: #EE4256;}.share-flat .line-button{ background: #00C300;}.share-flat a:active{ opacity: 0.6;}
</style>
<!--シェアボタン-->
<div class="share-flat"><span style="font-size: 8px">この記事をシェアする</span><div class="share-flat-inner">
<!--はてブ-->
<a href="https://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><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="blogicon-facebook lg"></i><br><span class="small-text">Facebook</span></a>
<!--Twitter-->
<a href="https://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--Pocket-->
<a href="https://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
<!--LINE-->
<a href="https://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button" target="_blank"><i class="fa fa-comment"></i><br><span class="small-text">LINE</span></a>
</div></div>