最近どうしてもしたかったWordPressのカスタマイズを今回してみようと思います。トップページの記事一覧をタイル状にするということです。
当サイトではSimplicity2というテーマを使っていますが、Simplicity2ではコードを追加しなくてもダッシュボード (管理画面) から記事一覧をタイル状にすることができます。
「外観」→「カスタマイズ」→「レイアウト(全体・リスト)」「一覧リストのスタイル」から設定を変更するだけです。
変更したらこのように表示されます。左右の縦幅は、タイトルの文字数の違いによって違ってきます。
今回、この高さをどうしてもそろえたかったのでカスタイマイズしてみることにしました。
タイルの高さを揃える方法
まずは簡単なコードを追記してみます。
この方法でどうでしょうか？
height:130px;
}
「entry-card-content」はこの緑色の部分。この部分の高さだけを130pxで統一したというものです。
タイルの高さは綺麗にそろいました。しかし、この方法だとそろってはいますがタイトルの長さによって日付け位置がバラバラになってしまうという問題が気になります。
タイルのタイトル部分だけをカスタマイズ
次にCSSのタイトル部分だけの高さを変えてみました。確認したらタイトルが2段のときは高さが「48px」、3段のときの高さが「72px」でした。
「この「72px」に合わせればうまくいくのでは？」と思ったので試してみることに。
height:72px;
}
どうやら成功したみたいです。しっくりきました。
タイトル文字数が2段になっているときは下に空欄ができるような表示になりましたが、これはこれでOKです。
まとめ
CSSにあまり詳しくないので方法がわからずネット上にも情報が少なかったですが、結構単純なCSSでカスタマイズすることができました。
ちなみにパソコンのレイアウトに合わせるとスマホのレイアウトでは違ってくる場合もあるので、その場合はパソコンとスマホの各デバイスで見たときの表示を切り替えるといいでしょう。
関連記事
