simple-image-sizes_ec

ワードプレス

メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Sizes」の設定方法

ハイどーも。お悩み相談室のコーナーです。

今回のテーマは【WordPress画像について】。本日もたくさんの悩み事が寄せられています。いくつか取り挙げてみましょう。


 クリックで拡大表示させたい画像だから、大きいサイズのままアップロードしたい!

 デフォルト選択肢の「サムネイル」「中サイズ」だと小さすぎて見栄えが悪いし、「フルサイズ」で貼り付けようかな・・

 でも、貼り付けたい画像がいっぱいあるし、全部サイズが大きいから、ページの読み込み速度が気になる・・

 ていうか「大サイズ」ってデフォルトで【1024×1024】でしょ?これ、自分のサイトでは絶対使うこと無いんだけど・・

 アップロードした画像全部に、『自動生成』がかかるんだよね?無駄なデータで容量がいっぱいになっていくのなんて嫌なんですけど!


めっっちゃ多いやん。

んーしかしなるほど。【自動生成】、【ページ表示速度】。
これらの情報を少しかじってしまうと、いろんな心配事が出てきてしまいますよね。

あの頃は楽しかった。気がかりなんてなんにも無かった

 出来れば私だってあの頃に戻りたい

なんて一気に老けこんでませんか?そこまで心配事が増えるほどの知識を得たあなたなら、
プラグインひとつで解決できますよ。

逆にハテナマークが飛び交っているあなたは、こちらから読み進めてください 

目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画

最後にこのページに戻ってきた時には、スッキリしているはずです。

ズバリ、解決策は?

伝わりやすい大きさのまま、画像をアップロード
⇒「メディアを追加」画面で「サイズ」の選択肢を増やす

で、解決すると思いませんか?

 Before

display-speed_03

 After

Simple Image Sizesの導入

 プラグインの導入前には必ずバックアップをとりましょう。 参考記事

管理画面内「プラグイン」→「新規追加」から【Simple Image Sizes】で検索し、インストール・有効化します。(作者: Rahe)

simple-image-sizes_01

管理画面内「設定」→「メディア」に入ると、設定項目が増えていることが確認できます。

 クリックで拡大

simple-image-sizes_03_1

この中で、選択肢として新たに欲しいサイズを自由に設定していきます。私の場合は上の図のように、既にsize1~size4が設定されている状態でした。これらは、記事抜粋箇所などのサムネイル画像に使用するため、テーマ側からの命令で自動生成されているもの。

というわけで、これらは消さずに残しておき、新たに欲しいサイズを追加していきます。各項目の意味は下図の通り。

 クリックで拡大

simple-image-sizes_04

「切り抜き」項目は、長辺に合わせてのリサイズをせず、指定されたサイズに切り抜く、ということです。サムネイル画像などに使います。

新しいサイズを追加する

新たなサイズを追加するには、左下の「Add a new size of thumbnail」をクリック。するとすぐ上に現れる「thumbnail-name」を好きな名前に書き換え、横の「Validate image size name」をクリックします。

simple-image-sizes_08

simple-image-sizes_09

すると新たなラインが追加されるので、各項目の設定をして「Validate」ボタンをクリックすると確定されます。

 クリックで拡大

simple-image-sizes_10

これを繰り返し任意の追加サイズを設定していきます。最後に「メディア設定」画面一番下の「変更を保存」をクリックすることをお忘れなく!私の設定後はこんなかんじになりました。

 クリックで拡大

simple-image-sizes_11

高さ上限は全て「9999」にして実質無制限にしています。

 size5 は自分の記事ページ最大幅に合わせたもの。

 size6 は3つの画像を横並びにしたい時など、表示は小さくてよい場合のもの。

 size7 は同様に、2つの画像を横並びにしたい時のためのもの。

使用テーマのカラムサイズにより、必要なものを作成してください。(使いどころは後述)
新テーマへ移行したので、現在の私の設定はそれに合わせて変更しています。

デフォルトの自動生成を解除するには?

デフォルトで設定されている「サムネイル」「中サイズ」「大サイズ」の自動生成を解除したい場合は、全ての項目に「0」を入力します。するとその部分の設定項目は無効になり、自動生成されなくなります。

simple-image-sizes_12

今使用中のテーマで使われていなさそうなサイズは、このように解除してしまって構わないと思います。ただし、新しいテーマに変更した場合などに、もしかするとスライダーなどで必要とされることになるかもしれません。

今後のテーマ変更の予定や、サーバー容量との兼ね合いで判断しましょう。

アップロード済の画像にも適用するには?

当然ですが、【プラグインの項目設定を保存した後から、新たにアップロードする画像】に対して自動生成が行われるので、既にメディアギャラリー内にある画像には、新たな選択肢は現れません(いきなり全画像に適用されててもコワい。)

これまでの全ての画像にも選択肢を増やしたい場合は、「Regenerate Thumbnails」をクリックすると、過去にアップした画像全ての新設定サイズを追加で自動生成してくれます。

simple-image-sizes_05

これもサーバー容量との兼ね合いで判断ですね。既に大量の画像をアップしている場合は考えものです。部分的に修正したいだけなら、同じ画像をダウンロードし、再アップロードして置換するのが得策でしょう。

または⇒こちらで紹介しているように、メディアライブラリからひとつずつ対象画像を選ぶこともできます。

【例】私が設定したサイズの使いどころ

size6 や size7を使う事例

下のように画像を並べたい時などは、size6(幅200px)で充分です。2カラムならsize7(幅300px)がベストでしょう。クリックで拡大してもらえればOK!な事例ですね。

 クリックで拡大

simple-image-sizes_07

simple-image-sizes_07

simple-image-sizes_07

size5を使う事例

拡大表示してもらいたい、かつ記事ページ最大幅で表示させたい場合です。

 クリックで拡大

media-setting_03

まとめ – 表示速度UPの観点からのベストな画像挿入

 まず自分のサイトの、記事ページ最大幅を知る  参考記事

 Simple Image Sizesで最大幅の挿入サイズを設定(必要になりそうなサイズも任意で)

 画像の目的によって、アップロード前に判断 

拡大不要な画像の場合
容量削減のため、記事ページ最大幅、またはそれ以下にリサイズしてアップロード
 サイズ「フルサイズ」+リンク先「なし」

拡大したい画像の場合
任意の大きさのままアップロード
 サイズ「記事ページ最大幅」(など任意)+リンク先「メディアファイル」


お疲れ様でした!

今ならきっと、別記事で出したこの問題 にも答えることができますね!

今回はあくまで、基本的な知識を身につけつつ【すぐに始められる表示速度改善】をテーマに説明してきました。記事数が山盛りになる前に実践しておきたい対策です。

ただし、MacのRetinaディスプレイをはじめ高解像度の環境で閲覧した場合、”見栄え的に”少し残念に思うこともあると思います。

実は今回紹介した手法を利用しつつ、その見栄え対策も可能。【表示スピードとのバランスを保って行うRetina対策】。よくばりな目標ですが、興味があればこちらもどうぞ 

【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetinaディスプレイ対応方法

さらには・・・表示速度を極端に遅らせている、公式シェアボタンを変更すれば、もー完璧。

カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタマイズ

1. サイト表示速度改善計画 2. 設定不要プラグインの導入
 display-speed_ec1_283  unveil-lazy-load_ec_283
3. メディア設定と画像サイズ 4. “WEBサイズマスター”へ
 media-setting_ec1_283  browzer-extension_ec_283

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  2. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  3. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  4. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  5. ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正体

関連記事

  1. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】もっと美しくワガママに。スライダー画像さえも綺麗に表示させてしまう…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

  2. blog-theme-mag_ecmg-ps

    ワードプレス

    【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト…

    本当のことを話します。ワードプレスのブログテーマ【MAG】。このサ…

  3. lightshot_ecmg

    WEBデザイン

    Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャーツールLightSh…

    "気軽な"先輩をウマく使おう。それなりに融通のきくMacのスクリー…

  4. description-video_ec
  5. retina-logo_ec

    ワードプレス

    【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像…

    サイトロゴは、サイトの顔。このサイトでは最上部にロゴを配置していま…

  6. screenpresso-capture_ec

    ワードプレス

    その瞬間をキャプチャー。Screenpressoでブログに必須のスクリーンショットを撮る方法

    ピクセル単位でキレイにキャプチャー。前回の記事ではScreenpr…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. theme-change_ecrt
  2. extension-tools-for-bloggers_ec
  3. adjust-the-button_ecmg
  4. todoist-tips_ecmg
  5. valuable-content-from-image_ec
  6. business-books_ecmg
  7. todoist-extension_ecmg
  8. retina_ecmg
  9. tcd-theme-selection_ecmg
  10. display-speed_ec

ピックアップ記事

  1. like-button-card_ecmg
  2. original-share-button_ecmg
  3. blog-contents_ecrt
  4. facebook-page-plugin_ecmg-ps
  5. gif-animation_ec
  6. todoist-productivity_ecmg
  7. todoist-constitution_ec
  8. chrome-font_ecmg
  9. reset-button_ecrt
  10. blog-theme-mag_ecmg-ps

強みを見つけて、活かしていくために。

business-books

タスク管理で、自己管理。

todoist

おすすめ記事

  1. WordPressサイトを丸ごとバックアップ!「BackWP…
  2. Windows?Mac?なんでもゴザレ。スクリーンショットに…
  3. きれいにしっかり画像圧縮。WordPressプラグインCom…
  4. 簡単に予定変更。Todoistで実現する、カレンダーだけでは…
  5. ほら、こんなに直感的。投稿記事の順番を並び替えるWordPr…

魅力的なブログを、今すぐ作る。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

最近の記事

  1. 【使用者レビュー】WordPress初心者にこそおすすめのブ…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  4. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  5. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…
  2. 【保存版】知ったら戻れない、美しさの極みへ。WordPres…
  3. 【目的別】とっておきのWordPressテーマ比較。TCDテ…
  4. 【フリーランス必見】確実に納期を守るために。タスク管理ツール…
  5. 目指せ軽量化!今から始める、WordPressサイトの表示ス…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  2. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  3. tcd-mag_ecmg

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  4. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画
  5. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
PAGE TOP