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

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

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

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

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

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

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

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

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

【simplicity】記事一覧のサムネイル画像を好きなサイズに変更！簡単な方法で横長に出来ます

WordPressのテーマ「simplicity」の記事一覧は、通常設定の場合正方形の画像がサムネイルに指定されます。 各記事のアイキャッチに設定した画像が、自動的に正方形にリサイズされサムネイルとして表示される仕組みです。 ...

coonelnel.net

2017.05.03

手順はこの２つ。

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

続いて手順２。まずは「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、関連記事のデザインをカスタマイズ

サムネイルのサイズが決まったら、あとは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は変更する必要があるかもしれません。今回はちょっと複雑で大掛かりなコードですから…。

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