THE THOR WordPressテーマ

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

悩んでいる人
THE THORを使い始めたけど、ボックスの使い方や設定方法が分かりません。使い方に慣れていない僕でもできる、THE THORのボックスの使い方や設定方法を教えてください。

 

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

 

本記事の内容

・THE THORのボックスの種類【デフォルト】
・THE THORのボックスの効果的な使い方
・THE THORのサイトタイトルボックスのサブタイトル編集方法
・THE THORのオリジナルタイトルボックスの保存方法
・THE THORの引用ボックスの編集方法

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

  1. サイトタイトルボックス
  2. BIG括弧ボックス
  3. 方眼ペーパーボックス
  4. はてなボックス
  5. ビックリボックス
  6. Qボックス
  7. Aボックス
  8. シンプルアイコンボックス
  9. 背景アイコンボックス
  10. 帯アイコンボックス

 

サイトタイトルボックス

 

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種類のボックスが用意されています。

  1. 基本(デフォルト)
  2. 左線
  3. 丸角
  4. 丸角線
  5. 左背景
  6. ラベル

 

カラーの変更

 

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

 

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

 

 

 

引用ボックスは、以下の赤枠で囲ったアイコンをクリックすると挿入できます。

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

 

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

 

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

 

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

 

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

 

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

 

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

 

  • 思ったようにデザインできない
  • カスタマイズに時間がかかる
  • アクセス数が増えない
  • 稼ぐことができない

 

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

 

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

 

WordPressの有料テーマでできること

  1. 検索上位を目指しやすくなる
  2. 見た目が綺麗で読みやすくなる
  3. オリジナル性が出る
  4. SEO対策がばっちり
  5. 有名ブロガーも使用している

 

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

 

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

 

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

 

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

 

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

 

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

 

WordPressテーマ「THE THOR」

  • 高機能のSEO対策ずみのテーマ
  • 有名ブロガーも使用
  • 会員フォーラムやマニュアルがある
  • 本人使用なら複数ブログで使用可能

THE THORを詳しく知りたい

-THE THOR, WordPressテーマ

© 2021 SasamiBlog Powered by AFFINGER5