プログラミングゆるめモ

プログラミングに関することをゆるくメモしてます

PHP stinger plus

stinger plus アイキャッチ画像サイズの変更方法

このブログで使用しているテーマ stinger plus のレイアウトでは
フロントページ(http://pgmemo.net/)は、左側のペインに最近の投稿が表示され
右側のペインにウィジェットが表示されます。
左側のペインに表示されている最近の投稿は、アイキャッチ画像とブログの書き始めの文章の一部が表示されます。
アイキャッチ画像とは、投稿ごとのサムネイル画像のことです。
アイキャッチ画像の大きさは、100×100 ピクセルです。
そして、アイキャッチ画像の大きさを設定することができません。
このブログのような、文章やコードがメインのブログの場合は、100×100でかまわないのですが
画像や動画を強調したいブログの場合には、アイキャッチ画像をもっと大きくしたいと思います。

そんな場合のための、アイキャッチ画像の大きさの変更方法です。
今回は、1.5倍の150×150 ピクセルに変更する方法を紹介します。

100×100(標準のアイキャッチ画像のサイズ)
4362924744_c914a231ac_o
150×150(変更後のサイズ)
4362924744_c914a231ac_o
1.5倍にすると、かなり印象が違いますね。

変更方法
アイキャッチ画像の画像サイズは、style.css に定義されています。
外観-テーマの編集を開き、スタイルシート(style.css)を選択します。
988行目あたりの以下が該当箇所になります。

二箇所の、width: 100px; を width: 150px; に変更します。
padding-left: 115px; を 画像の横幅+15にします。 今回は、150+15 で 165px となります。

変更後

変更後[ファイルを更新]の青ボタンを押して、変更を保存すれば
アイキャッチ画像は、150×150で表示されるようになります。

-PHP, stinger plus