2019年6月30日
当ページの大幅な変更作業を下記のように実施しました。
テーマの変更
テーマを「IMNews」から「Simplicity2」に変更しました。
変更理由
「IMNews」の外観は好きではありましたが、この先の様々な変更を加えるにあたって必要な情報を得るには難しいと判断したためです。
「IMNes」は海外産な上、使用している人も少ないからです。
反面、「Simplicity2」は国産。使用者も多いです。さまざまなカスタマイズの情報を得ることができます。
Simplicity2の投稿一覧のアイキャッチ画像サイズの変更
もともとは投稿一覧の150px×150pxのアイキャッチ画像でしたが、これを270px×180pxに変更しました。
ただし、スマホ向けは元のサイズとしました。
変更記録
①子テーマ「simplicity2-child」の「functions.php」に下記を記述。
//投稿一覧アイキャッチサイズ変更
add_image_size('thumb270',270,180,true);
②親テーマ「Simplicity2」の「entry-card.php」をコピー。子テーマ「simplicity2-child」に張り付け。
コピーした「entry-card.php」に下記の変更を加えました。
変更前
<a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb270', array('class' => 'entry-thumnail', 'alt' => '') ); ?></a>
変更後
<?php//投稿一覧アイキャッチサイズ変更箇所?>
<?php//thumb150→thumb270に変更?>
<a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb270', array('class' => 'entry-thumnail', 'alt' => '') ); ?></a>
<?php//投稿一覧アイキャッチサイズ変更箇所終?>
③子テーマ「simplicity2-child」の「style.css」に下記を記述。
/*投稿一覧アイキャッチサイズ変更*/
.entry-thumb img{
width: 270px;
height: 180px;
border-radius:0px;
}
④スマホ表示用のため子テーマ「simplicity2-child」の「mobile.css」に下記を記述。
/*投稿一覧アイキャッチサイズ変更*/
.entry-thumb img{
width: 150px;
height:150px;
border-radius:0px;
}
参考記事
【simplicity】記事一覧のサムネイル画像を好きなサイズに変更！簡単な方法で横長に出来ます
Simplicity2の関連記事一覧のアイキャッチ画像サイズの変更
もともとは記事の下に表示される関連記事一覧の100px×100pxのアイキャッチ画像でしたが、これを270px×180pxに変更しました。
ただし、スマホ向けは元のサイズとしました。
変更記録
子テーマ「simplicity2-child」の「style.css」に下記を記述。
/*関連記事一覧アイキャッチサイズ変更*/
.related-entry-thumb img {
border: 0;
width: 270px;
height: 180px;
}
子テーマ「simplicity2-child」の「mobile.css」に下記を記述。こちらスマホ表示用。
/*関連記事一覧アイキャッチサイズ変更*/
.related-entry-thumb img {
border: 0;
width: 100px;
height: 100px;
}