アイキャッチ(サムネイル)画像の大きさを変更する【Stinger3カスタマイズ】

カテゴリー:WordPress    |    タグ:

アイキャッチ(サムネイル)画像の大きさを変更する【Stinger3カスタマイズ】

いくつかお問い合わせを頂いたので、アイキャッチカスタマイズについてこの記事でお返事とさせて頂こうと思います。

アイキャッチ(サムネイル)画像の大きさを変更する

手順としては

  • 1. functions.phpに画像の大きさなどを指定をする
  • 2. home.phpのコードを書き換える
  • 3. サムネイルを再度作り直す

となります。
では、順番にやっていきます。

1. functions.phpに画像指定をする

今回は横幅300、縦300のものを作成します。
数値などはご自身の環境に併せて変更してください。

functions.phpの7行目あたりに書かれている//アイキャッチサムネイルへ追記します。

補足

上記コードのthumb300は名前、300,300は横x縦の画像の大きさ、最後のtrueはアイキャッチ画像に指定したサイズに、元画像が合わなかった場合、どのように画像を切り出すかの指定となっています。

最後のtrueについての補足

最後のところは記述しなくてもいいものです。(記述しない場合はfalseになります。)
ですが、300x300のサイズに必ずしたいということであれば必ずtrueを記述します。

これを記述しないと、元画像が500x300だった場合、横幅は300になりますが、縦は300にはなりません。

イメージとしては下の図のような感じです。

t-image

「true」は指定サイズ切り抜き、「false」は指定サイズの大きい方へ比率をあわせリサイズするイメージです。

2. home.phpのコードを書き換える

home.phpの10行目あたりからを以下のように書き換えます。

画像が大きくなったのでこれにあわせてCSSも変更します。
変更する箇所は3つあります。(数値を変更します。数値はご自身の画像数値にあわせて適時変更してください。)


3. サムネイルを再度作り直す

さいごに、画像をつくり直す必要があります。
ひとつひとつもう一度アップするのは大変なのでプラグインを使います。

注意たくさんある場合は時間がかかりますのでご注意ください!

以上で完成です!
なんだか大変そうですが、やってしまうとサクッとできます!

モバイルとPCを違う大きさの画像にする

もしモバイルの画像を小さくしたい場合は、functions.phpへ画像サイズを指定し(1の手順を実行します)、home.phpへは以下のように記述します。

Stinger3の最近のバージョンではモバイルを振り分ける記述がしてありますのでそれを使用します。

例としてfunctions.phpで75x75サイズのthumb-mobileという名前で作成したことにしています。

左端を基準に切り出しする

これは余談ですが、trueで切り出しした場合、真ん中あたりを基点に画像を指定サイズに切り出します。

人物画像などの場合胸元あたりが切り出されてしまったりするので、左端から切り出したい場合は、こちらを参考にされるといいかと思います。

プラグイン

プラグインもあります。
基準点が様々なところからできるようです


さいごに

CSSや画像の大きさなどはお好みにあわせて変更してください!

ADVERTISEMENT

  • Pocket
  • このエントリーをはてなブックマークに追加

published:2014/04/14    Written by:
カテゴリー:WordPress,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

jet

バージョンアップしたJetpackがマークダウン対応されたので使ってみた

待ちに待っていた! Jetpackバージョンアップ(バージョン 2.8)でMarkdownが新しく

記事を読む

piyo

子テーマ「Stinger-minimum」の全貌を備忘録+CSS3のtext-shadow

子テーマ「Stinger-minimum」をリリースしてから早いくとせ。。経ちました最近ブログにお問

記事を読む

ohajiki

ol要素をCSSで装飾(デザイン)する方法を実践したみたので備忘録

サイドバーの所に、WordPress Popular Postsを使ってランキングを表示させてみた際

記事を読む

ELLY95_hanatotegami

【Stinger3カスタマイズ】少し落ち着いたのでこのブログで変更したところを書き留めておく備忘録 #1

このブログは、Stinger3というテーマをもとにゴニョゴニョ…カスタマイズしています。今回はこ

記事を読む

jQuery

記事内の外部リンクを別窓で開き、画像などをつけて(CSS装飾して)わかりやすくする【jQuery】

外部リンク(他のサイト)は別窓(新しいタブで表示)。そして、外部リンクですよ!というのをアイコンをつ

記事を読む

コメントを残す

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2016年6月
    « 12月    
     12345
    6789101112
    13141516171819
    20212223242526
    27282930  
電子書籍ストア BookLive!
PAGE TOP ↑