![](https://asuhareblog.com/wp-content/uploads/2021/12/bo-3-1.png)
wordpressテーマ【the thor】ボックスのやり方が、いまいちよくわからない・・・。
とりあえず、オリジナルボックスを作ってみたいので教えてほしいです。
そんな質問にお答えします。
それでは、さっそくはじめていきます。
the thor【オリジナルボックスの作り方】
the thorでは、いろいろなボックスを作ることができます。とりあえずは、基本的なボックスの作り方をひとつマスターすることで、あとは自分好みにカスタマイズできるようになります。
簡単なので、大丈夫です。
それでは、はじめていきます。
- スタイルをクリック
- デフォルトパーツ
- ボックスをクリック
![](https://asuhareblog.com/wp-content/uploads/2021/12/box-1.png)
![](https://asuhareblog.com/wp-content/uploads/2021/11/sitasankaku-1.png)
すると、
グレーのボックスがあらわれます。
- グレーのボックス内に文字を入れます
- 適当な文字を入れたら反転しておきます(ボックスの変換がスムーズにいくための準備)
![](https://asuhareblog.com/wp-content/uploads/2021/12/box-2.png)
ボックスの背景色
次に、ボックスの背景色を変えていきます。
- スタイルをクリック
- カラーセット
- 背景色
- ライトトーン
- ライムをクリック
![](https://asuhareblog.com/wp-content/uploads/2021/12/box-3.png)
すると、
下のように背景色が変わります。
![](https://asuhareblog.com/wp-content/uploads/2021/12/box-4.png)
ボックスの外枠(ボーダー)
今度は、ボックスの外枠(ボーダー)を入れてみます。
- スタイルをクリック
- スタイルセット
- ボーダー系
- オール破線(細)をクリック
![](https://asuhareblog.com/wp-content/uploads/2021/12/box-5.png)
![](https://asuhareblog.com/wp-content/uploads/2021/11/sitasankaku-1.png)
下のように破線が現れました。
![](https://asuhareblog.com/wp-content/uploads/2021/12/box-6.png)
ボックスの外枠(ボーダー) 色
最後に、 ボックスの外枠(ボーダー)に色を入れてみます。
- スタイルをクリック
- カラーセット
- ボーダー色
- ブライトトーン
- ブルーをクリック
すると、
下のように外枠の破線に色が付きました。
![](https://asuhareblog.com/wp-content/uploads/2021/12/box-8.png)
the thor オリジナルボックスの保存
オリジナルボックスを作ったら、
保存して登録すると次回からすぐに呼び出すことができますよ。
それでは、はじめていきます。
先ほど作ったオリジナルボックスのところを、ビジュアルエディタからコードエディタに変えて見てみましょう。
- 画面右上の三つの点のところ①をクリック
- コードエディタをクリック
- 赤枠をの部分をコピーします(ここがボックスの部分になります)
![](https://asuhareblog.com/wp-content/uploads/2021/12/box-9-1024x448.png)
![](https://asuhareblog.com/wp-content/uploads/2021/11/sitasankaku-1.png)
wordpressのダッシュボード画面
wordpressのダッシュボード画面 にもどります。
- 外観
- カスタマイズをクリック
![](https://asuhareblog.com/wp-content/uploads/2021/12/box-10-1024x325.png)
すると、
下のような画面が現れます。
![](https://asuhareblog.com/wp-content/uploads/2021/11/sitasankaku-1.png)
![](https://asuhareblog.com/wp-content/uploads/2021/08/box-11-1024x425.png)
- パーツスタイル設定[THE]をクリック
- ボックス設定をクリック
- あらかじめ登録されているボックスを削除
- タイトル(任意の名前を登録)
- スタイルは先ほどコピーしたものを貼り付け
- 公開をクリック
投稿画面にもどって確認
- スタイルをクリック
- ボックス
- オリジナルボックスが登録されている
- 完了です。
お疲れ様です。
投稿画面にもどって確認します。
![](https://asuhareblog.com/wp-content/uploads/2021/12/box-12.png)
まとめ
オリジナルボックス基本のやり方を覚えてしまえば、あとは自分好みのボックスがいくらでも作れちゃいます。
ブログに合ったボックスを作ってみてくださいね。
ではではまた。asuhareでした。
ぼく自身が実際使ってみて思ったこと。最初から導入していれば・・・。
今更、後悔【THE THOR(ザ・トール)】