シェアボタンを変えて、関連記事が記事の一番下にくるようにしました：はてなブログ

おはようございます〜！

ブログのちょとしたデザインを変えたので記録として残しておきます〜！

はてなブログのシェアボタンをカスタマイズ
関連記事をシェアボタンや記事下より後に持ってくる
- 関連記事のスニペットを消す

はてなブログのシェアボタンをカスタマイズ

もともと備え付けてあるはてなブログのシェアボタン、何であんなにサイズバラバラなんですか？😅可愛くないな～、と思っていろいろカスタマイズ方法を探していました。

はてなブログにきてから、カプチーノというテーマを使わせてもらっているんでですが、このテーマにはもともとシェアボタンのデザインが変えやすいようになっています！ラッキー

\ 参考にしました / www.fuji-blo.com

①デザインをクリック

②🔧マークのカスタマイズをクリック → ③ヘッダをクリック

④ブログタイトル下に下記のコードをコピペ

コピーするコード

<!--FontAwesome読み込み-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"></code></pre>

⑤記事をクリックしてソーシャルパーツのチェックをはずす

⑥記事下HTMLに下記のコードをコピペする → ⑦変更を保存するをクリック←📌忘れないでくださいね✨

コピーするコード

<div class="sharebtn">
  <ul class="sharebtn_list">
    <!--はてなブックマーク-->
    <li class="sharebtn_item hatebu"><a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" target="_blank" title="はてなブックマークに登録" rel="nofollow noopener noreferrer" class="hatena-bookmark-button btn_hb" data-hatena-bookmark-layout="simple"><i class="blogicon-bookmark lg"></i></a></li>
    <!--Facebook-->
    <li class="sharebtn_item facebook"><a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" title="Facebookでシェア" target="_blank" rel="nofollow noopener noreferrer" class="btn_fb"><i class="fab fa-facebook"></i></a></li>
    <!--Twitter-->
    <li class="sharebtn_item twitter"><a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" title="Twitterでシェア" target="_blank" rel="noopener" class="btn_tw"><i class="fab fa-twitter"></i></a></li>
    <!--Pocket-->
    <li class="sharebtn_item pocket"><a href="http://getpocket.com/edit?url={URLEncodedPermalink}title={Title}" title="Pocketに保存" target="_blank" rel="nofollow noopener noreferrer" class="btn_po"><i class="fab fa-get-pocket"></i></a></li>
    <!--LINE-->

    <li class="sharebtn_item line"><a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" title="LINEに送る" target="_blank" rel="nofollow noopener noreferrer" class="btn_li"><i class="fab fa-line "></i></a></li>
  </ul>
</div>

関連記事をシェアボタンや記事下より後に持ってくる

はてなブログの関連記事の位置があまり好きではなかったので、はてなブログ「関連記事」の位置を下にする方法【カスタマイズ】 - スキゾイドな「ウサキさん」の思考を参考にさせていただいて、位置を記事の一番下に持ってきました。

①デザインをクリック

②🔧マークのカスタマイズをクリック → ③ヘッダをクリック

③デザインCSSに下記のコードをコピペして変更を保存するをクリック

コピーするコード↓

/* 関連記事を記事下よりも下に */
.customized-footer {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.entry-footer-modules {
-webkit-order:2;
order:2;
width: 100%;
}
.entry-footer-html {
-webkit-order:1;
order:1;
width: 100%;
}