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

関連記事

カスタマイザー-i

新しくパワーアップされた「STINGER5」のテーマカスタマイザーを使ってみよう!

最近新しくリリースされた「STINGER5」html5でレスポンシブにされており内容も充実して更にパ

記事を読む

h2

ブログの見出しデザインに困ったのでこのジェネレータを使ってみた『 CSS見出しジェネレーター | Web道』

このブログは、Stinger3というテーマをもとにゴニョゴニョ…カスタマイズしているのですが、見

記事を読む

memotonewsp

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

前にも書いたのですが、書き忘れていたものがあったので第二弾。 前のものはこちら、【Stinger3

記事を読む

wordpress-logo-1-550x350

記事の読了時間”およそ○○分”を表示してくれるプラグイン「estimated」

こういうプラグインあったんですね。探せばだいたい見つかるWordPressプラグイン素敵です! 読

記事を読む

wordpress_stickers_everywhere

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

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

記事を読む

コメントを残す

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

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

  • 2016年12月
    « 12月    
     1234
    567891011
    12131415161718
    19202122232425
    262728293031  
電子書籍ストア BookLive!
PAGE TOP ↑