Stinger3 カスタマイズ - サムネイル画像のサイズ変更
2017/10/25
自分がカスタマイズしたものを忘れないようにメモ。
以前、Stingerで使われている画像を自分で作った画像に差し替える。という投稿をしたかと思いますが。。
今回は、サムネイルの画像のサイズを変更するカスタマイズに関してのメモです。
個人的に、投稿一覧のサムネイルの画像はちょっと大きすぎるかも。。
と思っていたので、今回は小さくするためのカスタマイズ。
もちろん大きくしたい場合も同じところを変更すればオッケーです。
とりあえず今回は、home.phpの下記箇所を修正してみた。
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php $title= get_the_title(); the_post_thumbnail(array( 150,150 ), array( 'alt' =>$title, 'title' => $title)); ?> <?php else: // サムネイルを持っていないときの処理 ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="150" height="150" /> <?php endif; ?>
下記の150という数字を全部100に変更しました。
これでサムネイルの大きさが150×150だったものが、100×100になってくれるはず！
the_post_thumbnail(array( 150,150 ), <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="150" height="150" />
。。。
そうすると、画像とタイトルの幅がくずれてしまうね。。
画像の下にタイトルが入っていきそうな勢いな感じ。。
そこでstyle.cssの下記部分も変更しました。
レイアウトはstyle.cssですね！
変更前
.sumbox {
float: left;
height: 150px;
width: 150px;
}
.post .entry .entry-content {
float: right;
width: 380px;
padding-left: 20px;
}
変更後
.sumbox {
float: left;
height: 100px;
width: 100px;
}
.post .entry .entry-content {
float: right;
width: 500px;
padding-left: 20px;
}
とりあえずこれでばっちり。
のはず。
サムネイルの画像を表示するところはまだまだある感じなので、とりあえずはこれでやってるけど、気になりだしたら変更していきます！