デザインの見直し
今まであまり手入れをしてこなかったんですが、せっかくwordpressを使っているので、素人なりに少しデザインを考えたい〜。
今使用しているフォントと、装飾について少し整理。
フォント
基本フォント
流行りのnoteを参考に見てると、えっ私のブログのフォントサイズが小さい…。Gutenbergの編集画面デフォルトで表示される字体が見やすかったので、同じものにしてみた。ついでに、マージンの設定を見直しました。
- Style:Rounded Mplus 1c → Noto Serif,serif
- Size:15px→17px
- p margin:2em、1.8em
- h1 margin:30 0 50 0
見出し
Gutenbergのいい所は、Markdown記法が使えること。
#でショートカット可能なhタグ(h2〜h4)の使い分けを定義付けしていなかったのけど、今後は明確にしていきたい。色は赤色で統一してみた。h5,h6は使用しない予定。
- h2、h3は外観→カスタマイズで直接レイアウト。
- h4はfont awesomeの/f058を使用。
装飾
マーカー
マーカーは赤文字に限定する。たまに文字を強調する為にフォントサイズを変更するくらい。それ以外はやらないって決めるだけで、デザインばかりに時間をかける沼にハマらないようにする。
Gutenbergでは、デフォルトだとリッチエディタテキストにマーカーが無いので以前に追加した。
ボックス
CSSをいじって、背景色を#fef1f0にしました。
ボックス自体がデフォルトのGutenbergになかったので、snowmonkeyさんの無料テンプレートをDLし、カスタマイズして使用させて頂きます。
- ボックスはこのスタイルだよ。