https://www.okane-ga-nai.com

殺風景な記事にさらば!装飾に統一感をプラスして読みやすさアップ!

2020年6月11日

最近、更新に気をとられ記事の装飾がおろそかになっていました。

ちょっと寂しいので装飾を施そうと思います。

 

当初、テーマ「affinger5 wing」に、デフォルトで入っている装飾を使用していたのですが、統一感はあまりありませんでした。

そこで今回は、当ブログの基本色である「青」をベースに、パーツの色を少し変更して統一感を出したいと思います。

 

記事の基本的ルールについて

当初は、装飾をしていたんですが、使いたい所に使いたいものを使うといった感じで装飾をしていました。

そのため、記事に統一感がありませんでした。

 

今回は、全体の統一感を意識して調整します。

 

当ブログのイメージカラー

当ブログの色はテーマ「affinger5 wing」デフォルトの色となります。

  • #039be5 少し濃い青(ちょいダーク)
  • #13b0fc 少し明るい青(水色に近い)

です。

#f58300 補色はオレンジ、リンクなどと区別が付きづらい場合などに使用)

 

記事装飾は、統一性を高めるため青をメインに使います

これらが及ぼす影響はわかりません。

あくまで、統一性を重視しています。

 

本文について

本文は、そのままベタ打ちで入力。

色は#444141(濃いグレー)。

色変更は、カスタマイザー→各テキストとhタグ→テキスト色一括変更で指定

 

基本、見出しの下は行間をあけずに打ち込み。

各見出しの終わりは、1行文あける。

アフィブログなどでは余白を多くとることもあるようです。

ですが、単純にスクロール量が増えるので当ブログでは多用しないように注意します。

 

文中は読みやすいように適度に1行分あけます。

他アプリで入力したテキストをコピペする場合、行間に注意!

 

記事の装飾について

記事の装飾は統一感を出すために、既存の装飾パーツを一部色を変えて使用します。

 

テキストの強調について

テキストの強調は、基本、

青マーカー(細)

青字ボールド

を使用。

また、ボールドは<b>タグを使用。

 

ビジュアルエディタのBは<strong>タグのため使いません。

多用しすぎると記事の評価が下がる?可能性があるため、視覚的に変わるのみの<b>タグを使用します。

 

囲み枠について

囲み枠は、なるべく見やすいものを使用します。

また、多色使いにならないよう注意します。

 

新規タグ(quicktags保存)

統一感を出したかったので、アイコンとボーダーの色を基本色の青に変更しました。

ショートコードはプラグインaddquicktagで管理しています。

記事内メモ、一言に使用

参考記事に使用(できれば引用で使いたい)

関連情報に使用

なんかに使えるかな…

なんかに使えるかな…

ポイントなるコメントや追加情報に使用

 

 

タグ→テキストパーツ→クリップメモ(テキスト)→〇〇

注意は、既存のパーツを使います。

タグ→テキストパーツ→クリップメモ(テキスト)→注意

 

おすすめ記事(カード)

ブログ内リンクです。

見た目はいいですが、少し大きいので、文中の使用は禁止。

各見出しの終わりなど、キリの良い所での使用に限定します。

※quicktags内「青カード」、id=""に任意の記事IDを入力してください。

 

次点:タグ→テキストパーツ→まるもじ(小)→〇〇

タグ→テキストパーツ→まるもじ(小)→〇〇

ワンポイントに使えそうです。

タグ→テキストパーツ→まるもじ(小)→〇〇

ワンポイントに使えそうです。

連続で使用すると、上記のように隙間がなくなります。

 

記事装飾に統一感をだして、視覚的にも読みやすさアップ!

今回は、既存パーツの色変更程度でしたが、今レベルの記事なら十分…ということにしておきます。

ブログの基本色である「青」で統一できたので記事自体、視覚的にも読みやすくなったのではないでしょうか。

 

まだ、cssやショートコード?などは超がつく素人なので、細部をちょこちょこっと調整出来るくらいの知識は覚えておきたいですね。

 



スポンサードリンク

\ こちらの記事はいかがでしたか? /

-【学ぶ】知識を豊かに