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

tile-photo

どうも、野々村のすけ (TwitterLogo@nosuke_sns) です。最近どうしてもしたかったWordPressのカスタマイズがトップページの記事一覧をタイル状にするということです。僕はSimplicity2というテーマを使っているのですがSimplicityではコードを追加しなくともダッシュボード (管理画面) から操作できるんですね。

「外観」→「カスタマイズ」→「レイアウト(全体・リスト)」「一覧リストのスタイル」から設定ひとつでお手軽に変更することができます。

tile2

SPONSORED LINK

photo by régine debatty

▼変更したらこのように表示されます。タイトルの文字数の違いによってタイルの縦幅が変わってくるんですね。
title3

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

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

今回このタイルの縦幅を統一させるという方法を試してみたいと思います。

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

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

「entry-card-content」はこの部分。この部分の高さだけを変更しただけというものです。

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

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

tile5

それではCSSのタイトル部分だけの高さを変えてみましょうか。確認したらタイトルが2段のときは高さが「48px」、3段のときの高さが「72px」でした。この「72px」に合わせればうまくいくのでは?と思ったので試してみることに。

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

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

まとめ

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

後で確認したらタイル3列のときもこの方法でいけました。さあ、まだまだカスタマイズしていきますよ!

関連記事




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

最新情報をお届けします

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