賢威8で記事内のアイキャッチ画像のサイズを変更する方法

賢威8のテンプレートを使うようになってから、ずっと気になってたことがひとつありました。

記事内の上部に表示されるアイキャッチ画像が、デカすぎる…ということ。

変更前のアイキャッチ画像がこちら。

大きく表示されているアイキャッチ画像

投稿を確認する度に「デカっ!」って思ってたので、そろそろ変えてみました(^^;

変更後はこちら。

少し小さく表示されたアイキャッチ画像

好みもあるかと思いますが、こっちの方が私は好きです。

サイズを小さくする方法ですが、追加CSSを使う方法と、子テーマを利用する方法を書くので参考にしてみて下さい。

簡単ですよ。

追加CSSを使ってアイキャッチ画像のサイズを変更

WordPress管理画面の外観から、カスタマイズを開きます。

外観のカスタマイズ

いちばん下にある「追加CSS」を開いて下さい。

カスタマイズの追加css

そこに、

.article-visual img {
width: 500px;
height: auto;
}

と入力して、公開ボタンをクリックします。

追加CSSに書き込み

たったのこれだけなんです。

これだけで記事内のアイキャッチ画像のサイズが変更できます。

あまりにあっという間だったので、もっと早く変更すれば良かったです(^^;

私はサイズを500にしてますが、ここの数値は変更可能なのでお好みで変更してください。

追加CSSの便利なところは、このままの画面で変更箇所を確認できるとこですよね。

追加CSS画面のまま確認

画面右側に表示されるサイト画面を操作して、今行った変更箇所を確認できます。

変更して、確認してまた戻って変更してって、結構面倒だったりしますよね。

子テーマに追加してアイキャッチ画像のサイズを変更する方法

管理画面メニューから外観のテーマの編集を開きます。

管理画面の外観からテーマの編集

子テーマが選択されているのを確認して、base.cssを開きます。

子テーマのbase.css

追加CSSの時と同じ、

.article-visual img {
width: 500px;
height: auto;
}

と入力します。

base.cssに入力してファイルを更新

ファイルを更新ボタンをクリックします。

これで、サイズ変更ができました。

どちらの方法も、入力する内容は同じです。

やりやすい方法で試してみて下さいね。

 

賢威使ってないんだけど、使ってみようかなという方はこちらから購入できます。

SEOテンプレート【賢威】