web-dev-qa-db-ja.com

完璧な段落幅で画像が見栄えが悪い

私はWordPressテンプレートを維持し、維持しようとしています 〜70文字の完全な行幅 です。私のブログには多くの投稿があり、ほとんどの投稿には段落ごとに少なくとも1つの画像(通常はそれ以上)なので、このサイトはかなりメディアが重くなっています。

1.悪い

enter image description here

上のスクリーンショットは、ラッパーが1140px幅に設定された投稿コンテンツビューを示しています。1行あたり最大150文字なので、読むのは非常に困難です。最初はすべてが大丈夫に見えるかもしれませんが、実際には数行後にのみ読むのは非常に疲れます。

2.良い(?)

enter image description here

そして、ここでは段落は700pxに縮小されており、1行あたり50〜80文字で非常に快適です。

私の意見ではそれはかなり大丈夫に見えますが、画像がテキストよりもはるかに広い場合でも問題ないかどうかはわかりません(まだ1140pxのままです)?最初はきれいに見えますが、投稿ごとに10枚の画像をスクロールすると、目がページの中央(テキスト)から左(画像)にジャンプし、すぐにイライラします。それとも私は過剰反応していて、すべてが順調ですか?

3.ミックス(?)

enter image description here

テキストを正当化することは、ここでは少し役立つかもしれませんが、正当化されたテキストを読みたいと思う人はいません。また、画像の幅が700pxと小さすぎて、すべてが本当に圧縮されているように見えます。ポイント1よりさらに悪いと思いますが、よくわかりません。

私の質問は-この問題への取り組み方は? 2番目はあなたの意見では大丈夫ですか?多分私は何かを変えるべきですか?タイポグラフィは本当に難しいので、どんなヒントも大歓迎です!

4
Wordpressor

すべてのビジュアルページコンテンツを見ずに回答を提案するのは簡単ではありません。これらはいくつかの一般的な概念です。

デザインの問題はテキストではありません。実際、質問の文はすでに解決策があると言っています:1行あたり最大50〜80文字。問題は、コンテナーフレームと画像によって作成された構造線です。

サイドシャドウで定義されたコンテナーフレームと、イメージフレームで指定された中央の3列のパーティションがあります。これにより、デザイン全体を調整する強力な構造が確立されます。これにより、これらの行を考慮しないことでテキスト列が浮動します。

structure

現在提案されているこのデザインでは、テキストはイメージに従属しており、両方のバランスがとられている必要があります。このバランスは、これらの強力な構造線の覇権を破ることによって達成されます。実際、コンテナフレームを抑制すると、視覚的な品質が大幅に向上します。

container


次の例は、これらの垂直構造線を分割する誇張提案です。

垂直構造軸の強度を下げる

強力な水平コンテナフレームは、コンテンツの新たな軸を排除します。

horizontal container

「デカルト性」を抑制する

構造軸を排除するための究極の方法

enter image description here

ダイナミズムを追加

3つの等しい画像によって作成された繰り返しパターンを壊すことは、設計に利益をもたらします。この例では、出現する構造線を抑制するだけでなく、テキストフレームの定義にも役立ちます。

  • 左画像の中心軸は、テキストの左揃えマージンと一致します

  • 2番目の画像の左端は、テキストの左揃えと一致します

  • 3番目の画像の中心軸は、テキストの左揃え線と一致します。

dynamism

10
Danielillo

段落の幅を超えて画像を分割することには何の問題もありません。実際、多くの点で、それは美的魅力を高めます。モバイルでは、幅はすべて同じになると思います。しかし、段落の幅から物事を切り離すこの手法-多くの有名なニュースプラットフォームがこれを行うのを見てきました。

0
mastablasta