はてなブログの関連記事を記事下よりも下に移動させるカスタマイズ

はてなブログの関連記事を表示させたのですが、記事下に設置しているシェアボタンとかアドセンスが関連記事の下になってしまうのがちょっと気になりました。

ということで、今回はCSSだけで記事下（カスタマイズができるエリア）と関連記事の位置を逆にするカスタマイズです。

かなり簡単なのですぐに実装できます。

以下のコードを「デザイン」→「カスタマイズ」→「デザインCSS」に追加するだけでOKです。

/* 関連記事を記事下よりも下に */
.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%;
}

たまに古いSafari使っている人もいるので、念ためにプレフィックスを入れておきました。

flexboxなら要素の順番まで替えられて便利ですね。

 

注意事項

テーマによってはうまくいかない場合があります。
カスタマイズは自己責任でお願いいたします。
バックアップはとっておきましょう。

 

記事下がゴチャゴチャしてて、整理したいなー…

 

他にもカスタマイズ記事書いてます。

「カスタマイズ」カテゴリーの記事一覧 | SHIROMAG