サポート » テーマ » WPマガジンテーマ「silverOrchid 」のアイキャッチ画像を切り抜いた画像にし

  • 解決済 USBmegane

    (@usbmegane)


    現在、PHP APPSさん( http://www.phpapps.jp/wordpress/ )という無料のレンタルブログサービスで、最新版のWordPressをインストールし、WordPressテーマ公式配布サイトから入手した「silverOrchid 」というテーマを利用しています。

    ・「silverOrchid 」テーマ配布URL
    http://wordpress.org/extend/themes/silverorchid

    このテーマは、ウェブマガジン風のレイアウトで、各ブログ記事のアイキャッチ画像を、ホームページに一覧で表示することができます。そのような中で、アイキャッチ画像に関する疑問が出てきましたので、こちらで質問させて頂きます。

    ●質問
    このテーマは、ホームページ上の各アイキャッチ画像のサイズが違います。例えば、私のブログ( http://usbml.phpapps.jp/ )の一番上のスライドショーの部分の画像は、カメラで撮影した画像がぴったり入る縦横比なのに対し、その下の各カテゴリーの記事一覧では、アイキャッチ画像が押しつぶされたような縦横比になってしまいます。

    このように、各アイキャッチ画像の縦横比がばらばらになってしまいます。そこでお伺いしたいのですが、たとえホームページ上で表示されるアイキャッチ画像そのもののサイズが違っていても、縦横比は正しい(つまり、アイキャッチ画像が、一定のサイズで「切り抜かれる」状態になる)ようにするには、どうしたらよいのでしょうか。個人的には、アーカイブページ(例: http://usbml.phpapps.jp/category/blog/photo/ )のように、どんなサイズの元画像でも、一定のサイズで切り抜かれたアイキャッチ画像として表示されるように設定したいと思っています。

    自分なりに調べてみたのですが、このテーマのどの部分(どのファイル)に「ホームページ上のアイキャッチ画像の大きさ」を指定するコードが書いてあるのかわかりません。

    以上、長文にて失礼致しました。恐れ入りますが、よろしくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは

    style.css 823行

    .feat-cat .left img {
    width: 285px;
    height: 170px;
    border: 1px solid #E9E9E9;
    border-radius: 3px 3px 3px 3px;
    padding: 4px;
    }

    widthとheightを以下のように置き換えてみて、どうですか?

    height: auto;
    max-width: 100%;

    トピック投稿者 USBmegane

    (@usbmegane)

    お返事ありがとうございます。

    ご指摘を頂いた部分のコードを改めて見直したところ、最終的に、カテゴリー別の記事一覧のアイキャッチ画像が「切り抜かれた」画像になりました。

    トップページのスライドショーコーナー右側のアイキャッチ画像は、まだまだ試行錯誤が続きそうですが、お教え頂いたことも参考にしつつ、カスタマイズしたいと思っています。

    この度は、ありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「WPマガジンテーマ「silverOrchid 」のアイキャッチ画像を切り抜いた画像にし」には新たに返信することはできません。