WordPressのメディア設定の解説

今回はWordPressのメディアの設定をして行きます。メディアの設定は画像の設定になりますが、WordPressの画像の設定は特殊なので分かりにくい部分をピックアップして解説していきます。

スポンサーリンク
スマートフォン買取

メディアサイズの種類

まずは実際に設定画面を見て見ましょう。WordPressの管理画面の左サイドバーのメニューから「設定」⇒「メディア」と進んでみて下さい。

メディア設定-2

するとこんな設定画面になります。

メディア設定-1

ここに3種類の画像サイズがあります。「サムネイルのサイズ」「中サイズ」「大サイズ」の3種類。WordPressに画像をアップするとオリジナルサイズとは別に自動的にこの3種類サイズの画像が作成されます。

ただし、オリジナルの画像のサイズが「大」や「中」よりも小さかった場合は「大」や「中」の画像は作成されません。そんで、記事内とかに画像を挿入する場合はこのサイズの中から選んで画像を貼り付ける訳です。

つまり、画像を使う時には「オリジナルサイズ」でも「サムネイルサイズ」「中サイズ」も使えるという訳。このサイズの設定を今回はしていく事になります。私の場合は主に使っているのが「サムネイルサイズ」と「中サイズ」がほとんどです。

どこで使っているのかというと、私の場合は記事中の画像のサイズは「中サイズ」で、今読んでもらっている記事に載せている画像が中サイズです。これはブログの記事本文の部分の横幅に合わせたサイズがおすすめです。

また、記事一覧のページやカテゴリーのページでは「サムネイルサイズ」の画像を使っています。

メディア設定-3

という事で、私の場合は「中サイズ」の画像と「サムネイルサイズ」の画像しか使いませんので、「大サイズ」の画像は作らない設定にしています。もし「大サイズ」が必要な時があれば設定を一時的に変更して画像をアップすれば問題ありませんから。

それと、ここでメディアのサイズを途中で変更しても変更前にアップロードした画像のサイズが変更される訳ではありません。なので、メディア設定を変更したのに反映されないという方は再度同じ画像をアップロードして見て下さい。

面倒であれば全部の画像サイズを一括で変更できるプラグインなどもありますので、検索して探してみる事をおすすめします。

メディアサイズの設定をする

では詳しい設定を説明していきます。メディアの設定画面で私はこのような設定にしています。

メディアサイズ設定

初期状態のサムネイルサイズが150になってましたが、個人的にちょっと大きいと感じたので100に変更してます。

それから中サイズは記事内で使うサイズにしてますので、横幅を530に設定して高さの上限を0にしてます。0にすると、横幅の縮小率に合わせて高さが設定されます。つまり上限なしという設定です。

よく分からないという場合にはそのままでもOKです。後でプラグインなどを使って一括リサイズする事もできます。

ちなみに「Stinger系」のテーマを利用している場合には大サイズは「580px」が推奨のようです。高さは適宜設定して下さい。

それからサムネイルの「サムネイルを実寸法にトリミングする」にチェックを入れてます。これはサムネイル画像を使う時に指定したサイズに切り抜いて表示されます。

これにチェックを入れてない場合は指定したサイズの横もしくは高さに応じたサイズに縮小されるので、切り抜かれる事はないですが、きれいに四角にするのが私には難しいです。どういう事か説明しますね。

例えばサムネイルサイズの「100×100」に設定して「実寸法トリミング」のチェックを外しておく場合。

そこに200×100のサイズの画像をアップしてサムネイルを作成するとすると、横幅100で高さが50というサムネイルになるんですよ。

つまり、同じ収縮率になるので、きれいに100×100のサムネイル画像にしようとするなら正方形の画像をアップしないといけないという事です。という訳で私は「サムネイルを実寸法にトリミングする」にチェックを入れてます。

これらの事を考えて各サイズの画像のサイズを設定してみて下さいね。

ファイルアップロード場所の設定

最後に「ファイルのアップロード」という項目がありますね。要はアップした画像をどこに保存しますか?という設定です。まずは設定画面を確認してみましょう。

メディア設定-6

ここに「アップロードしたファイルを年月ベースのフォルダに整理」という項目があります。

通常アップした画像は「uploads」というフォルダの中に保存されますが、この「アップロードしたファイルを年月ベースのフォルダに整理」にチェックを入れるとその「uploads」フォルダの中にさらに「2014(年)」というフォルダが作成され、さらにその中に「3月」というフォルダが作成されて、そのなかにアップした画像が入ります。

沢山画像をアップする人には管理しやすいかも知れませんが、フォルダの中にフォルダというのは私は分かりにくいので「アップロードしたファイルを年月ベースのフォルダに整理」のチェックを入れてません。

つまり私の場合チェックを外しているので、アップした画像が月日関係なく「uploads」というフォルダに全部入っているという事ですよね。

余談ですが、私の場合は画像を貼り付けてソースコードを見るとこのようになってます。

メディア設定-7

赤の実線を引いた部分を見て下さい。ここに「dokidome.com」の中の「wp-content」の中の「uploads」の中の画像というコードになってますね。

先ほどの「アップロードしたファイルを年月ベースのフォルダに整理」にチェックを入れるとさらにこのコードが長くなります。「uploads」の中の「2014(年)」の中の「3(月)」という情報が付きますので、私のコードよりも長くなります。

これはお好みの選択でいいと思いますが、この設定を途中で変更すると画像がどこにあったのか分からなくなりますので、最初にきちんと考えて設定しておいて下さいね。これでメディア設定は完了ですので、最後に「変更を保存」をクリックしておきましょう。それでは次回はコメントに関する設定(ディスカッション設定)をやっていきます。
WordPressのディスカッション設定を解説

WordPressのメディア設定の解説”に7件のコメントがあります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. Chisapon

    しげぞう様

    ご返信ありがとうございます。
    よく理解できました。すっきりしました!いつもご丁寧にありがとうございます。

    また、ドキドメ!のような記事の見せ方の参考URLもありがとうございます。あのような見せ方もすごく魅力的だと思っていましたので、参考にさせてください。少しずつですが記事を増やしながら見やすいサイトになるようカスタマイズも並行して行っていますが苦戦することやわからないことが多く悶々としていました。丁寧にご教授くださり感謝です。めげずに引き続き頑張りたいと思います。
    今後ともどうぞよろしくお願い致します。

  2. しげぞう 投稿作成者

    Chisapon様

    返信ありがとうございます。Chisapon様の認識で大体合ってます。アフィリエイトブログの方では全ての記事(トップページ以外)をカテゴリー分けしてその各カテゴリーの最新記事に目次を設置してます。トップページの目次だけは普通の投稿ではなく、「固定ページ」で作成してフロントページとして固定してます。固定ページで記事を作成すると、カテゴリーは設定できませんので、トップページだけ固定ページです。

    一方ドキドメの場合は、ちょっと変更して各カテゴリーで目次を作成せずに、目次は大体「固定ページ」で作成しました。つまり各カテゴリーをまとめた目次を固定ページで作成してナビに設置したという感じです。前述したように「固定ページ」はどのカテゴリーにも属しません。

    それで、カテゴリーは一覧表示できるように抜粋記事にして「続きを読む」を設置しております。

    ドキドメ!のように各カテゴリーを目次にせずに抜粋の一覧にするのであれば次の3記事のカスタマイズが必要かと思います。
    トップページやカテゴリーページを抜粋記事の一覧表示にする
    TwentyTwelveに「続きを読む」を設置するカスタマイズ
    TwentyTwelveのアイキャッチ画像サイズをページごとに変える

  3. Chisapon

    しげぞう様

    ご返信ありがとうございます。
    すみません、しげぞうさんのドキドメとアフィリエイトで稼ぐ~のサイトがごっちゃになっていたようで、私がお聞きしたかったのはアフィリの方のサイトの方の構成でした。
    例えば、しげぞうさんのアフィリのサイトでのこのページ(ttp://affiliate150.com/category/seesaa)は、右サイドのカテゴリの「?Seesaaブログアフィリエイトとカスタマイズ」をクリックすると飛びますよね。このURLの、一番上の記事「まとめ(目次)」はしげぞうさんがおっしゃる通り、まとめページを最新の日付にして一番上にくるようにしているということは理解できました。その下の、「SeesaaブログをSearch Consoleに登録する方法」の記事は、すぐ上の最新記事まとめ(目次)ページ一覧には入れていないけれど、カテゴリは「?Seesaaブログアフィリエイトとカスタマイズ」のカテゴリに属している、という認識で良いでしょうか?まとめ(目次)ページでは、特に読んでほしい記事を抜粋しているということで合ってますか?

    また、ドキドメ!の右サイドカテゴリ「プラグイン」の例ですと、アフィリエイトで稼ぐ~のサイトとは異なり、4行ほどの記事が一覧で並び(ttp://dokidome.com/category/plugin/)、それぞれ「続きを読む」となっています。これは、単純に上から読ませたい順に日付を調整し、「続きを読む」の設定をしている、ということでしょうか?同じような見せ方をしたい場合、コチラの記事(ttp://dokidome.com/wp-customize/606/)を参考にすればできますか?

    本当にたくさん申し訳ないのですが、最後にもう1点、ドキドメ!のグローバルナビの「おすすめプラグイン」をクリックすると、おすすめのプラグインのまとめが一覧で出てきます。これも、上記の右サイドカテゴリ「プラグイン」に属する記事なのでしょうか?右サイドカテゴリのプラグインからは、グローバルナビにある「おすすめプラグイン」の記事が見当たらなかったので、いったいどのカテゴリに属している記事なのか…と、不思議で悶々と考えています。

    しょうもない質問を長々と申し訳ありませんが、気になって仕方ありません。ご教示いただけますと嬉しいです。どうぞよろしくお願い致します。

  4. しげぞう 投稿作成者

    Chisapon様

    コメントありがとうございます。例えばサイドバーの各カテゴリーをクリックするとそのカテゴリーの最新記事が表示されますよね。なので、普通の個別記事はカテゴリー分けしながら記事を書いていき、そのカテゴリーの最新記事といて各カテゴリーのまとめ(目次)を作成しています。つまり、新たにそのカテゴリーに記事を追加した場合にはそのカテゴリー目次の投稿の日付を最新にしております。

    私のブログで言うと、「プラグイン」カテゴリーで色々なプラグインの紹介記事を書き、最後にそのカテゴリーの最新記事としてプラグインのまとめページ(目次)を作るような感じにしてます。質問の回答になっているか分かりませんが、私はそのようなスタイルにしてます。また回答が思っていたのと違うという場合には再度コメント頂けると助かります。

  5. Chisapon

    しげぞう様

    ご返信ありがとうございます。数日家をあけており4日ぶりにPCを開きました。アドバイスいただいた通り、メディア設定をしたのち写真をアップロードし直したら無事に任意のサイズに変更できました!アップロードした後に設定変更をしては意味がなかったとわかりました。ご丁寧にありがとうございました。

    厚かましく恐縮なのですが、もう1つ、ふと疑問に思ったことがあり質問させてください。
    しげぞうさんのサイトは、右サイドのカテゴリからどれかタイトルをクリックすると、最初のページは目次ページになっていますよね?記事数が多いのでユーザーにわかりやすくするために、複数の子カテゴリを作らずにそのようなページ構成にしているのかと思うのですが、その場合、目次ページの中から分岐されている各記事は投稿の際、どのカテゴリに入れているのでしょうか?わかりづらくすみません、「カテゴリ→目次→各個別記事のリンク」の「各個別記事のリンク先」の記事のことです。各記事はすべていずれかのカテゴリ属しているはずだと思うのですが、その各記事はトップページのカテゴリからは飛ばないように(?)なっていますよね?それはどのように設定されているのでしょうか?私もカテゴリはあまりごちゃごちゃさせずに、おおまかなカテゴリだけ作ってそこから最初の記事を目次というか子カテゴリのようなページを作り、その先を個別ページにしたいと考えているのですが、その個別記事はどのカテゴリに設定すればいいのか…とふと思いましたため。記事作成の際、どのカテゴリにもチェックをつけずに投稿しているのでしょうか?
    すごくわかりづらい質問内容で申し訳ありませんが、ご教示いただけますと幸いです。

  6. しげぞう 投稿作成者

    Chisapon様

    毎度ありがとうございます!まず、最初にやるべきはブログのコンテンツやサイドバーのサイズなどブログの幅を決める事が先決です。それで、コンテンツ部分(記事本文部分)のサイズを把握しておき、WordPressのメディア設定でそのコンテンツの横幅に合わせたサイズにする必要があります。

    スマートフォンでの画像のサイズは通常でスマートフォンの画像サイズに自動で調整されると思いますので、PCサイズでの画像のサイズを考える必要があると思います。

    それで、問題はWordPressのメディア設定なんですが、これは設定を変えたからすぐに画像が全てそのサイズに変更される訳ではありません。つまり、設定を変更する以前にアップした画像は変更前のサイズでアップされているので、設定で画像のサイズを変更した場合には再度アップロードしなおす必要があります。

    これを一括でリサイズしてくれるプラグインなどもありますが、もしまだ枚数が少ないなら1つ1つ再度アップロードしながら試してみると良いと思います。まずは設定を変更し、1つ画像をアップして確認をしてみて下さい。

    それから記事中に画像を入れるときに「メディア」⇒「画像の選択」をした時に右下に画像のサイズが選べるようになってますので、貼り付ける画像のサイズを選択してから挿入するようにしてみて下さい。

  7. Chisapon

    しげぞう様

    いつもお世話になってます。
    この度、以前ご相談していたシーサーブログのブログをWordPressに引っ越しをしました。インポートした後、画像はまだすべてアップし直していない状態なのですが、シーサーの方の画像の横幅が少々大きいようで、引っ越し後新しいドメインの方をスマホで閲覧した際、横につぶれた感じで表示されてしまいました。やはりできるだけ早めに画像を上げ直した方が良いと思い、いくつか画像を新しくアップしたのですが、アップし直した画像はスマホではちょうど良いサイズ、PCではやや小さいサイズで表示されます。
    PCでもう少し大きく、かつスマホではぎりぎりつぶれない大きさにしたいと思い、メディアの設定にて中サイズの画像の横幅を350px(もとは300px)に設定したのですが、記事中にメディアを追加しても画像のサイズが変わりません。何か考えられる原因はありますでしょうか?

    また、しげぞうさんは画像サイズを中サイズ・横幅450pxで設定されているとのことですが、スマホではつぶれずにちゃんと表示できているのは何かやり方があるのでしょうか?
    PCでもスマホでもそれぞれのデバイスに合う形で表示させられれば…と悩んでおります。
    毎度お手数をおかけし申し訳ありませんが、ご教示願えますと嬉しいです。
    お忙しいところすみませんがどうぞよろしくお願い致します。