THORでセットされているデフォルトのスタイル一覧

WordPressのテーマ「THE THOR」では、あらかじめ投稿編集時に使用できるスタイルがセットされています。そのため、HTMLやCSSがわからない方でも、記事を装飾することができるようになります。

インストール直後からすぐに使えるスタイルが約70種類が用意されています。また、パーツやカラー、スタイルなどを選んでいくことでオリジナルの装飾を作ることが可能です。

今回は、デフォルトでセットされているスタイルについて、お伝えしていきます。

 

WordPressのバージョン5.0以降は、「Gutenberg」という投稿用エディタが標準されています。しかし、こちらのエディタを使うと「THE THOR」の機能がうまく使えないこともあるので、旧エディタ(Classic Editor)を使用することが推奨されています。

旧エディタを使用するには、プラグインを追加する必要があります。

1.ダッシュボード > プラグイン > 新規追加
2.プラグインを検索(Classic Editorと入力)
3.「今すぐインストール」をクリック
4.「有効化」をクリック

有効化するだけで、とくに設定などはありません。

スポンサーリンク

スタイルの種類

スタイルを選択するには、投稿のビジュアルエディタを使用します。

 

スタイルタブをクリックすると、スタイルの一覧が表示されます。「マーカー」から「ボックス内ボックス」までが、デフォルトのスタイルになります。

マーカー

マーカーは、「」「」「」の3種類×6種類のカラー(レッドブルーイエローピンクグリーングレー)選択することができます。

「よく使うマーカー」という項目ですが、デフォルトでは「太レッド」がセットされています。よく利用するマーカーがあれば、カスタマイザーから変更し設定することができます。(変更場所:ダッシュボード > 外観 >カスタマイズ > パーツスタイル設定 > マーカー)

ラベル

 

デフォルトでセットされているラベルの種類は、10種類。ちょっとした見出しなどに利用できますね。

見本:ライム左ラウンドラベルを使用

 

THORの操作に慣れ、オリジナルラベルを作って、繰り返し利用したいなぁっと思ったときは、デフォルトの項目を削除しオリジナル項目を追加することができます。(外観 > カスタマイズ > パーツスタイル設定 > ラベル設定)

 

ボタン

ボタンもデフォルトで10種類用されています。ラベルと同様に、オリジナルボタンを設定することができます。

見本:グリーン立体アイコンボタン

 

ボタンに表示されているアイコンも変更することができます。

アイコンを変更

アイコンの変更方法を簡単に説明(例:上のアマゾンボタン)

1.「ビジュアルエディタ」から「テキストエディタ」へ切り替える
2.「アイコンオプション」をクリック
3.アイコン一覧から挿入したいアイコンの横にある文字列をコピーする
4.ボタンのhtmlソースを探す。アマゾンボタンの場合、以下のとおり。
<a class=”ep-btn icon-amazon es-BTiconBorder es-BT3d es-radius bgc-DLlime ftc-white es-TpaddingS es-BpaddingS es-shadow”>
5.「icon-amazon」の部分に、先ほどコピーした文字列を貼り付けます。
6.「ビジュアルエディタ」に戻し、確認しましょう。

 

ボックス

ボックスもデフォルトで10種類がセットされています。

見本:サブタイトルボーダーボックス

 

アイコンがセットされているボックスは、ボタン同様に変更することができます。
見本:シンプルアイコンボックス

 

ボックス内ボックス

ボックス内ボックスは、名前のとおり、ボックスの中にもう1つボックスを設置したいときに使用します。

ボックス

ボックス内ボックス

 

 スタイルデザイン一覧(デフォルト)

マーカー一覧

マーカー(太)

レッド ブルー イエロー ピンク グリーン グレー

 

マーカー(中)

レッド ブルー イエロー ピンク グリーン グレー

 

マーカー(細)

レッド ブルー イエロー ピンク グリーン グレー

 

ラベル

角丸レッドラベル

シンプルボーダーラベル

ライム左ラウンドラベル

ブルーボーダーラウンドラベル

丸アイコンオレンジラベル

ピンクアイコンラベル

四角アイコンラベル

破線ボーダーアイコンラベル

ビッグ右ラウンドブルーラベル

ターコイズグラデ
右寄せラベル

 

ボタン

オレンジ100%ボタン

グリーンシャドウ100%ボタン

ブルーボーダーボタン

ブルーグラデボタン

ピンクアイコンボタン

ピンクグラデアイコンボタン

グリーン立体アイコンボタン

グレーラウンドアイコンボタン

サークルアイコンボタン

ボックスアイコンボタン

 

ボックス

サブタイトルボーダーボックス
BIG括弧ボックス
方眼ペーパーボックス
はてなボックス
ビックリボックス
Qボックス
Aボックス
シンプルアイコンボックス
背景アイコンボックス
帯アイコンボックス

 

ボックス内ボックス

外側のボックスは、スタイル > デフォルトパーツ > ボックス を使用しています。

ターコイズグラデタイトル

 

 

アイコンボーダータイトル

 

 

ブルーシャドウタイトル

 

サブタイトルボーダーボックス

 

BIG括弧ボックス

 

方眼ペーパーボックス

 

はてなボックス

 

ビックリボックス

 

Qボックス
Aボックス

 

まとめ

ビジュアルエディタの文字だけだと、どうもイメージがわかないので一覧にしてみました。

デフォルトのスタイルを応用して、ボーダーや背景カラーなどを変更したりすることもできます。操作方法については、また次の機会にお伝えしたいと思います。

広告