THE THORのボックスのカスタマイズ方法と使い方【初心者向け】

 

こんな疑問にお答えします。

 

本記事の内容

 

今回は、THE THORのボックスの使い方やオリジナルのボックスを作る方法をご紹介します。

 

THE THORにはデフォルトで様々な種類のボックスが用意されています。

 

カスタマイズ性もあるため、オリジナルのボックスを作ることも可能できますよ。

 

WordPressの操作に慣れていない方でも簡単にカスタマイズできるので、安心してください。

 

それでは THE THORのボックスについて説明します。

 

THE THORのボックスの種類【デフォルト】

 

THE THORに標準搭載されているデフォルトのボックス種類を紹介します。

 

THE THORではオリジナルのボックスを作ることができますが、まずはデフォルトのボックスを使って慣れていきましょう。

 

デフォルトを知ってからカスタマイズ方法を学んだ方が理解しやすいですし、思い描いたオリジナルボックスが作れるようになります。

 

それでは、どんなデフォルトのボックスが用意されているか紹介します。

 

オリジナルのボックスのカスタマイズが知りたい方を早く知りたい方はこちらから。

 

THE THORのデフォルトのボックス

 

「投稿ページ」→「ツールバー」→「スタイル」→「ボックス」にデフォルトのボックスが入っています。

 

サイトタイトルボックス

 

BIG括弧ボックス

 

方眼ペーパーボックス

 

はてなボックス

 

ビックリボックス

 

Qボックス

 

Aボックス

 

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

 

背景アイコンボックス

 

帯アイコンボックス

 

THE THORのボックスの効果的な使い方

 

ボックスは、THE THORに限らず有料のWordpressテーマには、必ずといっていいほど用意されています。

 

なぜなら、ボックスを利用することで説明したいポイントを効果的に見せることができるからです。

 

 

ボックスを利用することで、グッと読者が読みやすい記事になりますよ。

 

THE THORのサイトタイトルボックスのサブタイトル編集方法

 

THE THORのサイトタイトルボックスのサブタイトルは、ツールバー上の「サブタイトル編集」をクリックすると入力することができます。

 

今回は、「テストサブタイトル」と入力してみます。

 

最後に、「OK」ボタンをクリックすると、以下のように表示されます。

THE THORでは、エディター上で入力した内容を確認できるので、とても便利ですよ。

 

THE THORのオリジナルタイトルボックスの作成方法

 

THE THORは、オリジナルのタイトルを作ったり、デフォルトのボックスをアレンジすることもできます。

 

その中でも簡単なボックスの作り方を紹介します。

 

ボックス完成図の例

 

以下のようなボックスを作っていきます。

これから紹介する作り方が基本となるため、慣れてくればより複雑なボックスを作ることができますよ。

 

デフォルトのボックスを作成

 

まずは、元となるデフォルトのボックスを選びます。

「スタイル」→「デフォルトパーツ」→「ボックス」

 

 

ボックスができたら、文字を2文字以上入れて、カーソルで反転させておきます。

注意：文字を2文字入れないとスタイルの変更がうまくできません。

 

背景色の変更

 

背景色を設定します。

 

「スタイル」→「カラーセット」→「背景色」→「ライトトーン」→「マゼンタ」

 

背景色以外にも、「文字色」「ボーター色」も変更することができます。

 

ボーター色

 

ボーダーの色を設定します。

 

「スタイル」→「カラーセット」→「ボーダー色」→「ライトトーン」→「オレンジ」

 

 

破線の設定

 

破線を設定します。

 

「スタイル」→「スタイルセット」→「ボーダー系」→「オール破線（中）」

 

その他にも、実線やボトムのみ破線なども選択することができます。

 

THE THORのオリジナルタイトルボックスの保存方法

 

作成したオリジナルタイトルボックスは、THE THORのメニューに設定しておくことができます。

 

メニューに設定しておけば、記事作成中に簡単に使うことができますし、時間の短縮にもなりますよ。

 

ボックスのHTMLコードをコピーする

 

エディターをテキストモードに切り替えて、HTMLコードをコピーします。

 

先ほどの作成例をテキストエディタで見ると、以下のようなHTMLコードが書かれています。

 

div class=の” ”の中をコピーします。

 

 

ボックスコードを設定

 

THE THORのカスタマイズ内でボックスコードを設定します。

 

「外観」→「カスタマイズ」→「パーツスタイル[THE]」→「ボックス設定」

 

デフォルトのボックス設定が10個あります。

 

この中のいずれかをオリジナルボックスに変更します。

 

ここでは、ボックス1に設定してみます。

 

タイトルは「オリジナル」、スタイルは「先ほどコビーしたHTMLコードを貼付け」します。

 

最後に「公開」をクリックします。

 

投稿画面でボックスを確認

 

投稿画面でオリジナルボックスが、正しく表示されるか確認してみます。

 

「スタイル」→「ボックス」

 

設定ができていれば、ボックスの名前に「オリジナル」が表示されています。

 

THE THORでは、ここで紹介した基礎の設定方法ができるようになれば、オリジナルボックスを簡単に作れます。

 

ぜひ、自分でイメージしたボックスを作ってみてください。

 

THE THORの引用ボックスの編集方法

 

THE THORでは、引用ボックスも編集することができます。

 

「外観」→「カスタマイズ」→「パーツスタイル設定[THE]」→「引用設定（個別ページ用）」

 

レイアウトは7種類

 

引用ボックスのレイアウトは、全部で7種類のボックスが用意されています。

 

カラーの変更

 

カラーの変更ができます。

 

カラーA、カラーB、カラーC、カラーDで設定できるのは、それぞれ以下の場所です。

 

 

 

カラーやレイアウトを変更すると、引用ボックスもグッとオリジナル性が出てきますよ。

 

THE THORのボックスのカスタマイズ方法と設定のまとめ

 

THE THORのボックスは、WordPressの操作に慣れていない方でも、オリジナルのボックスを作ることができます。

 

カスタマイズの方法も難しくなく、記事作成時にも挿入しやすいように設定するのも簡単です。

 

この記事を読んで、サイトを訪れた読者が見やすく読みやすいサイト作りのお手伝いができれば幸いです。

 

初心者だからこそWordPressテーマを使うべき理由

 

無料テーマでこんなことに苦戦していませんか

 

 

稼げるブログを作るには、検索の上位に表示されなければなりません。

 

そのためには、思い切って初期投資することが大事です。

 

 

月に7桁、8桁も稼いでいる有名ブロガーさんは、有料テーマを使用しています。

 

なぜなら、SEO対策ができている読者が読みやすいブログ作りができるから。

 

ブログで稼ぐには、いかに読者の方に寄り添ったブログ作りができているかが重要です。

 

読者が読みやすい→PV増加→収益増加

 

このような好循環がうまれます。

 

だからこそ、稼いでいるブロガーさんほど、初期投資をして有料テーマを使っています。