『LION MEDIA』と『LION BLOG』の画像サイズを調べたよ

『LION MEDIA』と『LION BLOG』の画像サイズを調べたよ

『LION MEDIA』と『LION BLOG』の画像サイズを調べたよ

『LION MEDIA』と『LION BLOG』をいろいろな角度から探っている こはるです。

 

今回のテーマは、画像サイズ!

 

『LION MEDIA』と『LION BLOG』で使われている画像サイズについて調べてみました。

 

『LION BLOG』にはどんなカスタマイズ項目があるのって方はこちらから。

『LION BLOG』カスタマイズの使い方【項目一覧】

『LION MEDIA』ってなぁに? どんな機能があるのって方はこちらをご覧ください。

『LION MEDIA』はWordPress初心者にオススメのテーマ!

『LION MEDIA』カスタマイズの使い方【基本と設定一覧】初心者向け

画像の自動生成のおはなし

 

まず、WordPressの機能のおはなし。

WordPressでは、画像をアップロードするたびに、他のサイズの画像が自動生成されるんだよってことを知っていますか?

 

知らないうちに

画像が自動生成されてサーバーの容量を圧迫している・・・・

なんてことにならないためにも

テーマで使われている画像サイズを知っておく

無駄に大きい画像をアップロードする必要がなくなります。

 

『LION MEDIA』と『LION BLOG』ではどうなの?

WordPressのテーマを、『LION MEDIA』または『LION BLOG』に設定していると、メディア設定の画面上に『LION MEDIA』または『LION BLOG』の推薦サイズが青い文字で表示されます。

『LION MEDIA』のメディア設定画面

『LION MEDIA』のメディア設定

どちらのテーマを使っていても推薦サイズは以下のとおりで同じです。

サムネイルのサイズ:幅160px × 高さ160px

中サイズ:幅の上限300px × 高さの上限300px

 

 

しかし、これ以外にも自動生成されている画像サイズがあるのです!

 

・・・それは、

icatch size

 

LION MEDIA』:幅の上限730px × 高さの上限410px

LION BLOG』:幅の上限890px × 高さの上限500px

medium_large size

 

LION MEDIA』、『LION BLOG』共通

幅の上限768px × 高さの上限 なし

 

この2つの画像サイズが追加で自動生成されているのです。知っていましたか?

 

 

ということは・・・1つの画像をアップロードすると、

サムネイルサイズ

中サイズ

大サイズ(設定している場合)

icatch size

medium_large size

5サイズが自動生成されるのです。ビックリですよね。

サーバー上に保管されている画像は、1つの画像につき、オリジナルも含めると6枚ということになります。

スポンサーリンク

自動生成されない条件とは

 

アップロードした画像サイズが

設定されているサイズの上限に満たない場合は自動生成されません

 

以下の条件で解説しますね。

使用するテーマ:『LION MEDIA』

 

メディア設定(幅×高さ)

・サムネイルのサイズ:160×160 px

・中サイズ:300×300 px

・大サイズ:600 ×600 px

 

テーマ設定(幅×高さ)

・icatch :730×410px

・medium_large:768×設定なし

 

この条件で、画像サイズ:800 × 533 px をアップロードすると5サイズの画像が作成されます。

画像サイズのイメージ

サムネイル 160×160

中サイズ 300×200

大サイズ 600×400

アイキャッチ 730×410

ミディアムラージ 768×512

(画像サイズ表示は、幅×高さです)

 


では、同じ条件でアップロードする画像サイズを600×400pxに変えてみると、3サイズの画像しか作成されません。

3サイズの画像イメージ

サムネイル 160×160

中サイズ 300×200

大サイズ 600×400

icatchサイズ、medium_largeサイズは、作成できるサイズに達していないため自動生成されないのです。

 

ここで1つ疑問が

アップロードする画像のサイズ」と「設定している大サイズ」が同じなんだけど、わざわざ自動生成されちゃうの?

設定されている画像サイズアップロードする画像サイズ同じ場合、自動生成の条件にあてはまるので勝手に画像が作られてしまいます。オリジナルサイズと同じやからいらんのに・・・って思って残念ながら、どうすることもできません 😥 。

 


じゃぁ、同じ条件でアップロードする画像の高さを少し変化させてみました。

画像サイズ:600×410pxをアップロードした場合、4サイズの画像が作成されます。

4サイズの画像イメージ

サムネイル 160×160

中サイズ 300×200

大サイズ 600×400

アイキャッチ 600×410

アイキャッチサイズの条件は730×410です。高さの上限サイズにあてはまるためアイキャッチサイズが作成されたのです。

 

まとめると、

「幅」または「高さ」の上限にあてはまれば自動生成されるということです。

 

 

これらのことを頭に入れておいて、『LION MEDIA』、『LION BLOG』で使われている画像サイズを見てみましょう。

WordPressの管理画面

 

投稿一覧のサムネイル

投稿一覧

サムネイルサイズ:160×160pxが使われています。

 

投稿編集のアイキャッチ画像

投稿編集のアイキャッチ画像

オリジナルの画像サイズが使用されています。

 

外観>カスタマイズ設定

カスタマイズ設定で画像を設定した時に表示される。

カスタマイズ設定の画像

中サイズが使用されています。

 

スポンサーリンク

LION MEDIA、BLOGで使われている画像サイズ

 

TOPページ

ピックアップ記事『LION MEDIA』のみ

TOPピックアップ記事の画像

ここに使われている画像サイズは、アイキャッチサイズ 730×410pxです。フレームの大きさは、画面やブラウザーのサイズに合わせて伸縮します。

 

サイトメイン画像『LION BLOG』のみ

『LION BLOG』ベースデザイン CONTRAST メイン画像あり

メイン画像はカスタマイズで指定されている画像サイズが使用されています。(横1600px×900px

 

 

投稿・アーカイブ記事

『LION MEDIA』

投稿・アーカイブ記事のイメージ

表示されてるフレームのサイズは、ビューレイアウト設定よって異なりますが、実際に使われている画像のサイズは「1カラム」「2カラム」ともにアイキャッチサイズ:730×410pxです。

 

『LION BLOG』

『LION BLOG』ベースデザインDARK

表示されてる画像のフレームサイズは、記事ビューレイアウト設定よって異なりますが、実際に使われている画像のサイズは、レイアウトが「1カラム」「2カラム」、記事ビューレイアウトが「ワイド」「画像レフト」どれであったとしてもアイキャッチサイズ:890×500pxが使われています。

 

 

TOPランキングボックス『LION MEDIA』のみ

TOPランキングボックスイメージ

こちらに使われている画像サイズは、アイキャッチサイズ:730×410pxです。

 

TOPカテゴリーボックス『LION MEDIA』のみ

TOPカテゴリーボックス

こちらに使われている画像サイズは、アイキャッチサイズ:730×410pxです。

 

最近の記事・人気記事『LION MEDIA』 『LION BLOG』

最近の記事、人気記事の画像イメージ

最近の記事に使われている画像サイズは、サムネイルサイズ:160×160pxです。

人気記事(Ranking)に使われている画像サイズは、アイキャッチサイズです。『LION MEDIA』は730×410px『LION BLOG』は890×500pxです。

 

投稿ページ

タイトル部分

『LION MEDIA』

投稿ページ タイトル部分

タイトルの背景、右側の画像、ともにアイキャッチサイズ:730×410pxが使われています。

 

『LION BLOG』

画像の赤枠は気にしないでくださいね。(他の記事で使った画像を使い回ししています。)

投稿ページ 投稿日設定

投稿ページのタイトル下に表示される画像は、アイキャッチサイズ:890×500pxが使われています。

 

 

関連記事『LION MEDIA』 『LION BLOG』

関連記事イメージ

サムネイルサイズ:160×160pxが使われています。

 

 

前次記事『LION BLOG』のみ

『LION BLOG』前次記事

サムネイルサイズ:160×160pxが使われています。

 

CTAボックス『LION MEDIA』 『LION BLOG』

CTAの画像

オリジナルの画像サイズが使われています。900px×600pxをアップロードしています。

幅は最大680pxまで、高さは画像サイズが適用されます。今回の場合だと高さは600px。

 

ただし、横幅には注意が必要

表示幅のMAXが680pxなので、今回アップロードした画像の場合、幅が900pxでサイズがオーバーしています。高さが固定されているため、900pxから680pxへ無理やり圧縮したような表示になってしまいました。ブラウザーのサイズを変更した場合も同じように圧縮されてしまいます。

オリジナルの画像

CTAサンプル用

 

強引に圧縮されてる例

横幅変更したCTA

横幅の伸縮比率に合わせて高さも変更されれば、こんなことにはならないんですけど、それができないので、CTA画像を設定するときはアップロードする画像サイズも考えなければいけませんね。

 

固定ページ

ランキングページ『LION MEDIA』 『LION BLOG』

固定ページのランキング画像

サムネイルサイズ:160×160pxが使われています。

 

ということで、

「サムネイル」「中サイズ」「アイキャッチ」と「オリジナル」しか使われないということですね。「medium_largeサイズ」は作成されるけど、どこに使われているのか全くわかりませんでした。

 

投稿記事内で画像をつかう場合

投稿記事内の画像

投稿ページには余白が設けられています。横幅いっぱいに記事や画像が表示されるというわけではなく、あらかじめ表示される幅が決まっているということです。

どんなに大きな画像をアップロードしても、結局、決められた幅に合わせて表示されてしまうのです。それだったら、はじめから決められた幅を超えない画像をアップロードすれば、データの無駄を無くせるということですね。

上の投稿ページの画像ですが、幅が1438pxあります。クリックするとオリジナルサイズが表示されます。投稿ページ上では、縮小されて表示されているっていうのがわかりますよね。

 

投稿ページで設定されている幅は?

 

『LION MEDIA』

2カラム:743px

1カラム:740px 820px 900px 100%(最大1100px)

 

『LION BLOG』

2カラム:704px

1カラム:740px 820px 900px 100%(最大1038px)

 

自分が設定しているレイアウトに合わせて、画像のサイズを合わせれば無駄なく使えるということです。

 

まとめ

 

『LION MEDIA』『LION BLOG』で、最低限、必要な画像サイズは「サムネイル」「中サイズ」「アイキャッチ」の3種類。

 

2カラムで使用しているのであれば、

『LION MEDIA』幅743px以上

『LION BLOG』幅890以上 の画像は不要ということですね。

 

でも、大きな画像を見せたいときもありますよね。そんなときは、記事の中には小さめの画像を貼って、大きめの画像へリンクを貼るっていうのも一つの方法です。そうすれば記事を読み込む時の時間が短くなります。

 

大サイズ」はどこにも使われないので確実にいらないです(個人的意見)。

使わない場合は、メディア設定で値を0にすれば自動生成されません。もし投稿記事内でいつも使用する画像サイズが決まっているのであれば、そのサイズを設定しておくことで便利に使えそうです。

 

 

LION MEDIA』ってなぁに? どんな機能があるのって方はこちらをご覧ください。

『LION MEDIA』はWordPress初心者にオススメのテーマ!

『LION MEDIA』カスタマイズの使い方【基本と設定一覧】初心者向け

LION BLOG』にはどんなカスタマイズ項目があるのって方はこちらから。

『LION BLOG』カスタマイズの使い方【項目一覧】

スポンサーリンク