【Simplicityカスタマイズ】TOPページで綺麗に記事を整列する方法

• 【Simplicityカスタマイズ】サムネイルにPVを表示する方法
• 【Simplicityカスタマイズ】サムネイルにSNS共有数を表示する方法
• 【Simplicityカスタマイズ】サムネイルにカテゴリーを表示する方法

上記に引き続き、本日も複数お問い合わせを頂いた「記事一覧のサムネイルにカテゴリーを表示する方法」です。

僕はphpやcssの専門家ではないのであくまで「素人」のカスタマイズ方法です。間違いや非合理的な部分があるとは思いますが、細かい点はご自分で修正をして頂ければと思います。

このサイトのトップみたいにする方法

トップで行っていること

記事が綺麗に並んでいるのがわかると思います。
Simplicityには「タイル」という表示方法があるのですが、タイトルなどによっては下記のような表示になります。

完全に好みだと思うのですが僕は整列している方が好きなので修正を行っています。
では、具体的な修正方法を説明していきたいと思います。

カスタマイズ前に行うこと

• バックアップを取る
• 子テーマを準備する

バックアップを取る

テーマを改造することになるので必ずバックアップをとりましょう。
このカスタマイズに関わらず、テーマを修正する際はバックアップが基本です。

子テーマを準備する

Simplicityの子テーマ

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。 というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。 それ

wp-simplicity.com

Simplicityのカスタマイズは子テーマで行うことが推奨されています。
公式サイトよりダウンロードが可能なので、ダウンロードをしましょう。

修正・追記を行うファイル

• Simplicityの設定変更
• style.css

上記のファイルに修正や追記を加えていきます。

Simplicityの設定変更

管理画面の左サイドバー「外観」 ＞ カスタマイズ ＞ レイアウト（全体・リスト）
一覧リストのスタイルの中から「サムネイル大」を選択してください。

設定を変更するとこのように綺麗に並ぶはずです。
次はCSSを変更して「タイル表示風」に変更をしていきます。

style.cssへの追記

.entry-thumb {
    margin-top: 0px;
}
 
#main .entry {
    height: 375px!important;
    margin: 10px 8px 0 10px!important;
    border: solid 1px #ccc;
}

「height: 375px!important;」この部分で縦の長さを
「border: solid 1px #ccc;」この部分で枠の色と太さを設定しています。

自分のサイトに合わせて修正をしてみてください。

まとめ

【Simplicityカスタマイズ】TOPページで綺麗に記事を整列する方法いかがだったでしょうか？
少しでも参考になれば幸いです。

これはSimplicityのタイル設定風に「サムネイル大」を設定するカスタマイズです。
工夫次第でいろいろと表示を変更できると思いますのでチャレンジをしてみてください！

それでは、本日はこれで失礼いたします。

［改訂版］WordPress　仕事の現場でサッと使える！ デザイン教科書［WordPress 5.x対応版］ Webデザイナー養成講座

created by Rinker

¥3,058 (2024/10/06 20:06:18時点 Amazon調べ-詳細)

• Kindle
• Amazon
• 楽天市場