THE THORに備わっている記事パーツ（ラベル・ボックスなど）の編集機能（スタイルセット・カラーセット）の使い方と全設定を一覧にしてご紹介します。
・スタイルの使い方がわからない
・スタイルセットで何ができるか知りたい
・カラーセットで使える色を把握したい
・パーツを自分好みにカスタマイズしたい
という方はぜひ当記事を参考にしてください。
当記事を参考にすると
・スタイルの使い方が分かるようになる
・スタイルセットをのことが理解できるようになる
・カラーセットで使える色を把握できるようになる
・自分好みのパーツが自由自在に作れるようになる
そして
・ブログの表現の幅が広がる
・読者にとってより読みやすい記事が書けるようになる
・自分の伝えたい事が伝わりやすくなる
・書く事が楽しくなるのでさらにブログにのめり込む
となるはずです。
僕はこの記事を書きながら色々試しているうちに、いろんな発見がありました。
そして使い方を理解すればするほど嬉しくなってきて、楽しくなってきて、そしてワクワクしてきました。
なので皆さんも当記事を参考に色々試して、THE THORを使いこなして楽しんでください。
スタイルセット
スタイルセットとはパーツの細かい部分の仕様を変える事ができます。
投稿画面のツールバーにあるスタイルから使うことが出来ます。
これだけ項目があると自分の思い通りにカスタマイズできそうですね。
スタイルセットの解説
各メニューの簡単な説明をまとめました。
- サイズ系：パーツの幅の設定
- 内側余白形：パーツ内側の余白幅の設定
- 外側余白形：パーツ外側の余白幅の設定
- ボーダー系：ボーダーの線種と線幅の設定
- 文字系：パーツ内文字の表示スタイルの設定
- シャドウ系：パーツ内外とパーツ内文字に付ける影の設定
- 角丸系：パーツの角部分（面取り）の設定
- 背景系：パーツ内の背景パターンの設定
- ラベルパーツ専用：ラベル用のパーツの設定
- ボタンパーツ専用：ボタン用のパーツの設定
- ボックスパーツ専用：ボックス用のパーツの設定
サイズ系
サイズ系ではパーツ幅の設定を変えることが出来ます。
画面（記事幅）に対して何％の幅にするのかを指定できます。
例えば
角丸レッドラベル
をサイズ(100%)に指定すると
角丸レッドラベル(サイズ100%)
となります。
サイズ系の設定一覧
全サイズを比較してみましょう。
10%
２５％
４０％
５０％
６０％
７５％
９０％
１００％
いろいろ使い分けができそうですね。
幅を設定する際はスマホ表示での見え方も必ず確認してください！
特に１０％と２５％はパソコン表示ではいい感じに見えても、スマホ表示になると小さすぎて読みづらくなったりします。
スマホでの見え方も気にしながら設定しましょう。
内側余白系
パーツの内側の余白幅を設定します。
内側余白系の設定一覧
外側余白系
パーツの外側の余白幅を設定します。
例えば
角丸レッドラベル
の左右を 外側余白を（大） に設定すると、
角丸レッドラベルとなります。
外側余白系の設定一覧
全ての設定を比較してみましょう。
トップ・ライト・ボトム・レフト（０）
・左右：隙間なし
・上下：隙間なし
あベルあ
あ対象あ
あベルあ
トップ・ライト・ボトム・レフト（極小）
・左右：半角文字分ぐらい
・上下：半行分ぐらい
あベルあ
あ対象あ
あベルあ
トップ・ライト・ボトム・レフト（小）
・左右：全角１文字分ぐらい
・上下：１行分ぐらい
ル角ルあ
ル対象あ
ルベルあ
トップ・ライト・ボトム・レフト（中）
・左右：全角２文字分ぐらい
・上下：２行分ぐらい
ルベルル
ル対象ル
ルベル角
トップ・ライト・ボトム・レフト（大）
・左右：全角３文字分ぐらい
・上下：３行分ぐらい
ルベル丸
ル対象ル
ルベル角
ボーダー系
パーツにボーダー枠を付けたり、ボーダー部分の線種と線幅の設定をします。
例えば
角丸レッドラベル
にボーダー オール実線（細） を付けると
角丸レッドラベル
となります。
ボーダー系の設定一覧
比較してみましょう。
ボーダーオール実線（細）
ボーダーオール実線（中）
ボーダーオール破線（細）
ボーダーオール破線（中）
ボーダーオール点線（細）
ボーダーオール点線（中）
良い感じですね！
僕は実線のボーダーをよく使います！
文字系
パーツ内の文字の表示スタイルを設定します。
例えば
角丸レッドラベル
の文字を大きくしたり
角丸レッドラベル
アンダーラインを加えたり
角丸レッドラベル
することができます。
今回は、WordPressテーマ【THE THOR】で、記事本文で表示される文字色の設定を変える方法をご紹介します。 ケンノスケ コピペで簡単にできます！ 【THE THOR】で[…]
文字系の設定一覧
比較してみましょう。
シャドウ系
パーツに影を付ける事ができます。
例えば
角丸レッドラベル
にシャドウ系 ボックス外（ノーマル） を付けると
角丸レッドラベル
となります。
シャドウ系の設定一覧
比較してみましょう。
ボックス外（ライト）
ボックス外（ノーマル）
ボックス外（ダーク）
ボックス内（ライト）
ボックス内（ノーマル）
ボックス内（ダーク）
テキストシャドウ（ライト）
テキストシャドウ（ノーマル）
テキストシャドウ（ダーク）
立体的になって良い感じです！
シャドウ系は色々使えそうですね！
角丸系
パーツの角に丸みを付ける設定します。
例えば
ターコイズグラデ右寄せラベル
に 角丸(5px) を設定すると
ターコイズグラデ右寄せラベル
となります。
角丸系の設定一覧
比較しましょう。
角丸(5px)
角丸(10px)
ラウンド
背景系
パーツ内の背景パターンの設定が出来ます。
例えば
に背景系 グラデーション１ を設定すると
となります。
背景系の設定一覧
比較してみましょう。
グラデーション１（背景色：ブラック）
グラデーション１（背景色：ブライトレッド）
グラデーション１（背景色：ライトターコイズ）
グラデーション２（背景色：ブラック）
グラデーション２（背景色：ブライトレッド）
グラデーション２（背景色：ライトターコイズ）
方眼用紙（背景色：ホワイト）
方眼用紙（背景色：ブライトレッド）
方眼用紙（背景色：ライトイエロー）
グラデーションは淡い背景色だと分かりづらいので濃い背景色で使いましょう！
方眼用紙は濃い背景色ではほとんど見えないので淡い背景色で使うと良いですね！
ラベルパーツ専用
ラベルのみに適応される設定です。
例えば
角丸レッドラベル
にラベルパーツ専用 ラウンド（左） を設定すると
角丸レッドラベル
となります。
ラベルパーツ専用の設定一覧
比較してみましょう。
コーナータイトル（ボックス内）
ラウンド（右）
アイコン（余白）
アイコン（ボーダー）
アイコン（ボックス）
アイコン（サークル）
ボタンパーツ専用
ボタンのみに適応される設定です。
例えば
にボタンパーツ専用 立体 を設定すると
となります。
ボタンパーツ専用の設定一覧
比較してみましょう。
ボックスパーツ専用
ボックスのみに適応される設定です。
例えば
にボックス専用パーツ サブタイトル（ラウンド） を設定すると
となります。
ボックスパーツ専用の設定一覧
比較してみましょう。
カラーセットの解説
カラーセットではパーツの色を部分的に変える事ができます。
カラーセットも投稿画面のツールバーにあるスタイルから使えます。
こちらも簡単な説明をまとめました。
- 文字色：パーツ内の文字色の設定
- 背景色：パーツ内の背景色の設定
- ボーダー色：パーツのボーダー部分の線色の設定
カラーセットで使える色一覧
カラーセットで使える色は全部で９１色あります。
ヴィヴィッドトーン
イエロー
オレンジ
レッド
マゼンダ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム
ブライトトーン
イエロー
オレンジ
レッド
マゼンダ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム
ディープトーン
イエロー
オレンジ
レッド
マゼンダ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム
ライトトーン
イエロー
オレンジ
レッド
マゼンダ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム
ダルトーン
イエロー
オレンジ
レッド
マゼンダ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム
ベリーペールトーン
イエロー
オレンジ
レッド
マゼンダ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム
ダークグレイッシュトーン
イエロー
オレンジ
レッド
マゼンダ
ピンク
パープル
ネイビー
ブルー
スカイ
ターコイズ
グリーン
ライム
モノトーン
ホワイト
ベリーライトグレー
ライトグレー
グレー
ダークグレー
ベリーダークグレー
ブラック
まとめ：自分で色々試して使いこなしましょう！
沢山種類がありすぎて最初は迷って時間がかかると思います。
でもやっていくうちにだんだん自分の好みとかよく使うものがわかってくるはずなので、とにかく色々試してみてください。
これからもブログライフ・THE THORライフを楽しみましょう。