デザイン修正5(文章表示調整)

記事を書きはじめて、気になった細かい部分の修正です😀

読みやすい幅の文章にする

ブログの文章を書いてみて、はじめて気づいたのは「レスポンシブ対応された画面に表示する文章って、どこに改行を入れるべきなのかがわからない!」ということ😓

長いセンテンスになると読みにくいから、どこかで区切りたい。でも画面の表示幅によっては、改行を指定してしまうと段落が崩れてしまう。それでは、逆に読みづらい記事になってしまう。

段落に余白追加追加

そこで打った対策は、記事本文段落右のpaddingの追加。文章自体には、基本は改行は指定せず、スタイル指定で読みやすい幅にすれば読みやすくなるんではないかと。

やってみたら、これが意外といい感じ!改行なんていれなくても、一行の幅がある程度の長さに指定されるだけで、ぐっと可読性は上がる感じがしました!

PADDINGは%指定で

さあ、完成だ!と思いきや、モバイル幅で見たらなんか文字が縦に並んでしまっている….!?レスポンシブ対応された画面の対応としてpaddingを追加してるというのに、pxで指定してしまうというミスでした。

一時しのぎでしかないけれど、とりあえうパーセント指定に変更してとりあえず一時回避。
メディアクエリでちゃんときりわけたいなあ。

 

アイキャッチ画像の位置調整

本文右に余白を設けたことで、記事本文内の画像にもpaddingが追加される現象が起きてしまいました。

せめてアイキャッチ用に貼る画像くらいは横幅100%で表示したいので、スタイル調整を加えていなかったアイキャッチ部分にもスタイル追加。記事冒頭画像は、段落指定の画像ではなく、きちんとアイキャッチ画像として投稿できるようになりました✨

 

おまけ課題

h3要素に小文字が入れられない

この記事を書いていてまた新たに気づいたんだけど、なぜかh3タイトルに英小文字が入れられない。なんだこれは。

どうやらタイトルにtext-transformのuppercaseがきいてしまっているみたい。たしかにタイトルだし大文字の方がスッキリ見える。この指定をnoneに解除すべきかどうかは要検討です。

メディアクエリでの調整は必須かも

上で右のpadding追加とかをしてみたはいいものの、やっぱりモバイルでは右余白はいらないし、できればモバイル時には記事タイトルだけを一覧にしたい。

ちゃんとメディアクエリ使って、がっつりモバイル用に切り替えができないと解決しそうにないです。数分でちゃちゃっとできそうな話でもなさそうなので、今後の課題として保留です。

やりたいこと山積み

  • メディアクエリの調整
  • 続きを読むリンクのボタン化
  • 記事コンテンツの追加
  • 画像作成の勉強と練習
  • 写真素材の作成
  • 別ページの作成

アイディアばっかりポンポンうかんできて知識も手も追いつかない〜