THE THOR

THE THORでボックスを使う方法!デザインのカスタマイズ法も解説!

悩める人

  • 「THE THOR」でボックスを挿入するにはどうすればよいの?
  • ボックスデザインの変更方法が分からない。

このような悩みをお持ちの方向けの記事となっています。

 

「THE THOR」は多くの機能を持つWordPressテーマであり、その1つにボックス挿入機能があります。

ボックスは記事に緩急を持たせることも可能なので、読者が飽きないようにするためにも、適度に挿入したほうが良いです。

本記事では、重要な役割を持つボックスを「THE THOR」の記事中へ挿入する方法と、デザインをカスタマイズする方法を解説します。

 

 

THE THOR(ザ・トール)標準のボックスデザイン

「THE THOR」には様々なボックスが揃っています。

ボックスのデザインは変更可能ですが、標準で下記10種類のボックスが用意されています。

 

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

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

ボックス内のテキストだけでなく、ボックスのボーダー上にサブタイトルを付けられるデザインとなっています。
はらちゃん

 

BIG括弧ボックス

BIG括弧ボックス

大きなボックスデザインで、目立たせたい内容がある時にぴったりのデザインです。
はらちゃん

 

方眼ペーパーボックス

方眼ペーパーボックス

方眼紙風で、まるで紙に文字を記したようなデザインとなっています。
はらちゃん

 

はてなボックス

はてなボックス

はてなマークのアイコンを文章の前に配置したボックスです。用語の解説をする際に最適なデザインと言えますね。
はらちゃん

 

ビックリボックス

ビックリボックス

ビックリマークのアイコンを文章の前に配置したボックスです。注意喚起をする際にベストなボックスですね。
はらちゃん

 

Qボックス

Qボックス

Qマークのアイコンを文章の前に配置したボックスです。よくある質問の内容を記載してみましょう!
はらちゃん

 

Aボックス

Aボックス

Aマークのアイコンを文章の前に配置したボックスです。先ほどのQボックスとセットで利用します。
はらちゃん

 

シンプルアイコンボックス

シンプルアイコンボックス

文章の前にアイコンを設置したシンプルなボックスです。
はらちゃん

 

背景アイコンボックス

背景アイコンボックス

アイコンを文字の背景として表示したアイコンです。おしゃれなボックスに仕上げられますね!
はらちゃん

 

帯アイコンボックス

帯アイコンボックス

文章の前のアイコンに背景色を付け、帯状にしたボックスです。独特なボックスに仕上げられますね!
はらちゃん

 

THE THOR(ザ・トール)でボックスを使う方法

先ほどご紹介しましたボックスを、記事内へ挿入する方法・編集する方法を解説します。

 

ボックスを記事内へ挿入する方法

まず、基本となるボックスを記事内へ挿入する方法を見ていきます。

方法ですが、記事投稿画面のメニューバーから「スタイル > ボックス」をクリックします。

スタイル > ボックス

 

利用したいボックスをクリックし、記事内へ挿入されれば完了です。

記事内へボックス挿入

 

ボックスのサブタイトルを変更する方法

ボックスデザインの1つとして、サブタイトルボーダーボックスがあります。

サブタイトルを付けられるボックスですが、サブタイトル部分にカーソルを入れることはできません。

本文部分にはカーソルを入れられるので、編集が可能となっています。

サブタイトル部分にカーソルを入れられない

 

では、一体どのようにサブタイトルを変更すれば良いのかというと、メニューにある「サブタイトル編集」ボタンから行います。

サブタイトルを編集するにあたり、サブタイトルボーダーボックス内にカーソルを入れます。

サブタイトルボーダーボックス内にカーソルを入れる

 

次に、「サブタイトル編集」ボタンをクリックします。

「サブタイトル編集」ボタン

 

クリックすると、下記サブタイトル編集画面が立ち上がります。

サブタイトル編集画面

 

サブタイトルを入力し、OKボタンをクリックしましょう。

ボックスのサブタイトルに内容が反映されていれば、完了です。

サブタイトルの内容反映確認

カーソルをサブタイトルのボックス内に挿入できない点は要注意です!
はらちゃん

 

THE THOR(ザ・トール)のボックスデザインをカスタマイズする方法

「THE THOR」には標準で、10種類のボックスが用意されていることをご紹介しました。

しかし、標準のボックスデザインでは満足できないという方もおられるでしょう。

「THE THOR」では下記2種類の方法で、ボックスデザインの変更が可能となっています。

詳細を見ていきましょう。

 

記事投稿画面から変更

まず、記事投稿画面からボックスデザインを変更する方法ですが、こちらはボックスデザインをゼロから作成するイメージとなります。

例えば、下記は私がゼロから作成したボックスデザインです。

ゼロから作成したボックス

  • ボーダー:オール破線(細)
  • ボーダー色:ヴィヴィッドトーンのブルー
  • 背景色:ベリーペールトーンのブルー

では、このボックスを作成する方法を解説していきます。

 

step
1
ボックスのデフォルトパーツ挿入

WordPressの記事投稿画面のメニューから「スタイル > デフォルトパーツ > ボックス」をクリックします。

スタイル > デフォルトパーツ > ボックス

 

グレー背景のボックスが挿入されるので、ボックス内に任意のテキストを入力してください。

下記例では、「ああ」としています。

ボックス内へ任意のテキストを入力

 

次に、入力したテキストに対してドラッグ&ドロップし、範囲選択してください。

テキストを範囲選択

範囲選択することで、ボックスのデザインをカスタマイズできるようになります。

 

step
2
ボックスデザインにボーダーを付ける

デフォルトのボックスを挿入できれば、カスタマイズを行っていきます。

まず、ボーダーを設定する方法です。

 

先ほど解説しました通り、テキストを範囲選択した状態で「スタイル > スタイルセット > ボーダー系」をクリックします。

実践・破線・点線といくつかボーダーのパターンが用意されているので、お好みで選択しましょう。

スタイル > スタイルセット > ボーダー系

 

「オール破線(細)」を選択すると、下記のようなボックスデザインとなります。

「オール破線(細)」のボックスデザイン

ボーダー線の種類が変更されましたね。

 

step
3
ボックスデザインのボーダー色を変更する

次に、設定したボーダー色を変更します。

ボーダー色の変更方法ですが、「スタイル > カラーセット > ボーダー色」をクリックします。

スタイル > カラーセット > ボーダー色

カラーとしては100種類近く用意されていますが、ブライトトーンやディープトーンなど難しいカラー名称となっているので、適用してみなければどのようなカラーか把握できません。

自身のサイトに合ったカラーがないか、色々試してみてください。

 

ボーダー色に「ヴィヴィッドトーン > ブルー」を選択すると、下記のようなボックスデザインとなります。

ボーダー色が「ヴィヴィッドトーン > ブルー」のボックスデザイン

ボーダー色が変更されるのを確認しましょう。

 

step
4
ボックスデザインの背景色を変更する

最後に、ボックスデザインの背景色を変更します。

背景色の変更方法ですが、「スタイル > カラーセット > 背景色」をクリックします。

スタイル > カラーセット > 背景色

カラーの種類としては、先ほどのボーダーと同じです。

 

背景色に「ベリーペールトーン > ブルー」を選択すると、下記のようなボックスデザインとなります。

背景色が「ベリーペールトーン > ブルー」のボックスデザイン

背景色が青色に変更され、サンプルのボックスは完成となります。

 

今回はボーダーの設置・ボーダー色の変更・背景色の変更方法をご紹介しましたが、他にも下記カスタマイズ項目が用意されています。

ボックスのカスタマイズ項目

  • サイズ設定
  • ボックスの内側・外側の余白設定
  • ボックス・テキストのシャドウ設定
  • ボックスの角丸設定

必要に応じてご利用ください。

記事投稿画面からボックスデザインを変更する方法は以上です。

 

WordPressのカスタマイザーから変更

THE THOR(ザ・トール)標準のボックスデザイン」の章で、「THE THOR」には10種類のボックスデザインが用意されていることをご紹介しました。

このボックスデザインは、WordPressのカスタマイザーから自由に変更が可能となっています。

頻繁に利用するボックスデザインを登録しておき、すぐに呼び出すようなイメージですね。

 

変更方法ですが、WordPressのダッシュボードから「外観 > カスタマイズ」と進みます。

外観 > カスタマイズ

 

次に、カスタマイズ画面から「パーツスタイル設定 > ボックス設定」をクリックします。

パーツスタイル設定 > ボックス設定

 

「ボックス設定」のカスタマイズ画面には、ボックス1~10までの項目が用意されています。

例えば、先ほど作成した下記ブルー背景・ボーダーのボックスデザインを設定してみます。

ブルー背景・ボーダーのボックスデザイン

 

ボックスのカスタマイズ画面で、タイトルの項目が用意されているので、任意の名称を入力します。

ここでは例として、「ブルー背景・ボーダーのボックス」とします。

タイトルに「ブルー背景・ボーダーのボックス」と入力

 

タイトル入力後は、スタイルの設定を行っていきます。

スタイルには「THE THOR」専用のコードを入力する必要がありますが、「記事投稿画面から変更」の章で解説した手順でボックスを作成後、コードを取得しなければなりません。

例えば、下記画面のように利用したいボックスを作成します。

ボックスの作成

 

次に、編集画面右上の「テキスト」ボタンをクリックします。

「テキスト」ボタン

 

テキストエディターモードに変わるので、class部分のコードを全てコピーします。

私が作成したボックスの場合、下記赤字の部分となります。

classのコード

<div class="ep-box bgc-VPblue es-borderDashedS brc-Vblue es-BiconCorner">ブルー背景・ボーダーのボックスデザイン</div>

 

コピーしたコードを、WordPressカスタマイザー画面の「スタイル」へ貼り付けます。

WordPressカスタマイザー画面の「スタイル」

変更後は「公開」ボタンを忘れないようにしましょう。

 

最後に、ボックスの反映確認を行います。

記事投稿画面から「スタイル > ボックス」をクリックすると、先ほど設定した「ブルー背景・ボーダーのボックス」へ名称が追加されています。

「ブルー背景・ボーダーのボックス」の項目追加

 

「ブルー背景・ボーダーのボックス」の項目をクリックし、記事内に設定したボックスが挿入されれば完了です。

「ブルー背景・ボーダーのボックス」の挿入確認

 

WordPressのカスタマイザーからボックスデザインを変更する方法は以上です。

「AddQuicktag」のプラグインと同様の機能となりますね!
はらちゃん

 

THE THOR(ザ・トール)のボックス使い方まとめ

「THE THOR」のボックスの使い方、カスタマイズ方法についてご紹介しました。

標準で備わっているボックスは10種類ありますが、カラーをサイトデザインに合わせたい場合は、ボックスのカスタマイズは必須です。

しかし、「THE THOR」のボックスデザインのカスタマイズはテキストエディターも使用するので、使い方が少々複雑な部分もあります。

本記事を参考に、ご自身のサイトに適したボックスを作成してみてくださいね。

ボックスデザインを少しでもおしゃれにして、他のサイトと差別化を図ってみましょう!
はらちゃん
 

-THE THOR

© 2020 アフィリエイトゼミ