デザイン美学と設計思想｜文字装飾一覧

このブログに使われている文字装飾系まとめ。cocoonテーマだが、自分でデザインして調整したり追加中。見出しに名前とセレクタを記載。随時見直して調整。

1. デザイン美学と設計思想

WordPressでは記事タイトルが自動的に h1 になるため、本文中の最上位見出しとして h2 を使っています。グラデーションや左寄せで工夫しています。

h2の下線には、あえて透明度を高めたグラデーションを採用。機能的に節目であることを示しつつも、強調しすぎることで生じるボーダーの“野暮ったさ”を避け、情報の流れを妨げない、抜け感のある見出しに仕上げました。装飾ではなく構造を意識した、スタイリッシュでミニマルな見出し表現です。

オーソドックスでシンプル。若干角に丸みを持たせてる。

黒でいい気もするけど視認性を上げるためにアクセントカラーを入れてみている。

メニュー→設定→確認→

手順を解説する際に、1つのステップやワードを視覚的に認識しやすいようしたい時に使う。

タップするとコピーできる。コードやプロンプト用。

.body {
　background-color: #fff;
}

“A blue bird flying gracefully in the sky, with soft clouds in the background and sunlight illuminating its feathers”

ここに補足を記入する。

見出し1	見出し2	見出し3
タイトル	こちらはサンプルテキストです。	こちらはサンプルテキストです。
タイトル	こちらはサンプルテキストです。レイアウトを確認。	こちらはサンプルテキストです。レイアウトを確認。
タイトル	こちらはサンプルテキストです。文章の長さやレイアウトを確認する。	こちらはサンプルテキストです。文章の長さやレイアウトを確認する。

タイトル

2カラムのホワイト画像。このように背景と同じ色味の場合同化してしまうので、個人的許容範囲内で影をつけて（左右のみ）境目を。

タイトル

2カラムのブラック画像。こちらも影をつけてる。（ダークモードにするとわかる）

タイトル

3カラムのホワイト画像。

タイトル

3カラムのホワイト画像。

メニュー→設定→確認→

手順を解説する際に、1つのステップやワードを視覚的に認識しやすいようしたい時に使う。

セクション	内容・ルール
出力形式	HTML
h1 タイトル	記事タイトルをh1で記述、文字数は28文字以内
導入文	タイトル直下に改行なしで記述、文字数は130文字以内、自然で情報の多い文
h2 見出し	セクションごとに大きな区切りとして使用、各h2の前には` `を（2つ）を入れる
h3 見出し	各構文や用語ごとに詳細解説する部分で使用、各h3の前には` `を（1つ）を入れる。ただし、直前がh2の場合は省略
コード（pre）	コードは必ずタグ内に記述、コメントや補足は見出しまたは本文で対応
本文のルール	p・span・brタグは禁止（使わない）改行や余白はやul/liで調整する
表（table）	クラス・スタイル・装飾なしで構成使用可能なタグ：table, tr, th, td のみ
文体	初心者向け・やさしくて親しみやすい口調難しい言葉は使わず、例えや補足で補う

こういったルールを最初に設けることで、安定して一貫した出力をしてくれる。「こんな記事書いて」で出てきたものをブログにコピペでほぼ修正が不要なので本当に楽。生産性爆上がりでやばい。

「ビジュアル」でコピペすると改行が反映されないので、「コード」にしてからペーストしましょう。