WordPressテーマの「THOR」を使ってかっこいいサイトを作りたい！スタイルのデフォルトパーツのボーダーってどんな種類があるの？どんな表現になるのか教えて！
そんな悩みを解決します。
本記事ではWordPressテーマ「THOR」の機能である、スタイルセットのボーダー系を一覧で紹介しています。
設定方法も解説しているので初心者の方もぜひ参考にしてみてください。
・ボーダー系の種類一覧
・使い方例
・使い方例
スポンサーリンク
ボーダーの種類
スタイルセットで用意されているボーダーの種類は18種です。
・すべて囲む線
・下線のみ
・左線のみ
・下線のみ
・左線のみ
さらに線が「実線」「破線」「点線」の（細）と（中）から選ぶことが出来ます。
すべて囲む線
オール実線（細）
オール実線（中）
オール破線（細）
オール破線（中）
オール点線（細）
オール点線（中）
下線のみ
ボトム実線（細）
ボトム実線（中）
ボトム破線（細）
ボトム破線（中）
ボトム点線（細）
ボトム点線（中）
左線のみ
レフト実線（細）
レフトボトム実線（中）
レフト破線（細）
レフト破線（中）
レフト点線（細）
レフト点線（中）
ボーダーの使い方
ボーダーの種類は18種類ですが、背景や線の色を変えることで雰囲気がガラッと変わります。
ご自身のサイトの配色に合わせてカラーも変更してみてくださいね。
ボックスを例に表現してますが、ラベルやボタンでも同じように設定できます。
POP系
背景：ベリーペールトーンイエロー ボーダー：オール点線（中）/カラー：ブライトトーンイエロー
背景：ライトトーンイエロー ボーダー：オール実線（中）/カラー：ヴィヴィットトーンマゼンタ
背景：ベリーペールトーンターコイズ ボーダー：ボトム破線（中）/カラー：ブライトトーンイエロー
クール系
背景：ベリーペールトーンスカイ ボーダー：レフト実線（中）/カラー：ダークグレイッシュトーンスカイ
背景：ディープトーンブルー ボーダー：レフト破線（中）/カラー：ライトトーングリーン
背景：ベリーペールトーンネイビー ボーダー：オール点線（中）/カラー：ディープトーンネイビー
可愛い系
背景：ベリーペールトーンピンク ボーダー：オール破線（中）/カラー：ライトトーンピンク
背景：ベリーペールトーンオレンジ ボーダー：オール点線（中）/カラー：ヴィヴィットマゼンタ
背景：ベリーペールトーンイエロー ボーダー：ボトム破線（中）/カラー：ライトトーンマゼンタ
ボーダーの設定方法
ボーダーの設定は「スタイル」から「スタイルセット」＞「ボーダー系」から選択できます。
設定の順番によって反映されたりされなかったりすることがあるので、
以下の順番に設定するとバグもありません。
①デフォルトパーツを選ぶ
②文字を入力する
③ボーダーの種類を選ぶ
④ボーダーの色を選ぶ
⑤デフォルトパーツの色を選ぶ
②文字を入力する
③ボーダーの種類を選ぶ
④ボーダーの色を選ぶ
⑤デフォルトパーツの色を選ぶ
もし上手く反映できなくなったら、一から作り直した方が早いのでコツを掴んで設定してみてくださいね。
最後までお読みいただきありがとうございました。
