「THE SONIC」検証用サンプル記事

いまさらながらですがGutenberg練習用にブログを立ち上げてみました。これからいろいろと試していく予定です。

見出しサンプル

リード文をここに書いて

ここをあとから小見出しに変えるには？

ここに文章を書いて

見出し4

記事内装色などの確認用に

とりあえず、Gutenbergになれる前にTHE SONICというテーマを入れてしまったのでこれがテーマの機能なのかGutenbergの機能なのかイマイチ把握できない感じｗ

「THE SONIC」のデザインまわり検証

記事装飾パーツ、オリジナルブロックデザインの確認を。

記事装飾パーツの確認

ここからは以下のページを参考に記事装飾パーツ（表やボタン、リストなど）のデザインを確認していきます。

記事強調用のマーカー

「THE SONIC」では6種類のマーカーが用意されているようです。

• 太文字マーカー　文字がboldに
• 赤太文字マーカー　赤＆太文字に
• 黄色い下線マーカー　利用頻度が高くなりそうな下線マーカー
• ラベルマーカー（メインカラー）　どう使おう？
• ラベルマーカー（アクセントカラー）　どう使おう？
• ラベル（グレー）　グレー　表示はどんな感じ？
• ラベル（グレー）　もう一度　機能していない？

段落のデザイン

記事のまとめやワンポイントなど強調したい場所で使用できそうな段落デザインです。12種類のデザインが用意されているとのこと。

1つ目
シンプルな外枠のデザインです。

2つ目
シンプルな背景色のデザインです。

3つ目

4つ目

5つ目

6つ目

7つ目

8つ目

9つ目

10個目

11個め

12個目

これらのデザインは上手に使っていきたいですね。今後、さらにバリエーションが増えていくことにも期待！

ボタン

アンカーテキスト装飾用のボタンデザインは4種類×アイコン4種の16パターン。加えてアイコンの配置や背景、テキストの色設定などでかなりのバリエーションを作り出すことが可能。

アフィリエイトタグ用のボタンデザインは別途用意されているようです。
参考：「ASP広告タグを2秒でボタン化！『ASP広告ボタン』で効率アップ」

テーブル

「表（テーブル）」のデザインは4パターン

リスト

リストは5パターン

• デフォルト
• デフォルト

• メイン
• メイン

• アクセント
• アクセント

• チェックリスト１
• チェックリスト１

• チェックリスト2
• チェックリスト2

1. メイン
2. メイン

1. 番号リスト（チェックリストをあててみた）
2. 番号リスト

文章背景（グループ）のデザイン

16種類と豊富なデザイン。上手に使っていきたいもの。

画像のデザイン

画像のデザインパターン

THE SONICオリジナルブロックのデザイン確認

ここからは以下を参考にTHE SONICのオリジナルブロックを確認します。

吹き出し

ふきだしのデザインは4パターン。「枠線ありなし×背景色ありなし」ってことなのかな？

A

ふきだし

吹き出し

B

コメントボックス

口コミ用のコメントボックス。こちらも上手に使いたい

デフォルトのコメントボックス

コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント

mark1

コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント

mark2

コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント

mark3

コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント

mark4

コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント

タイトルボックス

箇条書きやまとめを囲う時のボックスデザイン。デザインは8パターン。

タイムライン

タイムラインは2パターン

1. STEP

   タイトル

   ここにテキストを入れる。ここにテキストを入れる。

2. STEP

   タイトル

   ここにテキストを入れる

   

1. STEP

   タイトル

   ここにテキストを入れる

2. STEP

   タイトル

   ここにタイトルを入れる

ダブルボタン

ボタンを2つ並べたダブルボタン

Q&A

Q&Aデザインは5パターン。色や形状の変更は自由

内部外部リンク

デザインは3パターン

関連

「THE SONIC」検証用サンプル記事

関連

「THE SONIC」検証用サンプル記事

関連

「THE SONIC」検証用サンプル記事

アコーディオン

アコーディオンボックスのデザインを確認します。

ランキングデザイの確認

「王冠」アイコンと「数字」アイコンの2種類のデザイン