アイキャッチ画像の最適サイズ

Simplicityの特徴 フォーラム Simplicityについての質問 アイキャッチ画像の最適サイズ

  • このトピックには6件の返信、2人の参加者があり、最後にuにより10年、 11ヶ月前に更新されました。
6件の返信スレッドを表示中
  • 投稿者
    投稿
    • #33347
      u
      ゲスト

      わいひらさん
      いつもお世話になっています。
      Simplicityまだまだ使いこなせていませんが、気に入っています。

      さて、アイキャッチ画像の最適サイズを教えてください。
      ブログ中に利用した画像を適当に選んでアイキャッチに設定すると、画像の左端が切れてアイキャッチに表示される場合が多いので、アイキャッチ専用に画像を作っておけば解決できると考えました。
      アイキャッチ画像の最適サイズ、縦横比などありましたら教えてください。
      よろしく。

    • #33351
      Hidekichi
      ゲスト

      eye-catchに限らず、imgはたいていwidth:100%でheight:autoだったかと思うんですけれども、

      > ブログ中に利用した画像を適当に選んでアイキャッチに設定する

      この部分の詳細と、元の画像、端が切れていると思われる画像それぞれがどこかで見れるようなら、そのアドレスを教えてもらってよいでしょうか?

      ちなみにアイキャッチはサムネイルではないですよね?

    • #33357
      アバター画像わいひら
      キーマスター

      「アイキャッチのサムネイル」なら正方形に切り取られる仕様ではありますが、アイキャッチ自体は通常は切り取られないと思います。
      アイキャッチとは、どういった部分のことなのか、もう少し詳しくお願いします。
      できれば、キャプチャーや、実際のURLを貼り付けていただいて、この部分と言っていただけると、わかりやすいかと思います。

    • #33361
      u
      ゲスト

      Hidekichiさん、わいひらさん
      お返事有難うございました。
      えーっと、WordPressもブログもまだ始めて三か月足らずなのでショボイんですが、
      以下のサイトです。
      http://wareko.jp/wordpress/
      オリジナルの画像です↓
      http://wareko.jp/wordpress/wp-content/uploads/2015/10/wareko_de_pon.png
      だいたいいつも左端が切れます。
      まあ、多少切れてもあまり気にしていませんが対策があるならやりたいです。
      Simplicity1.8.0 子テーマ使わせて頂いております。
      よろしくお願いします。

    • #33362
      Hidekichi
      ゲスト

      やはり、切れてるのはサムネイルのようですね。
      わいひらさんがちょろっと言ってますが、正方形で切り取られるので、元々のアイキャッチを正方形で作れるば良いということなんですが、画像自体のファイル容量が少ないのであれば(スマホでもサックリ表示できるレベルなら)、サムネイルを取得せずに元の画像を取得して縮小すれば良いかと思います。
      そうすれば、アスペクト比がいくつであろうがそのまんま表示されます。

      トップリストのサムネイルのアドレスは
      http://www.wareko.jp/wordpress/wp-content/uploads/2015/10/101815_0109_1-150×150.png

      例えばこうですが、.pngの前の-150×150を無くせば元の画像アドレスになります。

      サンプル: サムネイルアドレスを元の画像アドレスに戻す | jsFiddle

      サンプルは.testの中にimgを作っているので、そのまんまではダメですが、結果を見てもらえばわかるように元の画像が表示されていると思います。後は、cssでサイズを指定したり色々とすることが可能です。
      以下CSSは元の画像のアスペクト比で表示した場合に、横サイズ150px、縦は元の画像のアスペクト比で横150pxの時のサイズ

      #list .entry-thumb img {
        width: 150px;
        height: auto;
      }

      あくまでも画像サイズが軽い場合に限ってですけどね。そうでない場合は、予め正方形で作れば良いかと思います。あるいは、縦のサイズを基準にした横のサイズ内に表示したい範囲を収めて、左右を決定するなどのトリミングが必要かと。

      まぁサムネイルはアイキャッチ、あるいは最初の画像から自動で作ってるので切れるもんなんですけどね。

    • #33367
      アバター画像わいひら
      キーマスター

      サムネイルの画像がそのように切り取られてしまうのは、Simplicityの仕様です。

      サムネイルを切り取られないようにするには、ちょっとしたカスタマイズが必要です。
      詳しい方法は、以下を参照してください。
      思ったより簡単!WordPressのサムネイルを別サイズも含め作り直す方法!! | 株式会社LIG
      WordPressのアイキャッチ画像のサイズを追加する方法
      その他にも「Wordpress サムネイル 大きさ 変更」みたいな感じでググればいろいろ情報が出てくると思います。

    • #33384
      u
      ゲスト

      Hidekichiさん、わいひらさん
      詳しい説明有難うございました。
      今後はアイキャッチ用の画像は正方形で作るようにします。
      150×150で作っておけば軽いので一番良いのですね。
      jsFiddleのサンプルプログラム有難うございました。
      こういうプログラム、じっくり眺めると意味は理解出来るのですが、
      jQueryはまだまだ初心者なので、自力で書く事は出来ないので大変参考になりました。
      WordPressもまだ初心者なので、何か分からない場合、それがWordPressの設定で出来るのか、
      使っているテーマの設定なのかが区別出来ないので、いつもここで質問させて頂いています。
      もう少し自力で解決出来るように精進したいです。
      今回も、いろいろと有難うございました。

6件の返信スレッドを表示中
  • トピック「アイキャッチ画像の最適サイズ」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)