スティンガー8

STINGER8の記事一覧をタイル状に並べて2列・3列で表示させる方法

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

STINGER8のトップページ記事一覧を、前に通常のデザインのものからカード型にカスタマイズを行いました。

 

今回はその応用編ともいえるカード型のデザインから、「タイル状」にして2列、3列に記事を並べられるようにしていきたいと思います。

カード型にする時はかなりの時間がかかりましたが、今回は前回の経験を活かすことができたので、比較的スムーズにカスタマイズができて少しホッとしています。

 

それではSTINGER8の記事一覧を、タイル状に並べて表示するカスタマイズ方法をご紹介していきます。

カード型の記事をタイル状に並べる

前にご紹介させて頂いたSTINGER8の記事一覧を、カード型にしたカスタマイズがこちらになります。

 

 

このカスタマイズは随分苦労しましたが、これを少し応用するだけで以下のようなタイル状に変更することができます。

 

 

最近ではよく他のブログで見かけるようになりましたが、かなり雰囲気も変わってユーザー視点でも記事が見やすくなったのではないでしょうか。

 

まずはカード型にカスタマイズ

今回の記事一覧をタイル状に並べる為には、まずカード型にカスタマイズしておく必要があります。

 

もしまだ変更されていなければ、以下の記事でご紹介している「style.cssでデザインを調整する」までの作業を先に行っておきましょう。

参考:STINGER8の記事一覧をおしゃれなカード型にカスタマイズする方法

 

準備ができたらいよいよCSSを使ってタイル状に記事を並べていきます。

 

タイル状にカスタマイズする

ここで使用するテーマファイルは「style.css」だけになるので、基本的にコピー&ペーストでカスタマイズできます。

ファイルの編集前には不都合が起きてしまった時に、すぐに前回の編集内容に戻せるようタブを2つ開いておくことをオススメします。

 

また、ファイルの変更は親テーマではなく「子テーマ」で行っていくので、間違えないよう注意しておきましょう。

 

「style.css」で2列に表示させる

ワードプレスの管理画面の左メニューから「外観」⇒「テーマの編集」と進んだら、子テーマ「style.css」ファイルを開いて下さい。

 

次にファイル内の空いているところに、以下のCSSコードを追加しましょう。

 

 

2列に上手く収まらない場合は記事エリアの「max-width」を大きくしたり、「width」の数値を小さくしたりして調整してみて下さい。

「この記事を見る」ボタンは以下の記事でご紹介している内容で、すでに表示させている方に限り有効なコードなので、もし必要であればこちらを参考にして下さい。

参考:続きを読むボタンはどこだ?STINGER8で表示させるカスタマイズ方法

 

「style.css」で3列に表示させる

次は記事を1列に3つ表示させるコードですが、基本的には2列のコードとほとんど内容は同じになります。

なので、3列のカスタマイズで変更が必要な部分のコードだけを記載しておきます。

 

 

このままSTINGER8で表示させると以下のような記事一覧になります。

 

 

記事タイトルは基本的に3行までに収まる長さであれば高さもキレイに表示されますが、4行目までいくとその分記事の幅が高くなってしまいます。

その場合は文字サイズを縮小してみるなどの調整をしてみて下さい。

 

これでSTINGER8の記事一覧をカード型から、タイル状に2列・3列で表示させるカスタマイズができたかと思います。

 

スマホ対応のCSSコード

スマホでは上記コードが上手く表示できずに崩れてしまうので、スマホからの閲覧時の場合は以下のコードでカード型のまま1列で表示させるようにします。

 

 

これでスマホから見た場合は以下のような表示になります。

 

 

記事一覧をパソコンからはタイル状に表示、スマホからはカード型で1列に表示と使い分けられるので、一番利用しやすい方法でお使い頂ければと思います。

 

記事エリアの白背景が気になる方は

STINGER8ではデフォルトの状態で、記事エリアに白背景が設定されています。

これをなくして全体の背景と同色にしたいという方は、以下のコードをstyle.cssに追記して下さい。

 

 

上記コードを反映させると、余白も削除することができるので今までよりも横幅を広く使うことができます。

 

記事一覧以外に投稿ページの背景もなくなるので、もし都合が悪い場合は以下のコードをstyle.cssに追加して、ブログ背景を好きな色に変更するといいかと思います。

 

 

STINGER8カスタマイズまとめ

STINGER8の記事一覧を一度カード型にカスタマイズしてしまえば、あとはタイル状にしたりするのは簡単な作業でできます。

 

今回ご紹介したコードはあくまで私が使っているサンプルデザインのようなものなので、そこから自分らしいデザインにカスタマイズしていくのが基本になります。

 

とは言っても私自身もCSSにメチャメチャ詳しい訳ではないので、今も勉強中ですが色々ブログのデザインを自分の手で変えることはとても楽しいので、ぜひSTINGER8でカスタマイズに挑戦されてみて下さい。

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール