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

4 min 3,189 views

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

見出しサンプル

リード文をここに書いて

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

ここに文章を書いて

見出し4

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

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

「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パターン

  • デフォルト
  • デフォルト
  • メイン
  • メイン
  • アクセント
  • アクセント
  • チェックリスト1
  • チェックリスト1
  • チェックリスト2
  • チェックリスト2
  1. メイン
  2. メイン
  1. 番号リスト(チェックリストをあててみた)
  2. 番号リスト

文章背景(グループ)のデザイン

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

Mark4

あらららら

あらららら

Mark8

テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト

テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト

Mark11

テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト

テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト

Mark14

テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト

テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト

Mark16

テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト

  • リスト
  • リスト
  • リスト

テキストテキストテキストテキスト
テキストテキステキストテキスト
テキストテキストテキストテキスト

画像のデザイン

画像のデザインパターン

「デフォルト」
「角丸」
「フォトフレーム」
「影(小)」

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

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

吹き出し

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

A

A

ふきだし

吹き出し

B

B

コメントボックス

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

https://www.affiliate-formula.com/wp-content/uploads/2020/03/1241141380.jpg

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

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

https://www.affiliate-formula.com/wp-content/uploads/2020/03/1241141380.jpg

mark1

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

https://www.affiliate-formula.com/wp-content/uploads/2020/03/1241141380.jpg

mark2

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

https://www.affiliate-formula.com/wp-content/uploads/2020/03/1241141380.jpg

mark3

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

https://www.affiliate-formula.com/wp-content/uploads/2020/03/1241141380.jpg

mark4

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

タイトルボックス

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

デフォルト

これはデフォルトデザインのタイトルボックスです。

mark1

これはmark1のタイトルボックスです。

これが無難に使いやすいデザインかも

  • リスト
  • リスト
  • リスト

mark2

スマホで見た時のデザインはチェック

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

割と使う?

mark5

これも使いやすいか?

コピーボックス

コピーボックス 機能しない?

タイムライン

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

  1. STEP

    タイトル

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

  2. STEP

    タイトル

    ここにテキストを入れる

  1. STEP

    タイトル

    ここにテキストを入れる

  2. STEP

    タイトル

    ここにタイトルを入れる

ダブルボタン

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

Q&A

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

Q

質問しても良いですか?

A

どんどん質問してください。

内部外部リンク

デザインは3パターン

アコーディオン

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

アコーディオンの内容が表示されます。

  1. リスト
  2. リスト
  3. リスト
  4. リスト

ランキングデザイの確認

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

お試しランキング

アイテムタイトル

ひで@アフィリ塾

ひで@アフィリ塾

アフィリエイター

アフィリ塾のひでです。

FOLLOW

カテゴリー:
関連記事