アイキャッチ(サムネイル)画像の大きさを変更する【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

関連記事

image

少しの手間をかけて抜粋部分を表示する。だってそれは読んでほしいから!

この抜粋部分に意図しないものが入ってしまい読んでほしいブログが残念な感じにならないように。 抜粋は

記事を読む

Stinger-minimum

Stinger3子テーマ「Stinger-minimum」のスマホテーマ対応をしました!

今回このスマホ用「Stinger-minimum」を作りました。 子テーマ「Stinger-min

記事を読む

side-no

Stinger3でスマホ用子テーマを使っている方はここにご注意だ!と思ったところ

最近スマホ用子テーマを作成したのですが、その方のブログを見たときはっ!っとなり、気になったので。

記事を読む

wordpress_stickers_everywhere

手軽にできる!「WordPress Portable」を使ってWordPressのローカル環境を作る

ローカル環境でWordPressを触ってみたいという方向けに、お手軽で数分でできてしまうローカル環境

記事を読む

Adventskalender

様々な想いを込めて。わたしが思う・考えるStiger3のデザイン  #Stinger-WP

皆さん!遂に2013年のAdvent Calendarが始まりました!この記事は#Stinger A

記事を読む

コメントを残す

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

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

  • 2016年8月
    « 12月    
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
電子書籍ストア BookLive!
PAGE TOP ↑