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

関連記事

top_niji

ブログのデザインを変更しました!そのとき考えたこと思ったこと

実は元のデザインを最新のStingerのバージョンに対応しようと思っていたのですが、なんだか新しいの

記事を読む

jet

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

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

記事を読む

memo

【Stinger3カスタマイズ】バージョンアップしたのでこのブログで変更したところを書き留めておく備忘録 #3

つい最近デザインを変更してみたのですが、どうにもノリノリでかけなくなってしまったのでまたデザインを元

記事を読む

Wordpress1

【WordPress】ウィジェットのタグクラウドをプラグインを使わずにカスタマイズする方法

タグクラウドをウィジェットを使って表示させたのですが、ウィジェット側では文字の大きさや並び順等を操作

記事を読む

Wordpress1

カスタムフィールドを使って記事下にまとめや今日の一言などいろいろと表示させてみよう!

前回このような記事 ブログの記事下に自分のプロフィールとRSS購読ボタンを設置する を書いたのですが

記事を読む

コメントを残す

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

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

  • 2016年5月
    « 12月    
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031  
電子書籍ストア BookLive!
PAGE TOP ↑