【Simplicty】コピペで簡単!タイル表示のカスタマイズ。ずれないでPCもスマホもたくさん表示できる!

シェアする

コピペで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で確認済みですが、その他の機種では微妙にずれる可能性があります。お持ちのデバイスで細かな調整をお願いいたします。

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

スポンサーリンク

シェアする

フォローする