【作画】Gutenberg:フォント/装飾

  • ブックマーク
  • Feedly

デザインの見直し

今まであまり手入れをしてこなかったんですが、せっかく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し、カスタマイズして使用させて頂きます。

  • ボックスはこのスタイルだよ。