■レスポンシブデザインのテンプレートにしているならとことん。

このブログはレスポンシブデザインのテンプレートです。
その時々でネットで得た情報を使って色々といじってきました。

ちなみに、PC上で様々なスマホやタブレットでの表示を確認することも可能ですけど、全部確認するとおそらく作業自体から逃げたくなるので(苦笑)、気にしているのは「PCのGoogle Chrome」と「iPhone6(縦長)」でどう見えるかの2点です。

sbefore.jpg safter.jpg
で、まず何よりも気になっていたのは"画像と文字のバランス"・・・画像に回り込ませた文字が読み難くなっているところ。(画像左)

カエレバリンク(カスタマイズ)などを使った一部のものは既に"したい表示"になっているんですが、画像リンクのみの場合は画像の大きさによってはけっこうアレなことになってました。ヒドいと普通に縦書き文字状態(苦笑)。これをどうにかしたくて色々と調べてみました。ネット万歳!

正直、ブログを開始した直後に使っていた"画像に文字を回り込ませるタグ"が途中でダメになり、仕方なく現在使用しているタグにひとつひとつ変えていった後になって「え、今使ってるタグって今後ダメになるの?推奨されてない?ていうか、このタグのままだと今回やりたいことが出来ないじゃん」となった時は泣きたくなった・・・。
※正確には、将来ダメになるらしいタグを使って出来るようになってもしょうがないと思って途中で諦めた為、出来ないかどうかは不明。

そうしてこの先にまたまた修正の嵐があるのかと思いつつ、cssを使った"画像(リンクタグなどがくっついているいわゆるアフィリエイトもの)に文字を回り込ませる"を実験。同時にスマホ表示でその回り込みを解除してみました。
出来上がりは右の画像です。画像を中央にも配置出来たし満足。これでいくことに。

これから修正しなきゃいけない記事が沢山ありますけど!(涙)

smozibefore.jpg smoziafter.jpg
ついでにもうひとつ、改めてスマホで見てみるとカテゴリの文字が小さいなぁ(左の画像)と思ったので、スマホでのみ大きく見えるように変えて(右の画像)みました。

自分でやる分には指で選択しようとするとうまくいかない・いきにくい、というほど小さくはなかったとは思いますが、でもやっぱりやりやすくはなかった。直前に軽いストレスがあるというか(笑)。
・・・というか、もっと大きくした方がいいのかな・・・。
一応メインの記事本文よりも大きいのはどうかと思ってこのサイズにしてみたんですが。悩むところです。

今回は複数のサイトを渡り歩いていきながら作業しました。
ココで「あ、自分でアップした画像じゃなくても可能なんだ」と知り、ココで改めてやりたいことのcssをちょっと理解。ありがたいことです。
細かいカスタマイズはこれまでに覚えたものを活用しました。ま、蓄積してきた知識も全部元々はネット上で見たものばかりですけども。ホントありがたい。
関連記事
  • COMMENT0
  • TRACKBACK0

0 Comments