WordPressのテーマ「THE THOR」では、あらかじめ投稿編集時に使用できるスタイルがセットされています。そのため、HTMLやCSSがわからない方でも、記事を装飾することができるようになります。
インストール直後からすぐに使えるスタイルが約70種類が用意されています。また、パーツやカラー、スタイルなどを選んでいくことでオリジナルの装飾を作ることが可能です。
今回は、デフォルトでセットされているスタイルについて、お伝えしていきます。
WordPressのバージョン5.0以降は、「Gutenberg」という投稿用エディタが標準されています。しかし、こちらのエディタを使うと「THE THOR」の機能がうまく使えないこともあるので、旧エディタ(Classic Editor)を使用することが推奨されています。
旧エディタを使用するには、プラグインを追加する必要があります。
１．ダッシュボード ＞ プラグイン ＞ 新規追加
２．プラグインを検索（Classic Editorと入力）
３．「今すぐインストール」をクリック
４．「有効化」をクリック
有効化するだけで、とくに設定などはありません。
スタイルの種類
スタイルを選択するには、投稿のビジュアルエディタを使用します。
スタイルタブをクリックすると、スタイルの一覧が表示されます。「マーカー」から「ボックス内ボックス」までが、デフォルトのスタイルになります。
マーカー
マーカーは、「太」「中」「細」の3種類×6種類のカラー（レッド、ブルー、イエロー、ピンク、グリーン、グレー）選択することができます。
「よく使うマーカー」という項目ですが、デフォルトでは「太レッド」がセットされています。よく利用するマーカーがあれば、カスタマイザーから変更し設定することができます。（変更場所：ダッシュボード ＞ 外観 ＞カスタマイズ ＞ パーツスタイル設定 ＞ マーカー）
ラベル
デフォルトでセットされているラベルの種類は、10種類。ちょっとした見出しなどに利用できますね。
見本：ライム左ラウンドラベルを使用
THORの操作に慣れ、オリジナルラベルを作って、繰り返し利用したいなぁっと思ったときは、デフォルトの項目を削除しオリジナル項目を追加することができます。（外観 ＞ カスタマイズ ＞ パーツスタイル設定 ＞ ラベル設定）
ボタン
ボタンもデフォルトで10種類用されています。ラベルと同様に、オリジナルボタンを設定することができます。
ボタンに表示されているアイコンも変更することができます。
アイコンの変更方法を簡単に説明（例：上のアマゾンボタン）
１．「ビジュアルエディタ」から「テキストエディタ」へ切り替える
２．「アイコンオプション」をクリック
３．アイコン一覧から挿入したいアイコンの横にある文字列をコピーする
４．ボタンのhtmlソースを探す。アマゾンボタンの場合、以下のとおり。
<a class=”ep-btn icon-amazon es-BTiconBorder es-BT3d es-radius bgc-DLlime ftc-white es-TpaddingS es-BpaddingS es-shadow”>
５．「icon-amazon」の部分に、先ほどコピーした文字列を貼り付けます。
６．「ビジュアルエディタ」に戻し、確認しましょう。
ボックス
ボックスもデフォルトで10種類がセットされています。
ボックス内ボックス
ボックス内ボックスは、名前のとおり、ボックスの中にもう１つボックスを設置したいときに使用します。
ボックス
スタイルデザイン一覧（デフォルト）
マーカー一覧
マーカー（太）
レッド ブルー イエロー ピンク グリーン グレー
マーカー（中）
レッド ブルー イエロー ピンク グリーン グレー
マーカー（細）
レッド ブルー イエロー ピンク グリーン グレー
ラベル
角丸レッドラベル
シンプルボーダーラベル
ライム左ラウンドラベル
ブルーボーダーラウンドラベル
丸アイコンオレンジラベル
ピンクアイコンラベル
四角アイコンラベル
破線ボーダーアイコンラベル
ビッグ右ラウンドブルーラベル
ターコイズグラデ
右寄せラベル
ボタン
ボックス
ボックス内ボックス
外側のボックスは、スタイル ＞ デフォルトパーツ ＞ ボックス を使用しています。
まとめ
ビジュアルエディタの文字だけだと、どうもイメージがわかないので一覧にしてみました。
デフォルトのスタイルを応用して、ボーダーや背景カラーなどを変更したりすることもできます。操作方法については、また次の機会にお伝えしたいと思います。