注目キーワード
  1. ブログ
  2. お金
  3. スキル

【THE THOR】ボックス(囲み枠)の使い方【ザ・トール】

 

ワードプレスの有料テーマTHE THORボックスの使い方を解説します。
 
こんな感じで文字を囲んだり、
 
おしゃれに装飾することができます。

 

ボックスの使い方すらわからず苦労した経験をもとに詳しく解説します。

 

ワードプレスでは、現在はブロックエディタ(Gutenberg)が使われているのですが、

「TheThor ボックス 使い方」

でググってもクラシックエディタの記事しか出なくて使い方がわかりませんでした。

 

そもそもワードプレスを最近使い始めたので違うエディタがあることすら知りませんでしたw

 

 

【THE THOR】ブロックエディタ(Gutenberg)でのボックスの使い方

 

THE THORではワンクリックで10種類のボックスを作ることができます。

 

初期設定の10種類のボックス

 

ボックスを作るには、編集画面で

  1. 左上の⊕をクリック
  2. フォーマットの中の
  3. クラシックを選択

 

クラシックエディタを開く方法

 

すると、クラシックエディタが表示されるので、

 

  • スタイル
  • ボックス
  • 使いたいボックスを選択

 

クラシックエディタでビックリボックスを表示する方法

 

下のようなボックスが表示されましたか?

これがビックリボックスです。

 

ボックスが表示されたら、あとは文字を入力するだけですね。

 

ちなみに、ボックスの中で改行したいときは、Shift+Enterです。

Enterだけだとボックスの外に改行されるので注意。

 

ここにあるボックス以外を使いたい方は、HTML編集で柄や囲み線を変更できます。

※初心者でも編集できる方法は後ほど解説。

 

また、WordPressのパーツスタイル設定から、HTMLコードを変えておけば、ワンクリックでお気に入りのボックスを使うこともできます。

※こちらも後ほど解説。

 

デフォルトボックス

 

シンプルなボックスが好みの方は

  • スタイル
  • デフォルトパーツ
  • ボックスをクリック

 

クラシックエディタでデフォルトボックスを表示する方法

 

超シンプルなボックスが表示されましたね。

私はこのシンプルなボックスが使いたかったのに、上のボックスにばかり目が行ってて、デフォルトボックスを見つけるのに5分くらいかかりましたw

 

ボックスの編集方法

 

自分好みのおしゃれなボックスを作ることもできます。

 

上の方で少し触れたように、HTML編集で色や柄や囲み線を変えることもできるのですが、ここではもう少し簡単に編集する方法をお伝えしたいと思います。

 

まずはデフォルトボックスを作ります。
ボックス内に文字を入力し、選択(反転表示)させておきます。
文字を選択しておかないとボックスの編集ができません。
・スタイル
・スタイルセット
・ボーダー系
・オール破線(中)

を選択すると、ボックスの外側が破線で囲まれます。

・スタイル
・スタイルセット
・シャドウ系
・ボックス内(ダーク)

を選択すると、ボックスの内側に影がつきます。

・スタイル
・スタイルセット
・角丸系
・ラウンド

を選択すると、ボックスの角が丸くなりましたね。

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

を選択すると、ボックスの背景に色がつきます。

・スタイル
・カラーセット
・ボーダー色
・ヴィヴィッドトーン
・レッド

を選択すると、ボックスを囲んでる破線に色がつきます。

 

絶妙にダサいボックスが完成しましたw

 

このように、

  • ボックスに囲み線や影をつけたり、
  • 角を丸くするなど形を変えたり、
  • 背景のを変えたり、
  • 文字のサイズを変えたり

することができます。

 

他にもいろいろ自分でためしてみて、おしゃれなボックスを作りましょう^^

 

装飾デザインが好きな人はテンションが上がって記事を書くのがはかどるかもしれませんね。

 

作ったボックスを保存する方法

 

苦労して作ったボックスは、ワンクリックで作れるように設定しておきましょう。

 

作ったボックスを設定する手順

  1. ボックスのコードをコピー
  2. ボックス設定に貼り付け

たったこれだけです。

 

詳しく解説します。

 

ボックスのコードをコピー

 

下のシンプルなボックスを設定してみます。

シンプルボックス

 

まずはボックスをHTML表示します。

 

表示されたコードの「””」で囲まれた赤字の部分をコピーします。

<div class="ep-box brc-black bgc-white es-BiconCorner es-Bicon es-borderSolidS es-radiusL">シンプルボックス</div>

 

次に、ボックス設定を開きます。

 

ボックス設定に貼り付け

 

外観 → カスタマイズ → パーツスタイル設定 → ボックス設定

から初期設定のボックスを編集することができます。

 

ボックス設定画面

 

変更したいボックスの「■スタイル」に貼り付けます。

 

クリックしやすいように1番下の「ボックス10の設定」に貼り付けて、分かりやすいように「■タイトル」も変更しました。

 

「公開」をクリックすれば完了です。

 

投稿ページでボックスが作れるか確認してみてください^^

 

ボックスの中にリスト(箇条書き)を入れる方法

 

次はボックスの中にリストを入れようと思ったら…

 

  • あれ?
  • なぜかボックスの中にリストが入ってくれない…

 

普通に改行したら↑のようになるし

 

  • シフトで改行したら
    リストにならないし
  • なぜだー!

 

と困っていたのですが、結論は

 

  1. 使いたいボックスを作る
  2. 作ったボックスとは別のブロックでリストを作る
  3. リストをコピー
  4. ボックスの中にペースト

 

という感じで別々に作ってコピペするだけでした。

 

ボックスの中にリストを作る方法

 

HTML編集でボックスの中にリストを入れることもできるのですが、コピペするだけの方が楽なのでおすすめです。

 

まとめ

 

  • 初期設定のボックスが10種類ある
  • シンプルなデフォルトボックスもある
  • 自分好みのおしゃれなボックスが作れる
  • WordPress設定でコードを変えておけば作ったボックスが簡単に使える
  • ボックス内にリストを入れたいなら、別々に作ってからコピペ

 

たかがボックス「使えたら何でもいいや」とか「面倒なのでボックスなんか使わない」なんて方もいるかもしれません。

 

ですが、それが読者にとって最高の記事になるでしょうか?

 

読者が読みやすい記事になるように装飾をして、気持ちよく読んでもらえるように頑張りましょう。

 

最後まで読んで頂きありがとうございました。

 

THE THORを、ボックスを使いこなしておしゃれで読みやすい記事を作っていきましょう。

 

関連記事

ワードプレスの有料テーマTHE THORのサイトマップの設定方法を解説します。   サイトマップには HTMLサイトマップ XMLサイトマップ という2種類のサイトマップがあります。   HTMLサ[…]

最新情報をチェックしよう!