【Simplicity】関連記事をカスタマイズ。サムネイルのサイズ変更とか

Simplicity 関連記事 WordPress

Simplicityの関連記事をカスタマイズしてみたのでCSSを公開します。

サムネイル画像のサイズ変更はPHPファイルを使う必要があります。でも意外と簡単に出来るので安心してください。

関連記事カスタマイズのヒントになれば良いと思います。

スポンサーリンク

Simplicityの関連記事をカスタマイズ

1、関連記事のサムネイルをサイズ変更

まずは、関連記事のサムネイル画像のサイズを変更する方法を見ていきましょう。

関連記事のデザインを変更するうえで、唯一PHPファイルのカスタマイズが必要となる部分です。

以前TOPページの記事一覧をカスタマイズしましたが要領はまったく一緒。

【simplicity】記事一覧のサムネイル画像を好きなサイズに変更!簡単な方法で横長に出来ます
WordPressのテーマ「simplicity」の記事一覧は、通常設定の場合正方形の画像がサムネイルに指定されます。 各記事のアイキャッチに設定した画像が、自動的に正方形にリサイズされサムネイ...

手順はこの2つ。

  1. functions.php」内で新しいサイズの画像を生成
  2. related-entry-card.php」内で新しく生成したサイズの画像を呼び出す

手順1は、前述の記事で詳しく説明してあるのでそちらをご覧ください。

 

続いて手順2。まずは「related-entry-card.php」を開きましょう。

これが記事一覧をまとめたPHPファイルなんですよ。

5行目あたりにこんな感じのサムネイルを呼び出すコードが記述されているはず。

<?php echo get_the_post_thumbnail($post->ID, 'thumb750', array('class' => 'related-entry-thumb-image', 'alt' => get_the_title()) ); //サムネイルを呼び出す?>

太字の部分を先ほど生成した名前に変更しましょう。

あとは、CSSでサイズを指定すればサイズが変更されるはずです。これを忘れないように注意しましょう。

ちなみに「.related-entry-thumb img」が対象のセレクタです。

2、関連記事のデザインをカスタマイズ

Simplicity 関連記事

サムネイルのサイズが決まったら、あとはCSSのみでデザインの変更が可能です。

僕が作ったのはこんな感じ。ちょっと長いですが…。

#related-entries .hover-card .related-entry{
   margin:0px;
   padding:15px 0px;
   border-bottom: 1px solid #e1e1e1;
}
#under-entry-body #related-entries a:nth-of-type(1){
   border-top: 1px solid #e1e1e1;
}
#related-entries .hover-card .related-entry:hover{
    background-color:#f6fcff;
  -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
}
#related-entries .related-entry-title{
   font-size: 16px;
   letter-spacing: 0.05rem;
   line-height: 170%;
   color:#4d4d4d;
   margin:0px;
}
.related-entry-thumb {
    margin-top:0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
.related-entry-thumb img{
   width: 150px;
   height: 90px;
   border-radius: 0px;
}
.related-entry-content {
    margin-left: 160px;
}
.entry-card-content .entry-snippet{
    display:none;
}
スポンサーリンク

最後に

それぞれのカスタマイズ環境によってCSSは変更する必要があるかもしれません。今回はちょっと複雑で大掛かりなコードですから…。

あくまで参考として使ってみてください。