賢威7でアイキャッチ画像のサイズをカスタマイズする方法!

こんにちは、chiakiです。

 

数多く発売されている

WordPressテンプレートの中でも、

 

最も優れているのが賢威テンプレートです。

 

 

しかし、デフォルト状態のデザインでは、

他ユーザーと差別化できないため

少しばかりカスタマイズする必要があるんですね。

 

 

その中でも、今回は、

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

ついて解説していこうと思います!

CSSを変更する前の注意点

 

賢威7でアイキャッチ画像の

サイズを変更するには

 

CSSをカズタマイズする必要があります。

 

 

が・・・CSSは少しカスタマイズを間違えると、

以下(↓)のような悲劇が待ち構えています・・・

  1. 画面が真っ白になった…。
  2. 画面いっぱいにアルファベットが…。

 

これらになってしまうと直すのが超大変です・・・

 

 

なので、カズタマイズする前に

『CSS画面を2つ用意する』

ということを絶対にやっていただきたいです。

 

カスタマイズする前の

CSSを2つ用意することによって、

 

もし、入力ミスが起きても

別ページからサクっと戻せるので

安心して作業することができます^^

 

賢威7でアイキャッチ画像のサイズをカスタマイズ

 

上記の画像のように

デフォルト状態のアイキャッチ画像は

やけに小さく設定されていますよね。

 

 

アイキャッチ画像は

記事の顔と言っても過言ではないので、

できれば大きく目立った方がよいです。

 

なので、アイキャッチ画像を目立たせるためにも

サイズの変更をしていきましょう!

 

 

まず、Wordpressにて、

『外観⇒テーマ編集⇒functions.php』を開き、

以下(↓)のように進みます。

  1. Ctrl+Fで検索窓を出し
  2. 『set_post_thumbnail_size』と検索!!

 

すると、

2つの数字の変更ができますので、

それらをカスタマイズしていきます。

  • 246側:縦の大きさ
  • 200側:横の大きさ

 

この数字が

アイキャッチ画像の大きさになります。

 

画像のサイズは

好みの大きさでOKなのですが、

 

今回は、『300×200』に変更したとしましょうか。

(当ブログでも『300×200』に設定しています。)

 

すると、アイキャッチ画像は

以下(↓)のように変更されます。

 

あまりわからないww

 

まあ変更したのは横幅なので

少し横に大きくなりました。

 

個人的には、

一番しっくりくる大きさだと思います^^

 

 

ですが、あなたのデザインに合わせて

お好きなサイズに変更してみて下さいね!

 

  • CSSを編集しても反映されない時はコチラをどうぞ!

参考:WordPressのCSS編集後に反映しない時の対策

 

いかがでしたでしょうか?ご参考になれば幸いです。

 

関連記事

  1. 賢威7で関連記事を記事下に自動表示させるカスタマイズ!

  2. WordPressでCSS編集前の注意点!エラーの対策をしよう

  3. 賢威7でグローバルメニューを設置する方法について解説

  4. 賢威7で見出しをカスタマイズ!おしゃれデザイン6選【コピペ】

  5. 賢威7のグローバルメニューを最上部に固定&スクロール追従させる方法

  6. 賢威7でグローバルメニューの色を変更【文字・背景・マウスオーバー】

  7. 賢威7でファビコンをたった1分でカスタマイズ!

  8. WordPressのCSS編集後に反映されない時の対策

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。