STINGER7:記事一覧をカード型にカスタマイズ【その2】

      2016/05/12

eye_stinger7

STINGER7の記事一覧カスタマイズ【その2】でございます!
前回はとりあえずカード型にするところまでやりましたね↓

STINGER7:記事一覧をカード型にカスタマイズ【その1】
ちょっと忙しくて間が空いてしまいました、すみません(^^;) お待たせしました! ...

今回はタイル型に並べるつもりだったんですけど、その前にもう少し細かいところまでいじってみたいと思います!
完成するとこんな感じです↓

20160505e

前回の記事で「CSSでカード型に装飾」のところまでやっていただくと、今回の内容もスムーズに導入できます!
では早速やっていきましょう!

スポンサーリンク

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7:テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7:親テーマの任意のファイルを子テーマで編集する方法

サムネイルを長方形にする

以前に書いた記事でも紹介していますが、まずはサムネイルを正方形から長方形に変えてみましょう。

STINGER7:トップページ記事一覧のサムネイル画像のサイズを変える方法
STINGER7で「サムネイルのサイズを変更したい」というリクエストを頂いたので早速カスタマイズしたいと思います!

「 itiran-thumbnail-on.php 」を編集します。
この部分を探してください↓

見つけたら、「 <?php the_post_thumbnail( 'thumbnail' ); ?> 」の赤字の部分を変更して、「 <?php the_post_thumbnail( 'medium' ); ?> 」と変更します。

これによって画像の上限サイズが「設定 → メディア」で設定されている「中サイズ」になりました。
変更していなければ中サイズは300×300で設定されていると思います。

次にCSSで少し大きくします↓

結構大きめにしてみました。スマホは除外しているので小さいままです。

スマホでは通常通りの正方形にしたい場合は、さきほどの「 itiran-thumbnail-on.php 」をこのように変えてください↓

ちなみにサムネイルを「medium」に変更すると、普段使用しているアイキャッチ画像の縦横の比率でそのまま縮小されて表示されるので、アイキャッチ画像のサイズがバラバラだと記事一覧の画像サイズも縦の長さがバラバラになります。
普段からアイキャッチ画像のサイズは統一しておくとキレイに表示されますよ♪

投稿日・カテゴリー・タグをカスタマイズ(パターン1)

次は投稿日やカテゴリーの部分をいじってみます。
「itiran-thumbnail-on.php」のこの部分を探してください↓

見つけたらこのコードに書き換えてみてください↓

CSSでちょいと見た目を修正します↓

投稿日に付いていたアイコンを消して、カテゴリーとタグにはそれぞれ別のアイコンを付けてカラーも変更しました。
ここまでやるとこんな感じになります↓

20160505d

細かい変更ですけど雰囲気が少し変わりますね(^^)
ちなみに前回の記事の最後の方に書いてある「カードに影を付ける」っていうのも入っています。

投稿日・カテゴリー・タグをカスタマイズ(パターン2)

では違うパターンもやってみましょう!
今度は「itiran-thumbnail-on.php」の先ほどと同じ箇所をこのように書き換えます↓

今度は投稿日のアイコンを復活させて「◯年◯月◯日」という表示に。
カテゴリーとタグはアイコンを消しました。
そしてCSSをこうすると↓

こんな感じになります↓

20160505e

スマホだとこんな感じですね↓

20160505f

投稿日の表示の種類

パターン1とパターン2で投稿日の表示方法を変えてみましたが、他にも色々と変えることができます。
いくつか例を載せておきますね。

16/5/5(木)

 

2016.05.05 Thu

 

2016.5.5 Thursday

 

October 5th, 2016

 

Oct 5, 2016

 

微妙にテンプレートタグが違っていますよね!
月や曜日は「the_time」だと日本語表記、「get_post_time」を使用すると英語表記になります。

「itiran-thumbnail-on.php」の該当箇所を変更すれば好きな表示に変えられますのでお試しください(^^)

まとめ

ということで記事一覧のカスタマイズ【その2】でした!
CSSを変更して色々とお好みでカスタマイズしてみてください。

次回は一行に2つ以上の記事を並べるタイル型にします!
お楽しみに〜♪

【その3】書きました↓

STINGER7:記事一覧をカード型にカスタマイズ【その3】
STINGER7の記事一覧カスタマイズ、完結編でございます! 今回はカード型にし ...

STINGER7のカスタマイズ記事をまとめました↓

STINGER7:カスタマイズまとめ
このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

スポンサーリンク

この記事をシェアする!

 - WordPress