【Simplicty】コピペで簡単!トップページの記事一覧を揃ったタイル表示に変えるカスタマイズ。雑記アマゾンタイムセール中ホームWordPress/BlogSimplicity【Simplicty】コピペで簡単!トップページの記事一覧を揃ったタイル表示に変えるカスタマイズ。2分ツイートシェアはてブPocketLINESimplictyの標準機能のタイル表示は高さが微妙にずれてしまいます。すべてのタイルの高さを合わせるカスタマイズを紹介します。コピペでSimplicityのタイル状一覧表示をカスタマイズさて今回は、Simplicityのトップページの記事一覧のカスタマイズをお届けします。記事一覧を整列したタイルで表示する具体的にはこうなります高さの揃ったタイルでたくさん表示したい僕は、同じ大きさのタイル状のリスト表示を作りたいと思いました。Simplicityにはもともとタイル表示機能がいくつか実装されています。自分の作りたいレイアウトにはなりませんでした。記事一覧でなるべく多く表示したいSimplicityに実装されている「サムネイル大」が理想に近かったのですが、2列であることとタイルの大きさが大きいため、一覧で表示できる数が限られてしまいます。それに加えて、タイトル文字数によって中のレイアウトがずれてしまいます(高さがずれる)。これが気になりました。3列のタイルで表示したい文字や画像の大きさを考えると3列表示が理想的に感じました。タイルの数は、もともと実装されている「タイル3列」で増やすことができます。このタイル機能は、作者のわいひらさんが「ギャラリー風のタイル状リスト」を実現するために実装したものです。そのため、タイルの高さは揃わない仕様になっています。そのためいろいろな要因でタイルの高さが変わります。このレイアウトもギャラリー風でとても素敵だと思いますが、若干見ずらい気がします。そんなわけで、「サムネイル大」も「タイル3列」をそのまま使っても、僕の目指すレイアウトは難しいことがわかりました。カスタマイズで3列タイルでタイルサイズぴったり!最初は、タイル3列をカスタマイズしようと試みましたが修正箇所が多いため、「サムネイル大」をカスタマイズすることにしました。カスタマイズ手順1子テーマをインストール今回のカスタマイズはほぼコピペで終わりますが、子テーマの仕様が必須です。子テーマを使ってください。2後でもいいですが、忘れずにレイアウトタイプを「サムネイル大」にしてください。3子テーマのResponsiveファイルに以下のCSSをコピーしてそのままペーストしてください。カスタマイズしている方は、その下にペーストしてください。45px;}}PCで表示するとこのようなレイアウトになります。タイトルの行数も画像の高さに関係なくタイルの高さが同じになりすっきりしたレイアウトです。今回のカスタマイズでは文字の見やすさを考えてスマホ(縦表示)では2列、スマホ(横向き表示)では3列になるようにしました。このままだと、本文の抜粋がじゃまなので抜粋文字数を0にします。これですっきりしました。スマホの横向き表示は3列タイルです。カテゴリ別ページでも同じレイアウトになります。いかがでしたでしょうか?今回のカスタマイズは、PCとiPhone7で確認済みですが、その他の機種では微妙にずれる可能性があります。お持ちのデバイスで細かな調整をお願いいたします。ご不明な点や調整法がわからない場合はコメントください。キャラ画像付きのふきだしで会話風にするカスタマイズ。2017年10月7日ご指定のとおりにCSSをいじってみたんですが、、、変化なしでした。新着記事で試してみましたが、機能しませんでした。2わたしは固定ページ下に表示させたいと思っていて、それをウィジェットで表現していますが、今現在は、別の人が教えてくれたオリジナルウィジェットを導入しています。それで設定したものと競合が起こってしまうとかはないですよね?よろしくおねがいします。2017年10月9日とびぞう様ご質問ありがとうございます。家をあけていましたでのお返事が遅くなりまして申し訳ありません。順番にお答えいたします。新着記事で試してみましたが、機能しませんでした。ウィジェットに対するCSSではありません。記事中にもありますようにResponsiveのレイアウトを変えているだけです。子テーマを使ってResponsiveのCSSを変えてみてください。>2わたしは固定ページ下に表示させたいと思っていて、それをウィジェットで表現していますが、今現在は、別の人が教えてくれたオリジナルウィジェットを導入しています。それで設定したものと競合が起こってしまうとかはないですよね?固定ページの下に一覧を出して、タイル表示にしたいということでしょうか?オリジナルウィジェットがどのようなものわからないのでなんとも言えないのですが、このカスタマイズはレイアウトを変えているだけなのであまり関係ないと思います。返信するブログのUI変えました!参考にした記事、使ったプラグインなど紹介します。参考記事:【Simplicty】コピペで簡単!トップページの記事一覧を揃ったタイル表示に変えるカスタマイズ。2018年10月13日ご質問ありがとうございます。Thumbnails」はお使いになりましたか?そちらでサムネイルのサイズがあわないでしょうか?一度お試しください。コメントをキャンセルメールアドレスが公開されることはありません。【Simplicity】コピペで解決!タイトル下に人気記事をリ...プロフィール東北地方に住む「ごまっちょ」です。生活に役立つ「ライフレシピ」をお届けします。キャラ画像付きのふきだしで会話風にするカスタマイズ。(CSS修正しました)「Simplicity」記事ごとにナビやヘッダー、サイドバーなどを非表示にするカスタマイズ【Simplicty】コピペで簡単!トップページの記事一覧を揃ったタイル表示に変えるカスタマイズ。【今週のおすすめ記事】どんなほくろが危険なの?しっかり観察してみよう...手のひらや足にできたほくろに要注意。悪性化させない...たったこれだけ!PhotoShop7をWindow...ほくろの毛は抜いても大丈夫?抜く前に知っておくこと...寝る時にでる咳を止める方法。咳が出にくい寝方を紹介...わかりにくいから解説!レゴクラシックの種類とその違...レゴを買うならおすすめ!黄色のアイデアボックス(ス...鍵穴が硬い・入りにくい時の直し方【家の鍵の場合】...手のひらのほくろ。寝る時にでる咳を止める方法。咳が出にくい寝方を紹介。アフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。