はてなブログ・関連記事と記事下の入れ替え

2019年11月17日はてなブログ

はじめに

*当ブログは現在、はてなブログからWordPressに移行しています。

カスタマイズ前の確認事項などは下記の記事を参照してください。

関連記事と記事下を入れ替え

はてなブログの「SNSシェアボタン」は記事本文と「関連記事」(表示している場合)の間に配置されてますが

「SNSシェアボタン」をカスタマイズすると、「関連記事」の後ろに「SNSシェアボタン」が配置されます。

それを「関連記事」の前に配置するカスタマイズです。

関連記事と記事下の入れ替えのカスタマイズは下記サイトを参考にさせていただきました。

「SNSシェアボタン」のカスタマイズは下記の記事を参照してください。

デザインCSS

「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「デザインCSS」に以下のコードを貼り付けてください。

.customized-footer{
display:-webkit-flex;
display:flex;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}

これだけで入れ替わります。

「Googleアドセンスの広告」なども入れ替わります。

はてなブログ無料ユーザー

はてなブログ無料ユーザーの場合は、はてなブログの広告が表示されるので記事本文の直下に「SNSシェアボタン」や「Googleアドセンスの広告」などを配置できません。

そうした場合でも以下のコードを「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「記事下」に貼り付ければ、記事本文の直下に「SNSシェアボタン」などを配置できます。

<div id="my-footer">

※ここに「SNSシェアボタン」や「Googleアドセンスの広告」のコードを貼り付ける

</div>
<script>
var myFooter=document.getElementById(“my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName(“entry-content")[0].appendChild(temp);
</script>

「記事下」にすでにある「SNSシェアボタン」や「Googleアドセンスの広告」のコードをコピーして、赤字の部分に貼り付けてから(赤字の文字は消して)そのコードを「記事下」に貼り付けてください。

記事下の順番を入れ替える

「記事下」の順番を入れ替えるには「SNSシェアボタン」や「Googleアドセンスの広告」のコードを入れ替えるだけです。

上に表示したいものを上に記述してください。

Posted by aurora3