雑記ブログ卒業

生活に役立つ雑記ブログ

関連記事(記事下)とアドセンスの位置を入れ替える方法「はてなブログ」

 

どうも。「ざっきぶろぐ」です。

 

はてなブログには、記事下に関連記事を表示できる機能が付いています。

デザイン>カスタマイズ>ヘッダー から簡単に設定できます。

 

f:id:zakkiblog:20180529092143p:plain

 

ただ、記事下にすでにコードを貼り付けている方は厄介かもしれません。

というのも、はてなブログだと、記事下の1番始めに関連記事が出てしまうのです。

 

記事直下にアドセンスを貼っていた人は、収益が落ちる可能性もあります。Googleアドセンスが関連記事によって、ガクンと収益が落ちるのは避けたいところ。

 

できるなら記事下一番目にアドセンスを貼って、2番目に関連記事を表示させたいですよね。

 

という訳で、この記事では、記事下にある関連記事と、記事下のコードを入れ替える方法について書きたいと思います。

 

デザインCSSにコードを貼り付けるだけ

方法はとても簡単です。以下のコードをデザインCSSに貼り付けるだけで、関連記事と今までの記事下のコードが入れ替わります。

 

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

 

詳しく書いているのが、

関連記事と記事下の順番を変えたり、いろいろカスタマイズ - FOXISM

という記事です。

 

このFOXISMというサイトを運営している方は、「ZENO-TEAL」というはてなブログテーマを作っていることでも有名です。上記の記事で、関連記事と記事下の順番を入れ替えるさらに詳しい情報が得られますので、ぜひ。

 

実際にやってみた。

先程のコードをデザインCSSに入れて、実際に関連記事と記事下のコードを入れ替えてみました。画像で見るとこんな感じ。

 

f:id:zakkiblog:20180529093757p:plain

 

私の場合、記事下のコードは、アドセンス、読者になるボタン、関連記事、という順番になりました。

 

「意外と簡単だった」

カスタマイズが全くできないという方も、コード(HTML)を入力するだけなので、簡単だと思います。私自身も何も知らない状態から「はてなブログ」を始めて徐々にカスタマイズできるようになりました。

 

もちろん、今までカスタマイズ方法を公開して下さっている方のお陰でありますが、カスタマイズする方法は殆どネットで検索すれば、情報を得ることができます。

 

最近カスタマイズして良かったのは文字サイズですね。

はてなブログの文字サイズを変更するカスタマイズが超簡単です。 - 雑記ブログ卒業

 

文字サイズを変えるだけで、グッと読みやすくなりました。これもすごく簡単に設定できるので、ぜひやってみてください。それではこの辺で。おしまい。

 

by ざっきぶろぐ