ズボラ応援ブログ始めました

STINGER8の記事一覧をグリッド表示にしてみた

STINGER8の記事一覧をタイル表示にカスタマイズしてみました。

Adsenseも馴染むように設定したのでそのやり方メモです。

STINGER8の一覧をタイル表示にする方法

プロの人から見たら「汚いコードだな」って思う部分があるかもしれないので、それでもいいよって方だけお試しください。

下の画像が完成形です。

Adsenseの広告を作る

次のような設定でAdsenseのインフィード広告を作る

  • フィードのデザインは上部の画像を選択
  • グローバルオプションのパディングを全て0px
  • イメージの縦横比は1.91:1
  • イメージのパディングはすべて0
  • 見出しと説明文の上部パディングが5px

新しいサムネイルサイズの追加

私は中サイズのサムネイルを幅300、高さ無制限で作成しているので、このサムネイルをcssでリサイズして使っています。

用意されているサムネイルのサイズを確認する場合は「設定」-「メディア」からメディア設定を開いてください。

新しくサムネイルサイズを定義したい場合は次のコードをfunction.phpに追記してください。

add_image_size( 'thumb-300', 300, 160, true );

thumb-300という名前の新しいサムネイルが定義されます。名前は既に定義されているものと被らなければ好きなように変えて大丈夫です。

サムネイルの再作成

メディア設定からサムネイルのサイズを変更したり、add_image_sizeで新しいサイズを定義した場合、既に投稿されているアイキャッチ画像のサムネイルを作り直す必要があります。

Regenerate Thumbnailsというプラグインが便利です。

プラグインをインストールしたら「ツール」から「Regenerate Thumbnails」を選択します。

アイキャッチ画像のみ作り直す場合は「Featured Image Only」と書かれた方のボタンをクリックします。

itiran.phpの修正

サムネイルの変更

新しく作ったサムネイルを使うようにitiran.phpを修正します。

<?php the_post_thumbnail( 'thumbnail' ); ?>と書かれた箇所の'thumbnail'を中サイズサムネイルの場合は'medium'に修正します。新しいサイズを定義した場合はその名前を設定します。

広告の挿入

以前投稿したSTINGER8の記事一覧にAdsenseのインフィード広告を馴染ませる方法という記事の「PHPの修正」という箇所を参考に、広告コードを挿入します。

cssの修正

STINGER8はメインエリアとサイドバーで「kanren」という共通のスタイルが使用されています。

これをそのまま修正してしまうとサイドバーのスタイルまで変わってしまうので、メインエリアだけ修正が加わるように追加していきます。

追加するコード

.st-main .kanren dl,
.infeed{
width:100%;
float:none;
padding: 0;
}
.st-main .kanren dt{
float:none;
margin-bottom:5px;
}
.st-main .kanren dt img{
width:100%;
}

タブレットサイズ以上のスタイルに追加するコード

.st-main .kanren dl,
.infeed{
width:45%;
height:360px;
float:left;
margin:5px 2%;
}

修正するコード

.kanren dd {
padding-left: 115px;
}
.kanren dl {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
}
.kanren dl:last-child {
margin-bottom: 20px;
padding-bottom: 20px;
border-style: none;
}

上記のコードを次のように修正します。

#side .kanren dd {
padding-left: 115px;
}
#side .kanren dl {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
}
#side .kanren dl:last-child {
margin-bottom: 20px;
padding-bottom: 20px;
border-style: none;
}

以上になります!

ブラウザのキャッシュをクリアして表示確認してみてください。

今回floatを使う方法を試しましたが、 Flexboxというのを使えばもっとシンプルなコードで便利なことができるらしいです。

勉強してやり方わかったら紹介します。

タイトルとURLをコピーしました