ストークのカード型記事一覧にインフィード広告をピッタリ表示させる方法




最近一般ユーザー向けにも解禁されたGoogle AdSense(グーグルアドセンス)のインフィード広告。

当ブログのテーマであるストークにも設置してみました。

トップページの記事一覧が「シンプル型」の場合の貼り付け方を紹介する記事は多くありましたが、「カード型」の場合の貼り付け方がなかったのでご紹介します。

ストークでカード型記事一覧にインフィード広告を複数設置する方法。

参考AdSense-インフィード広告を記事一覧の間に表示する方法

▲ストークを販売してるOPENCAGEの公式サイトで、詳しく紹介されています。

表示させてる広告が1つで良い場合は、こちらのやり方で問題ありません。

参考ワードプレスの記事一覧ページにアドセンスや広告挿入

▲複数表させる方法はこちらの記事が参考になります。

しかし、表示できても広告のサイズとカード型の記事一覧のサイズが違うためアンバランスです。

調整するとピッタリ馴染む。

そこで、カスタマイズをします。

子テーマに移してある、 partsarchivecard.phpを開き、

<div class="description"><?php the_excerpt(); ?></div>

▲というコードを削除します。

style.cssには、

/*カード型記事一覧 カスタマイズ*/

.post-list-card .post-list {
    height: 305px;
}


.post-list-card .post-list .entry-content .entry-title {
    font-size: 1em;
    margin-top: .1em;
    margin-bottom: 0em;
}

.single-title, .page-title {
    padding: 0;
    font-size: 1.5em;
}


.post-list-card .post-list .eyecatch {
    max-height: 200px;
    margin: -.6em -.6em .5em;
    text-align: center;
    overflow: hidden;
    position: relative;
}

▲こちらのコードを書き込んだ後、保存します。

スクリーンショット 2017 10 20 10 57 32

▲バランスが悪かった広告は、ピッタリ入ります。

スクリーンショット 2017 10 20 11 07 40

▲もちろん、スマホ表示も自然な感じに!

たまに違うサイズの広告も出たりします

☞まとめ

ストークを使っている人で、カスタマイズをしたい方向けのマニアックな内容になりました。

これ以外にも、久しぶりにブログのカスタマイズ熱が入りました。

  • お問い合わせが機能していなかったので、直したついでに刷新。
  • SNSボタンを小さくて、必要なものだけに厳選。
  • アイコンにアニメーションやページ読み込みにエフェクト。

▲などをしました。

正直、見た目の問題でありカスタマイズしたことで収益やPVなどは一切発生しません。

それでも、多くの人が使っているストークというテーマにオリジナル要素をプラスすることができたので満足しています。

また、カスタマイズをしているといわゆるフロー状態となり時間を忘れて没頭することができます。

正直な話、執筆も同じぐらい書き続けられると良いんですけどね。

また、今回はストークを用いての説明でしたが、販売元が同じアルバトロスハミングバードでも可能です。

同テーマを使っている方は、この機会に修正してみてはいかがでしょうか!?

以上、「ストークのカード型記事一覧にインフィード広告をピッタリ表示させる方法」と題して記事をお送りしました!!