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

   

eye_stinger7

STINGER7の記事一覧カスタマイズ、完結編でございます!
今回はカード型にしたものをタイル状に並べてみたいと思います。
前回までの記事はこちら↓

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

今回は完成するとこんな感じです↓

20160511f

だいぶ雰囲気変わりますね♪
それでは早速やっていきましょう!

スポンサーリンク

子テーマの使用方法

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

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

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

下準備

まずは【その1】の記事の「CSSでカード型に装飾」の見出しのところまでカスタマイズしてください。
こちらの記事です↓

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

記事一覧に使用する画像の準備

新しいサムネイルサイズを追加する

記事一覧に使用するサムネイル画像を準備します。

「設定 → メディア」を見ると、3種類の画像が設定されていますね。
今回は400pxぐらいの画像を使いたいけど、デフォルトの中サイズだと少し足りない、大サイズだとデカすぎ。
ということで新しいサイズのサムネイルを追加してみることにします。

「 functions.php 」に以下のコードを追加しましょう↓

ちなみに最後に「true」を付けると自動で切り抜いて縮小されます↓

「true」がある場合と、ない場合の違いを少し説明しますね。
試しに「幅640px × 縦427px」のこの画像をアップしてみます↓

test

「true」なしだと縦横比を保ったまま縮小されるので、仕上がりサイズは「400 × 267」となります↓

test_400_267

「true」ありの場合は縦横どちらかが指定サイズに達したら余った部分がカットされます。
今回は高さが先に指定の「400」になるので、左右の余り部分はカットされ、仕上がりサイズは「400 × 400」です↓

test_400_400

記事一覧に使用することを考えた場合「true」なしだと毎回ちゃんと同じサイズの画像をアップしないと、縮小された時にサイズがバラバラになってしまいます。

でも「true」を付けておけば、多少サイズがバラバラでもちゃんと指定のサイズになるように切り抜いてくれるわけです。

記事一覧用だとそんなに高さはいらないので、高さを指定するなら「400 × 200」ぐらいの横長でも良いかもしれないですね↓

上記の「400, 200, ture」だとこうなります。
今度は横幅が先に指定サイズに達しているので、高さがカットされていますね↓

test_400_200

毎回画像のサイズを揃えるのは面倒だ!という人は「true」を入れておくと楽だと思います。

STINGER7のメインカラムの横幅は740pxなので、一行に2つのサムネイルを並べるとして幅400pxにしてみました。
サイズはお好みで調整してみてください♪

「Regenerate Thumbnails」でサムネイルを再作成

画像サイズを新しく追加した場合、過去にアップした画像には適用されません。
なので過去にアップした画像も新しいサイズで再作成してくれる便利なプラグイン「Regenerate Thumbnails」を使用します。

「プラグイン → 新規追加」で検索してインストールしたら有効化してください。

20160511a

すると管理画面の「ツール」に「Regen. Thumbnails」という項目が出るのでクリックして、「すべてのサムネイルを再生成する」ボタンを押しましょう↓

20160511b

これだけです!
画像の数が多いと数分かかりますので少し待ちましょう。

追加したサイズの画像を記事一覧に使用する

では新しく追加したサムネイルサイズを記事一覧に適用しましょう!
「 itiran-thumbnail-on.php 」のこの部分を編集します↓

「 <?php the_post_thumbnail( 'thumbnail' ); ?> 」の赤字の部分を変更して、先ほど追加した「 <?php the_post_thumbnail( '400_thumbnail' ); ?> 」と変更します。

これで画像の準備は一通りオッケーです(^^)

記事一覧をカード型にしてタイル状に並べる

いよいよカード型&タイル状に並べていきます。
まずは「itiran-thumbnail-on.php」の、一番最初の行をこのように変更してください↓

クラス名に「clearfix」を追加しました。

1行に2つの記事を並べる場合

1行に2つの記事を並べてみます。
「style.css」にこのコードを追加してください↓

これでこんな感じになると思います↓

20160511c

タブレットサイズまでは2列のまま縮小して、スマホサイズになるとfloatを解除して1列になります。

1行に3つの記事を並べる場合

今度は1行に3つの記事を並べてみましょう!
「style.css」にこのコードを追加します↓

するとこんな感じに↓

20160511d

高さを指定してキレイに揃うようにしているので、タイトルが長すぎたりすると枠からはみ出てしまうかもしれません。
「タイトル・日付・カテゴリ部分のボックスの高さ」とコメントを入れてあるところをお好みで調整してください。

これでとりあえずカード型にしてタイル状に並べることができましたね!
以下はお好みでカスタマイズして、さらにオリジナリティを出してみてください!

記事タイトルの調整

タイトルの文字の装飾をいじってみましょう。
サイトのテーマカラーなどに合わせて色も変えてみると雰囲気が変わってなかなか良いですよ♪

投稿日・カテゴリー・タグをカスタマイズ

タイトルの下の、「投稿日」や「カテゴリ」の部分も変えてみましょう。
前回の記事に2パターン書いていますが、同じやり方でできるので参考にしてみてください↓

STINGER7:記事一覧をカード型にカスタマイズ【その2】
STINGER7の記事一覧カスタマイズ【その2】でございます! 前回はとりあえず ...

タイトル部分の背景を消す

タイトル・投稿日・カテゴリのボックスの背景を消してみます。
CSSにこちらを追加してください↓

ここまでやるとこんな感じになります↓

20160511e

まとめ

ということで記事一覧のカスタマイズは第3回目にしてひとまず完結です!
無事にカスタマイズできましたか?

ただコピペして終わりじゃなくて、個性を出したり、好みに合わせていじれるように紹介してみました。
色を変えたりするだけでも雰囲気が変わるので、色々試してみてください(^^)

間違ってる部分とか、分からないことなどあればコメント・メッセージくださいませ。
ではまた〜♪

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

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

スポンサーリンク

この記事をシェアする!

 - WordPress