神戸グルメゲリラ

Nukko Nuko, sometimes gourmet blog

ブログデザインの弱点、縦長画像は間延びして文書との一体感が損なわれる。解決策を模索中

f:id:tommyoctopas:20190806212751j:plain

縦長画像を貼ると下へ画像が超~間延びします。

この弱点の解消として、画像ファイルの高さをブラウザの高さ(70%ほど)に自動フィットさせる。縦長画像特有の横に発生する未使用のスペースに、つまりココに文書を縦書きで書いたらいいんじゃね!そしたら画像と文書を同時に読めるやんって発想です。スクロールしなくてもね!今までどうり横書きでブログ書いてもらって、ココの部分!って指定するだけで自動的に縦書きで表示するテーマを研究中です。これはそのプロトタイプです。

 

ブログ界では嫌われものの縦長画像

pppp.hatenablog.jp

スマホで撮った縦長写真を生で貼ると、バケモノみたいな縦サイズで掲載される事があり、これを手動でサイズ調整してるはずです。まずこの作業自体がNGと思えるのです。あくまでも今、自分のPC環境で、よろしく見えるようにしただけで、見てもらう他の人のPC、デバイスからは、変な縮小で表示されているケースがほとんどです。これも含めて解決したいとうブログデザインへの興味です。

この縦長写真をデザイン的に救う方法を模索中です。このプロトタイプはブラウザの高さ70%で自動フィットさせます(画像の高さを基準しない)やや縮小率を下げた方が、文書を目で上下に追い易いかもしれません。色んな解像度のPCがいますので、むずかしいところです。

あとこれを横書きでやっもいいんじゃねと思いますが、スマホだと破綻します。狭苦しい幅で写真横に折り返しまくった文書が呪文のように列記されてしまいます。PCでも苦しい場面があると思います。なので解決策の手段として、縦書きにしたらいいんじゃね!と思った次第です。

 

すくなくとも横に文書を添えたい需要があるか別にして

超縦長画像でも見てる人のブラウザ環境によって、これぐらいの大きさが、いいんじゃね!ってよろしくやってくれる機能でもあります。テーマに内包可能しかも完全自動です。

 

ちなみに、この記事をスマホで見てみたら

むしろ読み易いと感じたぐらいです。スクロールしなくても、画像も文書も一体で見れる部分が効いていると思われます。

文書量に応じて、画像をオブジェクトフィットさせます。あまりに文章が多い場合は、画像が自動縮小で小さくなり過ぎてしまうので、これを回避するためオブジェクトフィットのカバータイプでcss設定します。どのデバイスでもそれ相応に表示されるはずです。スマホを向けにテストでブラウザの横幅を狭くしてみて下さい。うまく表示されるはずです。

 

iPhone6相当で見え方を検証

文章が多いケースに相当します。文書が多いので画像がオブジェットフィットの自動縮小となります。なんとかいけてる感じです。実際にはこんなに文章を打ち込まないと思いますが、スマホでは、むしろスクロールせずに読めるので、情報表示の観点からは、こちらの方が優れているとも言える。

※ちなみにこのテーマはスマホでも明朝対応しています。

f:id:tommyoctopas:20190808182122j:plain

 

この記事は通常どうり横書きで書いてるだけなのです。

自在に縦書表示指定できるしくみです。もう少し手を入れて、テーマの機能に加える予定です。「横書きだけど、縦書きにも出来るんだぜ!」機能です。

 

例えば、1行だけ写真に添える場合、むしろ縦長画像に優位性があると思える。

 

可愛い過ぎて死ぬ!

f:id:tommyoctopas:20190806212751j:plain

目、目が!

 

 

大地に立つ!(ちゃらら~ん♪ちゃらら~♪)

f:id:tommyoctopas:20120915101030j:plain

ガンダム、

 

たとえば、めちゃくちゃ大きいフォントで書きなぐっても、どのデバイスでも破綻しないという事です。これは縦書きのみ得られる優位性かと、こういう需要があるか、なんですけど

あると思います。

実際、このガンダムの画像なんかは、ガチ嵌まってると思います(笑