【125naroom】記事ページを、読みやすく整えました
記事ページのまわりを整えました。
目次、右カラム、それから記事の下です。
本文そのものは変えていません。
読むじゃまをせず、読み終わったあとに次の記事へ進みやすくすることを考えました。
ついてくる目次
PC で見ると、右カラムの下のほうに目次がついてきます。
いま読んでいる見出しには、黄色いまるが出ます。
スクロールすると、黄色いまるが見出しから見出しへ移っていきます。
長い記事でも、いまどのあたりを読んでいるかが分かります。
この目次は、画面の幅が広いときだけ出しています。
本文の目次も、まるとせん
本文の最初にある目次も、右カラムの目次と同じ見た目にしました。
左に1本の線を引いて、見出しごとに小さなまるを置いています。
番号は Jost です。
スマートフォンでは、こちらの目次を使います。
「とじる」「ひらく」で、たたんでおくこともできます。
右カラムは、上から順に
右カラムは、人気記事・カテゴリー・つくっているサイトの順にしました。
見出しの頭には、小さなまるを置いています。
人気記事とつくっているサイトは黄色、カテゴリーは白です。
つくっているサイトのバナーは、3枚とも同じ大きさにそろえました。
記事の下は、すっきりと
記事の下は、前後の記事 → 関連記事 → 人気記事 → デザインの記事、の順です。
前後の記事は、左右2つのカードにしました。
前の記事は白いまるの ←、次の記事は黄色いまるの → です。
広告は、2つから1つに減らしました。
タグの色を、墨色に
記事のカードにあるタグとカテゴリーは、これまで青でした。
今回、墨色に変えています。
点線の下線は、そのままです。
小さな変更ですが、ページ全体の色が落ちついて見えるようになりました。
さいごに
読んでいる途中も、読み終わったあとも、迷わないように。
目立つ変化ではないけれど、毎日読む人ほど気づいてもらえるところだと思っています。
長い記事は、コーヒーを片手に、のんびりどうぞ。
デザコトauthor
あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。
