こんにちは、SAMURAIPAPAです。
WordPressのテーマ【THE THOR（ザ・トール）】で、強調したいところを枠で囲む方法を紹介します。
たったそれだけのことですが、僕はとっても苦労しました。
詳しく書いてあるサイトはたくさんありますが、初心者が初心者なりに見つけてたどり着いたやり方を紹介します。
ここで紹介する方法が間違っているとするなら、初心者が自力で勉強して正しいやり方を身に着けるには、有益な情報が不足している、ということです。
感覚的には、時間もかかり簡単にできたとは思わないので、初心者向けの情報がもっとあっていいんだろうと思っています。
同じように苦労されてる人の役に立てばいいなと思います。
僕はコード読んだり書いたりは出来ないので、そういう初心者の方でも簡単にできる方法です。
ボックスを入れる方法
【THE THOR（ザ・トール）】で最初から用意されている枠は下記の通りです。
これをそのまま使うためには、̟新規ボックス追加⊕でクラシックを選びます。
スタイル＞ボックスから使いたいものを選択して挿入することができます。
同様に作業を繰り返しせば、ボックスを好みにカスタマイズ可能です。例えば
- スタイルセット＞文字系＞サイズ（大）
- スタイルセット＞ボーダー系＞オール実線（中）
- スタイルセット＞丸角系＞丸角(10px)
- スタイルセット＞ボックスパーツ＞アイコン(背景)
- カラーセット＞ボーダー色＞ダルトーン＞グリーン
- カラーセット＞背景色＞ライトトーン＞グリーン
スタイル＞スタイルセット から変更出来る項目は下記の通りです。
| サイズ系 | ボックスの大きさを変えます |
| 内側余白 | ボックス内の文字位置を調整します |
| 外側余白系 |
ボックスの位置を調整します |
| ボーダー系 |
ボックスの枠線を設定できます 例）実線、点線、太線 |
| 文字系 | 文字の位置、サイズを変更します |
| シャドウ系 | ボックスに影をつけます |
| 角丸系 | ボックスの角を丸くします |
| 背景系 | ボックスの背景タイプを変えます 例）グラデーション、方眼 |
| ボックスパーツ専用系 | アイコンを変更します 例）！ ？ Q |
これで割と好きなようには変更できますが、思うように変わらなかったり、何度もクリックするのは面倒です。
そこでもっと簡単にカスタムすることも可能です。
多くの方がネットでコードを公開してくれてますので、コードをコピペさせてもらいましょう。
やり方は2通りあります。
1.クラシックエディタのブロックを挿入して、HTML表示にしてからコードをコピペします。
2.カスタムHTMLのブロックを挿入して、コードをコピペする。ただし、プレビューしないと、成功したか分かりません。
コピペするときに「”」が「”」に化けることがあるので要注意！
これ注意しないと、めっちゃハマって先に進めなくなりました。
お気に入りのものが無ければ、自分でチューニングが必要です。
参考になるボックスを公開してくださっているサイト例です↓
THE THOR のエディタから挿入できるボックスデザインのサンプルと、デフォルトのデザインからの変更方法をまとめてみま…
お気に入りのボックスを登録
お気に入りのボックスが見つかったら、頻繁に使うことになるので、冒頭で紹介したデフォルトのボックスと入れ替えることができます。
ここに登録しておけば、ボックスを入れるときに、選択するだけでボックスを入れることが出来ます。
登録数は増えないので、何か消さなくてはいけません。
まとめ
以上【THE THOR（ザ・トール）】で記事にボックスを追加する方法でした。
ただ、ボックス入れるだけなんですが、初心者の僕はとっても苦労したので同じように困ってる方がいると思い、記事にしました。
もっと詳しく丁寧に書かれているサイトがたくさんあるので、あんまり参考にならないかもしれませんが、初心者が初心者向けに書いていることに意味があると思います。
同じように苦労している方の参考になればいいと思います。
一緒にレベルアップしていきましょう。