【Simplicty】コピペで簡単!トップページの記事一覧を揃ったタイル表示に変えるカスタマイズ。

SHARE

【Simplicty】コピペで簡単!トップページの記事一覧を揃ったタイル表示に変えるカスタマイズ。

Simplictyの標準機能のタイル表示は高さが微妙にずれてしまいます。すべてのタイルの高さを合わせるカスタマイズを紹介します。

コピペでSimplicityのタイル状一覧表示をカスタマイズ

さて今回は、Simplicityのトップページの記事一覧のカスタマイズをお届けします。

記事一覧を整列したタイルで表示する

具体的にはこうなります

高さの揃ったタイルでたくさん表示したい

僕は、同じ大きさのタイル状のリスト表示を作りたいと思いました。

Simplicityにはもともとタイル表示機能がいくつか実装されています。

しかし、自分の作りたいレイアウトにはなりませんでした。

目指していたのは、

記事一覧でなるべく多く表示したい

Simplicityに実装されている「サムネイル大」が理想に近かったのですが、2列であることとタイルの大きさが大きいため、一覧で表示できる数が限られてしまいます。

それに加えて、タイトル文字数によって中のレイアウトがずれてしまいます(高さがずれる)。これが気になりました。

3列のタイルで表示したい

文字や画像の大きさを考えると3列表示が理想的に感じました。

タイルの数は、もともと実装されている「タイル3列」で増やすことができます。

しかしながら、少し問題があります。

もともとこのタイル機能は、作者のわいひらさんが「ギャラリー風のタイル状リスト」を実現するために実装したものです。

そのため、タイルの高さは揃わない仕様になっています。そのためいろいろな要因でタイルの高さが変わります。

このレイアウトもギャラリー風でとても素敵だと思いますが、若干見ずらい気がします。

そんなわけで、「サムネイル大」も「タイル3列」をそのまま使っても、僕の目指すレイアウトは難しいことがわかりました。

カスタマイズで3列タイルでタイルサイズぴったり!

最初は、タイル3列をカスタマイズしようと試みましたが修正箇所が多いため、「サムネイル大」をカスタマイズすることにしました。

カスタマイズ手順

①子テーマをインストール

今回のカスタマイズはほぼコピペで終わりますが、子テーマの仕様が必須です。必ず子テーマを使ってください。

②後でもいいですが、忘れずにレイアウトタイプを「サムネイル大」にしてください。

③子テーマのResponsiveファイルに以下のCSSをコピーしてそのままペーストしてください。すでにカスタマイズしている方は、その下にペーストしてください。

コピペするCSS

@charset "UTF-8";

@media only screen and (max-width: 780px){
#main .entry.entry-large-thumbnail {
    height: 230px !important;
}
.entry h2 {
    height: 3.5em;
}
}
@media only screen and (min-width: 380px){
#main .entry.entry-large-thumbnail {
   
    width: 30%;
    margin-left: 3px;
    margin-right: 3px;
}
.entry h2 {
    height: 3.8em;
}
}
@media only screen and (min-width: 780px){
.entry-large-thumbnail img {
    width: 214px;
    height: 168px;
}
#main .entry {
    width: 214px;
    height: 320px;
    
}
.entry h2 a {
    
    font-size: 18px;
    font-weight: normal;
}
.entry-snippet {
    height: 3px;
    
}
#main .entry {
    width: 214px;
    margin: 10px 5px 0 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    float: left;
    clear: none;
    overflow: visible;
}
.entry-thumb {
    float: left;
    margin-right: 0px;
    margin-top: 0px;
    margin-left: 0;
}
.entry h2 {
    padding: 5px;
}
#main {
    padding: 10px 15px 15px 30px; 
}
.entry h2 {
    height: 3.5em;
}
.entry-read {
    margin: 0px 0 67px 66px;
}
.entry .entry-thumb, .related-entry-thumb {
    margin: 0;
}
.entry-large-thumbnail img {
    width: 320px;
    height: 145px;
}
#main {
    padding: 10px 0px 15px 45px;
}
}

PCで表示するとこのようなレイアウトになります。タイトルの行数も画像の高さに関係なくタイルの高さが同じになりすっきりしたレイアウトです。

スマホでの表示

今回のカスタマイズでは文字の見やすさを考えてスマホ(縦表示)では2列スマホ(横向き表示)では3列になるようにしました。

このままだと、本文の抜粋がじゃまなので抜粋文字数を0にします。

これですっきりしました。

スマホの横向き表示は3列タイルです。

カテゴリ別ページでも同じレイアウトになります。

いかがでしたでしょうか?

今回のカスタマイズは、PCiPhone7で確認済みですが、その他の機種では微妙にずれる可能性があります。お持ちのデバイスで細かな調整をお願いいたします。

もしご不明な点や調整法がわからない場合はコメントください。

2 Comments

とびぞう

ご指定のとおりにCSSをいじってみたんですが、、、変化なしでした。

このセットを実現する前提環境を改めて教えていただけないでしょうか?
1おそらくなんらかのウィジェットに対するCSSだと思うのですが、それはなんですか?
 →simplicity2 の新着記事で試してみましたが、機能しませんでした。
2わたしは固定ページ下に表示させたいと思っていて、それをウィジェットで表現していますが、今現在は、別の人が教えてくれたオリジナルウィジェットを導入しています。それで設定したものと競合が起こってしまうとかはないですよね?

よろしくおねがいします。

返信する
goma

とびぞう様

ご質問ありがとうございます。しばらく家をあけていましたでのお返事が遅くなりまして申し訳ありません。
順番にお答えいたします。
>1おそらくなんらかのウィジェットに対するCSSだと思うのですが、それはなんですか?
 →simplicity2 の新着記事で試してみましたが、機能しませんでした。

ウィジェットに対するCSSではありません。記事中にもありますようにResponsiveのレイアウトを変えているだけです。
子テーマを使ってResponsiveのCSSを変えてみてください。

>2わたしは固定ページ下に表示させたいと思っていて、それをウィジェットで表現していますが、今現在は、別の人が教えてくれたオリジナルウィジェットを導入しています。それで設定したものと競合が起こってしまうとかはないですよね?

固定ページの下に一覧を出して、タイル表示にしたいということでしょうか?オリジナルウィジェットがどのようなものわからないのでなんとも言えないのですが、このカスタマイズはレイアウトを変えているだけなのであまり関係ないと思います。

返信する

コメントを残す

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