「Simplicity」タイル2列・3列の高さをそろえる方法

カラータイル

最近どうしてもしたかったWordPressのカスタマイズを今回してみようと思います。トップページの記事一覧をタイル状にするということです。

当サイトではSimplicity2というテーマを使っていますが、Simplicity2ではコードを追加しなくてもダッシュボード (管理画面) から記事一覧をタイル状にすることができます。

SPONSORED LINK

「外観」→「カスタマイズ」→「レイアウト(全体・リスト)」「一覧リストのスタイル」から設定を変更するだけです。

WordPressダッシュボード タイル2列

変更したらこのように表示されます。左右の縦幅は、タイトルの文字数の違いによって違ってきます。
タイル2列 高さ

今回、この高さをどうしてもそろえたかったのでカスタイマイズしてみることにしました。

タイルの高さを揃える方法

まずは簡単なコードを追記してみます。

この方法でどうでしょうか?

.entry-card-content {
height:130px;
}

「entry-card-content」はこの緑色の部分。この部分の高さだけを130pxで統一したというものです。

タイル2列 130px

タイルの高さは綺麗にそろいました。しかし、この方法だとそろってはいますがタイトルの長さによって日付け位置がバラバラになってしまうという問題が気になります。

タイルのタイトル部分だけをカスタマイズ

Simplicity2 タイル2列

次にCSSのタイトル部分だけの高さを変えてみました。確認したらタイトルが2段のときは高さが「48px」、3段のときの高さが「72px」でした。

「この「72px」に合わせればうまくいくのでは?」と思ったので試してみることに。

.entry-card-content h2{
height:72px;
}

どうやら成功したみたいです。しっくりきました。

タイトル文字数が2段になっているときは下に空欄ができるような表示になりましたが、これはこれでOKです。
Simplicity タイル2列揃う

まとめ

CSSにあまり詳しくないので方法がわからずネット上にも情報が少なかったですが、結構単純なCSSでカスタマイズすることができました。

ちなみにパソコンのレイアウトに合わせるとスマホのレイアウトでは違ってくる場合もあるので、その場合はパソコンとスマホの各デバイスで見たときの表示を切り替えるといいでしょう。

関連記事 : 「メディアクエリ」CSSだけでパソコン・タブレット端末・スマホ表示を切り替える
関連記事 : 「wp_is_mobile」パソコン・スマホで表示されるWEBページを切り替える

SPONSORED LINK

関連記事




この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでめちゃログをフォローしよう!