STINGER8|記事一覧2列表示にする

STINGER8|記事一覧2列表示にする

STINGER8で記事一欄はデフォルト表示で下記のようになっていると思います。

 

それを、下記のようにカード型で、横2列に表示をさせる

 

丸々ソースコードを貼ってくのでコピー&ペーストしてください。
何か不具合起きた時の為に、元データのバックアップ等は必ずとるようにしてください。
※以前に何かカスタムで下記ファイルを編集している人は必要部分だけ追記してください。

※細かい調整は各個人でカスタマイズ>追加CSSからお好みで実施してください!

使用ファイル

・itiran.php

・style.css

 

itiran.php※条件としてデフォルトの状態

続きまして、style.cssのソースコードを記載します。カスタマイズ>追加CSSから実施して、自分好みの細かい設定をしてきます。

@media only screen and (max-width: 420px) から下はスマホの設定となります。カスタマイズ>追加CSSを使えば、反映がリアルタイムなので調整がしやすいです。初心者でもどこがどのコードなのかもわかりやすいと思います。
完成形(PC)

 

スマホ

 

ほんとはスマホも2列にしたい、、、

今後時間をみながら、ノマド憧れマンも見栄えを整えていこうと思います。
正直これやり始めるとキリがないので、まずは記事更新に励みたいと思いますw











コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です