WordPressテーマ SONICを使って記事を書いてみた

7 min
sonic

この記事は、WordpressテーマTHE SONIC、
SONICのGutenbergプラグインで
記事を書いてみる
レビュー(テスト)記事です。

良く使いそうな機能、
自分が使いそうなものから
1個ずつ見て行きます。

この記事は記事内容を随時追加、更新していきます。

見出し(H2)はこんな感じ

見出しは、
外観→カスタマイズで変更できます。
何種類かありますが、これがベストだと思いました。

デフォルトのテーマカラーもそうですが、
色合いもポップな感じで素敵です。

見出し(H3)はこんな感じ

ちょっと地味ですね。

H2が大見出しで、メインなので、
それ以降の見出しはあまり派手ではない方が
良い、というのもあります。

見出し(H4)はこんな感じ

シンプル。
CSSを追加すると見出しもいろいろ変えられると思いますが、
SONICを買う人は、
そういうことに時間をあまり使いたくない
のではないでしょうか。

僕もです。

見出し(H5)はこんな感じ

記事本文欄のメニューに表示されているのは
H4までですが、見出しブロックの編集中には
右サイドメニューに見出し設定という項目が
表示されていて、そこで変更できます。

見出し(H6)はこんな感じ

H5以降は太字で文字サイズが変更されるだけの
シンプルなものになっているようです。

文字装飾の種類

文章入力中に、ブロック上に表示されるタブで
文章に色々装飾ができます。

ペンマークのタブをクリックすると、

  • 下線
  • 太文字(bold)
  • 赤い太文字
  • 黄色い下線
  • ラベル(メイン)
  • ラベル(アクセント)

以上の装飾をすることができます。

本音を言うと、マーカーが欲しいところですが、
装飾が多いとおそらく
サイトの表示スピードが落ちるのではないか、と
推察します。

他に考えられる理由としては、
あまり装飾が多いと、
ごちゃごちゃして読みづらい
などでしょうか。

文章入力中のタブの右から2番目、
下向きの矢印のような部分で
メニューを開くと、
よりリッチなテキスト制御として、

インラインコード

インライン画像

打消し

が選択できます。

段落ブロック

13種類の段落ブロックがあります。
デフォルトはこの文章が表示されているような
無地の、何もない段落です。

para-mark1
細い、青線の外枠の付いた段落ブロックです。

para-mark2
薄い水色の下地の段落ブロックです。

para-mark3
細い、青色二重線の枠の付いた段落ブロックです。

para-mark4
薄い水色の下地を青い太線で囲んだ段落ブロックです。

para-mark5
青の点線で囲んだ段落ブロックです。

para-mark6
下地がストライプの段落ブロックです。

para-icon-mark1
アイコン付きの段落ブロックです。

para-icon-mark2
アイコン付きの段落ブロックです。

para-icon-mark3
アイコン付きの段落ブロックです。

para-icon-mark4
アイコン付きの段落ブロックです。

para-icon-mark5
アイコン付きの段落ブロックです。

para-icon-mark6
アイコン付きの段落ブロックです。

このそれぞれが、ClassicEditorでいうところの、
ボックスの代わりに使えるような
つくりになっています。

右側のメニューから背景色や、文字色、文字サイズ等も
変えることができます。

全体的にポップでかわいいデザインです。

リスト表示

リストは

  • こういう感じのものです。

何種類か並列で文章、
語句を並べたいときに使います。

たとえば

今日の朝ごはん

  • トースト
  • 目玉焼き
  • サラダ
  • 牛乳

デフォルトではこんな感じです。

こちらも何種類かあって、

  • トースト
  • 目玉焼き
  • サラダ
  • 牛乳

  • トースト
  • 目玉焼き
  • サラダ
  • 牛乳

  • トースト
  • 目玉焼き
  • サラダ
  • 牛乳

  • トースト
  • 目玉焼き
  • サラダ
  • 牛乳

こんな感じに変えられます。

使いやすそうです。

引用ブロック

引用ブロックのスタイルは
2種類あります。

もうひとつはこんな感じ

表ブロック

SONICは、表ブロックが素敵です。

↑デフォルトだとこんな感じですが、

↑ストライプ

↑シンプル

↑ポップ

…と、こんな感じです。

これに右メニューの設定から
ヘッダーセクションをオンにすると

こんな感じになります。
「シンプル」も良い感じですが、
「ポップ」がSONICっぽいデザインで好きです。

このそれぞれに、
色設定で背景色を変えることができます。

ボタンブロック

ボタンブロックはこんな感じ↓です。

デフォルト、何もしないとこうですが、
内側にテキスト、
そして下に表示される記入欄にURLを入力して
ボタンを作成します。

こうなります。
これに

  • 色設定(背景色・文字色)
  • 角丸半径
  • SONICボタン設定(アイコン追加)
  • アイコンの位置の指定
  • SONICプリセット設定
    (デフォルトだとGoogle風ボタン青)

上記の変更を加えることができます。

たとえばこんな感じです。

THE SONIC独自ブロック

ここから、THE SONICの独自ブロックです。

タイトルボックスブロック

段落の、
ClassicEditorでいうところのボックス的機能と同様に、
良く使う、汎用的なブロックです。

デフォルト

こんな感じ

titlebox-mark1

こんな感じ

titlebox-mark2

こんな感じ

titlebox-mark

こんな感じ

titlebox-mark4

こんな感じ

titlebox-mark5

こんな感じ

titlebox-mark6

こんな感じ

この7パターンになります。

段落ブロックとの違いは、
中にブロックを挿入できることです。

今日の朝ごはん
  • トースト
  • 目玉焼き
  • サラダ
  • 牛乳

中にリストを入れてみました。

タイトルボックスのデザインが
オシャレで素敵です。

ふきだし

デフォルトで、ふきだし機能が標準装備されています。

  • アイコン画像
  • ふきだしの向き(左右)
  • 枠線有り無し
  • ふきだしの文字色
  • ふきだしの背景色
  • ふきだしの枠線色

このそれぞれを設定できますが、
マイセットで10個まで登録することができて、
それを右メニューからワンタッチで呼び出して登録できます。

こんな感じになります

※画像はこちらで用意したものです。
(各々で用意する必要があります。)

内部/外部リンクブロック

内部リンクと外部リンクを設定するブロックです。
3種類の見た目を設定できます。

こんな感じになります。

これに

  • リンク先を新規タブで開く
  • リンク先の画像を取得する
    (外部リンクのみ)
  • nofollowを付与する
    (外部リンクのみ)

上記を設定できます。

上リンクでは画像を取得していませんが、
画像を取得すると、こうなります。

内部/外部リンクブロックには、
タイトルとサイト名を取得
ボタンがあり、そこをクリックすることで
タイトル、サイト名を取得します。

何もしていない、デフォルトだと
こんな感じです。

タイムラインブロック

タイムラインというのは、

  1. STEP

    ここにタイトルを記入

    ここに詳細、本文などを記入

  2. STEP

    ここにタイトルを記入

    作業工程の説明など、
    順を追って何かを説明するときに便利です。

こちらも、、上のタイプの他に、
もうひとつデザインがあります。

  1. STEP

    こういう感じです。

  2. STEP

同様の機能を追加するプラグインがありますが、
THE SONICではプラグインを追加しなくても
タイムライン機能を使えます。

Q&Aブロック

Q

Q&Aブロックって何?

A

こういう感じのブロックのことです。

サイトなどでよく見られる、
「よくある質問」なんかに使えそうです。

右メニューから

  • 質問か回答
  • ラベルの文言
  • 枠線の太さ
  • 枠線の丸み
  • 枠線のスタイル
  • 文字色
  • 背景色
  • 枠線色

上記を変更できます。

Q&Aの部分も右メニューの
プリセットスタイルの設定で
変えることがことができます。
(5種類)

たとえばどんな感じ?

こんな感じ

コメントボックスブロック

https://drugstore.love/wp-content/uploads/2020/04/neko-min.jpg

コメントボックスについて

コメントボックスというのは
こんな感じで表示される、
「ユーザーの声」風のブロックです。

5種類あります。

https://drugstore.love/wp-content/uploads/2020/04/buta-min.jpg

commentbox-mark1

こんな感じです。

https://drugstore.love/wp-content/uploads/2020/04/saru-min.jpg

commentbox-mark2

上と、タイトルとスターの位置が違います。

https://drugstore.love/wp-content/uploads/2020/04/hakase-min.jpg

commentbox-mark3

中央にアイコンが表示されるタイプ。

https://drugstore.love/wp-content/uploads/2020/04/fox-min.jpg

commentbox-mark4

見た目がポップ。
以上の5種類です。

スターは5段階ですが、0.5ごとに設定できます。

画像は各々で用意します。

ランキングブロック

他はわりとわかりやすかったのですが、
これは使用用途は(なんとなく)わかるのですが、
使い方が良くわからなかったので、
公式の説明をしっかり読みました。

  1. 一番上のタイトル部分に
    「何のランキングなのか」を入力
  2. その下の「①」の部分(または王冠)に
    商品名を入力
  3. その下、「HTMLを入力」と
    表示されている部分に
    HTMLを入力。
    (バナーURLなどを入力)
    →プレビュータブに切り替えると
    実際の表示に近い形で
    表示されます。
  4. その横、デフォルトでは
    段落ブロックになっている部分に
    商品の説明文、紹介文を入力
  5. その下は
    ダブルボタンブロックになっていますが↓

おすすめの書籍ランキング

アフィリエイトで夢を叶えた元OLブロガーが教える
本気で稼げるアフィリエイトブログ
収益・集客が1.5倍UPするプロの技79 [ 亀山ルカ ]

これ1冊で、今日からはじめられる
稼げるブログのつくり方・
稼ぎ続けるテクニック。
プロがこっそり教える79の本気技。
(「BOOK」データベースより)

(THE SONIC公式のサンプルと同じような形式にしたい場合)
左側のボタンが詳しく見る、
右側のボタンが公式サイトへ、となっています。
記事入力欄のボタンブロックに合わせて、
右メニューからアフィリエイトのコードを挿入、
(またはボタン下の欄に挿入)
ボタン下の欄に公式サイトのリンクを貼る、という風な感じです。

ボタン部分のテキストは、
ボタン部分をクリックしてカーソルを合わせて
入力します。

一番下の、ブロック追加ボタン(+ボタン)を
クリックすると、
2位以降のブロックが追加されるので
同じ要領で設定していきます。

ASP広告ブロック

ランキングブロックと同じように、
右メニュー、またはボタン下に
コードを挿入して使います。

ランキングブロックと同じく、
ボタン部分のテキストは、
ボタン部分をクリックしてカーソルを合わせて
入力します。

ダブルボタンブロック

ブロックで設置すると、
並列で2つのボタンが表示されます。

ランキングブロックのボタンと同じく、
右メニューと、ボタン下から、
コードやURLを挿入、
ボタン部分のテキストは、
ボタン部分をクリックしてカーソルを合わせて
入力します。

A/Bテストブロック

ABテスト機能は、
2パターン用意したページデザインの効果を、
実際のサイトで競わせるテスト。
CTRの高い(=たくさんクリックされる)
広告コピーを見つける検証機能です。

収益アップをサポートする「ABテスト」機能

THE SONICの目玉機能のひとつですが、
正直、A/Bテストというものを
THE SONICで初めて知ったくらいなので、
触ってみただけじゃピンとこない、
というか、使い方が全然わからなかったので
公式を熟読しました。

  1. 比較したい2つの広告を用意して、
    再利用ブロックに登録する。
    ※Rinkerで登録したところ、
    ショートコードが表示されたので、
    カスタムHTMLブロックに、
    広告用のコードを
    そのままコピペしました。

    ブロックののタイトルは、
    後からA/Bテストで使用する時に
    何だかわからない!とならないように
    わかりやすいタイトルで。
  2. WordPressの左サイドメニュー、
    「THE SONIC」から
    A/Bテストに飛びます。
  3. 管理名、パターンA、パターンB、
    テストの概要を設定します。
    管理名は、のちのちテストが増えていった時に
    「これ何だっけ?」とならないような、
    後から見てもわかりやすいものが良いです。
    パターンA、パターンBは、
    再利用ブロックで広告を設置した後、
    A/Bテストのメニューで選択できるようになります。
    テストの概要は、これも後から見た時に
    何のために設置した、どんなテストか、
    自分でわかる説明を入力します。

完成したA/Bテストがこちら↓

サイトからは確認できませんが、
広告AとBが
ランダムに表示されるようになっています。

A/Bテストの管理画面から、
クリック率などが見られるようになっているので
どちらの広告が、より良いかを統計的に、
データで確認できます。

アコーディオンブロック

クリックすると開く、この部分に
文章や、ブロックを挿入して使います。

デフォルトでは
アコーディオンは閉じた状態なので、
常時表示しておくような内容ではないもの、
開いて中を見たら驚きがあるようなものを
設置して使えます。

雑誌の袋とじ的な使い方も。

THE SONIC、その他の特徴

ここではその他の
THE SONICでの記事作成時に
使える機能を紹介します。

タイトル文字数

記事編集画面のヘッダー部分。

通常では

  • ブロックの追加
  • 取り消し
  • やり直し
  • コンテンツ構造
    (文字数確認などができる)
  • ブロックナビゲーション
    (使われているブロックの簡易表示)

この4つがありますが、
THE SONICではこれに加えて
タイトル文字数も表示されています。
一般的に記事タイトル(H1)は
32文字までが良い、とされているので、
その確認のために、とても便利です。

記事を読む時間

これは記事編集画面ではないですが、
実際の記事の記事タイトル下には、
記事投稿日時、記事更新日時の他に、
その記事を読むのにかかる、
所要時間も表示されています。

これもプラグインを使って
表示することが多い機能ですが、
THE SONICではテーマにその機能が
標準装備されているので、
プラグインなしで使えます。

まとめ:使い甲斐(がい)のあるテーマ

WordPressはテーマごとに特徴があります。
今回のTHE SONICの場合ですと、
基本的に
ブロックエディターを前提としているので、
特にこれまでClassicEditorで記事を書いてきた場合などは
慣れるまでなかなか大変ですが、
THE SONICには、
独自の機能が色々あって、使っていて面白いです。

最後にTHE SONIC独自の機能のひとつとして、
ブロックをショートコード化することで、
テーマの外観や、ウィジェットにも
ブロック機能を使うことができる、

ということも、付け加えておきます。
※つまり、ザックリ言うと、
今回紹介した内容の全てを、
外観(サイトのトップページ等)や、
メニューにも使える、ということです。

発想と工夫次第でいろいろ面白いことができる。

これを書いている時点(2020年4月)では
まだ発売されたばかりのテーマですが、
色々更新もされて、
これからも楽しみなテーマです。

宴太

宴太

初心者ブロガー

宴太(えんた)です。
WordPress大好き!
PC大好き!
Apple大好き!
エンタメ大好き!の
初心者ブロガーです。

FOLLOW

カテゴリー:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA