サポート » 使い方全般 » トップページ等で記事一覧で記事を取得した際、画像を一定幅以下に一律

  • ■現状のご説明
    現在、2カラムのテーマで運用しており、既に1000近い記事を保有しています。
    トップページの左カラムにメニュー、右カラムに記事一覧を表示しています。

    ■困っている点
    デザインリニューアルに伴い、3カラムを採用したいと考えていますが、
    3カラム化に伴い、記事一覧を表示する部分(中央カラムを予定)の横幅(width)が
    2カラムデザインよりも小さくなる予定です。
    それに伴い、<more>タグ以前にある画像の最大横幅が2カラム向けのサイズになっており、
    3カラム化を行うと画像がはみ出ることが予想されます。
    また、アイキャッチ画像などは特に設定しておりません。

    ■質問
    記事を取得する際、含まれる画像の横幅を指定値以下に一律縮小して表示するなどの
    方法は何かございますでしょうか?
    既に1000以上記事があるため、1つ1つ、<more>タグ以前にある画像を縮小するのは
    作業量的に厳しい状態です。
    何か改善策などありましたら教えて頂けると幸いでございます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • 最終的にどういう風に表示したいのかが書かれていらっしゃらなかったので、想像の範疇ですが:

    CSSで解決する方法
    ・エントリのimgに対してCSSで幅を指定する
    または
    ・overflowを指定してはみ出た部分を表示させないようにする

    プログラム的に解決する方法
    ・エントリに書かれている(又はアタッチされている)イメージを取得し、エントリが書かれる時(the_contents()等)にフィルタをかけて幅(必要なら高さも)を指定し直す
    *この際、moreタグ以前と以下で処理を変えるか、デザインに合わせて調整する必要があるかも知れません

    CSSでの解決が楽だとは思いますが、現状の指定の方法によっては絵のサイズがおかしくなる可能性も拭えません(縦長や横長になってしまう:縦横比率が壊れるという意味)。通常、IMGタグは

    <img src="xxxx.jpg" alt="..." border="..." />

    のような書き方をするのですが、ここに幅指定、例えば:

    <img src="xxxx.jpg" .... width="nnn" height="zzz" />

    等と入っているとCSSで指定すると壊れるかも知れません。ただ、全てのエントリが同じサイズで統一されているのであれば:

    .entry img {
    width: 1234px !important;
    height: 2345px !important;
    }

    のように指定することである程度制御は可能です(.entryの部分はご利用のテーマに依存します)。

    プログラム的に解決するのであればやり方はいくつかありますが、基本は:
    ・エントリを取得
    ・IMGタグを取り出して
    ・必要個所を書き直して
    ・元の部分と差し替える
    というフィルタを書くことになります。この場合、多くの場合に於いて、PHPでfunction.phpに記述します。

    こんにちは

    公式のフリーテーマのCSSの指定を参考にするといいと思います。

    フリーテーマのレビューでは、属するカラムからの画像のはみ出しがある、新しいテーマは承認されないので、大抵そういう指定がCSSで行われています。

    大雑把には、max-width や、それに絡んだスタイルになっていると思います。

    ただし、そのような指定の場合

    ブラウザによっては、縦横比がおかしくなることもありますので、注意してください。

    http://d.hatena.ne.jp/tenman/20110329/p1

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「トップページ等で記事一覧で記事を取得した際、画像を一定幅以下に一律」には新たに返信することはできません。