【厳選】当ブログで使われているシンプルな文字装飾まとめ

 

1. 見出しのデザイン h2

シンプルかつ視認性の高いものをテーマに試行錯誤したんですが、最終的にはシンプルイズベスト、ライン一本に行き着きました。とはいえ単色だと味気ないなということで左右に違う色のグラデーションを入れました。ダークモードでは、単色で徐々に細くなる感じに。

サイト全体的にそうですが、見出しの擬似要素も少し角を丸めて優しい印象にしてます。

 

見出しのデザイン h3

見出しに統一感を感じれるような自然でオーソドックスなデザインに。細かすぎて言われないと分からないレベルですが、角を丸めてるので少し可愛いはずです。「可愛いは細部に宿る」っていにしえの神様が言ってました

今まで色々なサイトを見ていて h2 と h3 の違いがよくわからん.. って事が多かったので、極限まで削り、落差をつけました。これならパッと見て違いがわかる

 

見出しのデザイン h4

擬似要素二つを並べたデザイン。ピンクのアクセント。テキスト部分は文字を少し小さくし内側に寄せています。
今どこの何を読んでいるかを認識しやすいように、階層が下がるにつれて文字を小さくし、少しづつ内側に寄せ、装飾の大きさも控えめに。というのを意識してデザインしています。

 

h5 h6 について

h5 や h6 などさらに深い階層の見出しについては不要と判断。1つの記事で階層が深くなりすぎると全体を掴みにくいので、そういう時は別で深掘り記事を用意し、そのリンクを貼ってあげる方が良いのかなと。
ただし、別記事を作るまでもない簡単なモノであれば アコーディオンボックス で。

 

 

2. 吹き出し

読者
くま
お好みの画像を入れてね
僕
とり
ぴよぴよ

アイコンの上下を 「 box-shadow 」で囲い、「 border-radius 」でまんまるにしてみました。ただの「 border 」で囲うよりちょっといい感じ。吹き出しを使っている人が多く、なんか流行ってるぽいので一応用意しました。

 

 

3. ボックス

まとめ

ピックアップ
一番最初に記事の概要をコンパクトにまとめたものを書いているのでそこで使ったり、最後のおさらいでも使います。

 

ベタ塗り

補足的なテキストを入れたいときに使います。あくまで補足なので、本文テキストよりも幅を少し狭め、テキストも少し小さくしてます。

 

引用

引用したい部分をコピペしここに貼ります。しっかり引用元を明記しないとただのパクリになってしまい、ゲンコツじゃ済まない可能性も出てくるので、しっかりルールに沿って引用しましょう。

 

CVボタン(コンバージョンボタン)

 

リスト(番号あり)

  1. 番号ありは ol
  2. ol と li の組み合わせ
  3. 記事の要点
  4. 強めの色味
  5. 目次は打ち消しCSS必要

 

リスト(番号なし)

  • 番号なしは ul
  • ul と li の組み合わせ
  • 箇条書きは命
  • 少し色の違う2つの要素
  • 擬似要素2つでチェックを表現

 

コード

.code {
    background: #f7f7f7;
    padding: 32px 16px;
    margin-bottom: 16px;
    transition: all 0.1s ease-in-out;
    }
/* コードは緑っぽいイメージw(安易) 自分用のメモで使う */

 

アコーディオンボックス

このように、クリックすると表示されるタイプなので、コンパクトにまとめられるので便利。

 

商品リンク

Amazonや楽天の商品リンク。ほとんどそのままですが、余白とボタンサイズ、枠線などを少しいじりました。通常はブックマークレットをそのままコピペすればいいですが、あまりにもテキストが長くごちゃついている場合は、「楽天商品リンク(商品タイトル変更)」を選択しタイトルを変更。

 

ブログカード ①

内部リンクや外部リンクを貼るときに使うやつ。少しごちゃついた感じだったので、「display:none」でキャプションとファビコンを消して、余白・テキストサイズなどを調整。画像、タイトル、サイトURLのシンプルな構成に。内部と外部でクラス名が違うのでまとめて指定。

【厳選】当ブログで使われているシンプルな文字装飾まとめ
このブログで使われている厳選された文字装飾をジャンル別にまとめています。

 

ブログカード ②

タイトル・ブログカード・テキストを1カラム内にまとめたものを2カラムに。タイトル(h4)とブログカードは専用のスタイルを指定し、画像は高さを固定し左右上下を中央寄せ。

 

ブログカード ③

3つぐらいのリンクを貼りたい場合に使用。これも個別のスタイルを設定。幅が狭いのでテキストは基本的にはなし。

 

 

4. その他

テーブル1

iPhone 11 iPhone SE
チップ A13 Bionic A13 Bionic
ディスプレイ 6.1インチ 4.7インチ
カメラ 超広角・広角 広角
生体認証 Face ID Touch ID
バッテリー 17時間 13時間
ナイトモード ×
フロントカメラ 12MP 7MP

 

テーブル2

iPhone 11 iPhone SE2
A11 A13
6.1インチ 4.7インチ
超広角・広角 広角
Face ID Touch ID
17時間 13時間
×
12MP 7MP

 

テーブル3

11:00〜14:50
18:00〜20:30
土祝の夜 17:30〜20:00
定休日 火曜・日曜の夜
開業日 2010/2/3
従業員数 4
カウンター席 6〜8席

横スクロールのガイドは、.scroll-hint-icon { display: none; }で非表示に。この3種類があれば事足りそうです。配色はまだ少し迷い中ですが、今のところはやたらカラフルな色をつけたりせず、行ごとの色の変化もしない方向で。

 

テーブル4

トークンアドレス
Matic mainnet
RPC URL
https://rpc-mainnet.maticvigil.com/
チェーンID
137
シンボル
MATIC
ブロックエクスプローラーのURL
https://polygonscan.com/

URLやアドレスなど長い文字列の場合、スマホだと横スクロールが発生しますので、そういう時はこの縦のテーブルを使います。

 

 

ステップバー

STEP
タイトルは大きめに太字で
補足のテキストは小さくし色を薄めて差別化。
STEP
これでワンブロック
<div class=”step-content1″>
<div class=”step-label1″>STEP</div>
<div class=”step-title1″>タイトル</div>
<div class=”step-body1″>テキスト</div>
</div>
STEP
How to 系の記事で使えそう
こうやって画像を入れて行っても良さそう。1200×675 だと少し大きい印象。
STEP
画像は少し縦幅を抑えるといいかも
1200×600 でこんな感じ。ステップバーに入れる際はこのサイズに。
STEP
さらに深い階層
ミニタイトル
ミニ補足テキスト。
少し深掘り
さらに掘りたいことも多いのであると便利。
これでワンブロック
<div class=”step-content1″>
<div class=”step-label1″>STEP</div>
<div class=”step-title1″>タイトル</div>
<div class=”step-body1″>
<div class=”step-wrap2″>
<div class=”step-content2″>
<div class=”step-title2″>ミニタイトル</div>
<div class=”step-body2″>ミニ補足テキスト。</div>
</div>
<div class=”step-content2″>
<div class=”step-title2″>ミニタイトル</div>
<div class=”step-body2″>ミニ補足テキスト。</div>
</div>
<div class=”step-content2″>
<div class=”step-title2″>ミニタイトル</div>
<div class=”step-body2″>ミニ補足テキスト。</div>
</div>
</div>
</div>
</div>
STEP
さらに深い階層に画像
画像
この階層には画像はいれないほうがいい。
縦長の画像
結構小さくなるので非推奨。
テキスト
だけで十分。

 

 

5. 注意点

色は使いすぎず最小限にとどめる

色はアクセントとして少しだけ使うように意識。多様しすぎると目線があちこちに散らばってしまい、内容の理解スピードが落ちやすくなりがち。色数が多すぎると色は風景となり、どこを強調しているのか訳がわからなくなります。ここぞという部分に最小限使う。それで十分。

 

大きいものほど色味を抑える

色をつける部分が大きいものは色味を抑えました。色味が強すぎると悪目立ちして、そっちに意識が行ってしまい内容を見失いがち。あくまで主役はテキスト(内容)で、装飾はそれを補佐する役割。逆に小さい部分については、彩度を高めて存在感を出した方が効果的。もちろんサイト全体のバランスを意識し調和するような配色で。

 

ギラツキを抑える

原色バチバチや、コントラスト比が高すぎてギラギラしていると見ていて不愉快なので、記事内容に没頭できるような心地よい色味を意識。特にダークモードにすると通常の色味が眩しく感じることが多いので、ダークモード用に明度を抑えた色を別途用意しました。とにかく、読んでいてストレスを感じない(何も感じない)事が理想。

 

6. スタイルを追加削除

これらのデザインしたものをエディタに表示したり、不要なスタイルを削除する。今後必要が出て来れば自分でデザインしたものを都度追加。

【Cocoon】エディタのスタイルを追加したり非表示にする方法
1. 追加する方法 追加するコード array( 'title' => 'ttt', 'block' => 'div', 'classes' => 'xxx' ), tttを任意のテキスト(日本語...

 

xxx