マーカー/ラベル/ボタン/ボックスなどのパーツスタイル

ザ・トールがインストールされていれば投稿ページの編集画面で専用の項目が表示されます。

記事の見出しのデザインだけではなく、
こちらの「スタイル」を使用することでマーカー、ラベル、ボタン、ボックスなどの各パーツもお好みのデザインを選択するだけで簡単に記事に反映させることができ、さらにカスタマイザーに自分で作成されたデザイン（組み合わせ）を登録することも可能です。

やはりザ・トールの魅力の一つは手軽に凝ったレイアウトやデザインを簡単にができるところです！

パーツスタイルの設定方法

【管理画面→投稿記事ページ作成時】

スタイルでは以下のパーツを作成できます。

マーカーの種類

マーカーはテキストに対して適用したい箇所をドラッグすることでマーキングできます。
このマーカーには太さと色の組み合わせが設定が可能です。

【太・レッド】
ザ・トールの機能の紹介

【中・ブルー】
ザ・トールの機能の紹介

【細・イエロー】
ザ・トールの機能の紹介

※その他の色は割愛いたします。

ラベルの種類

ラベルは適用したいテキストをドラッグすることで作成できます。

【角丸レッドラベル】
ザ・トールの機能の紹介

【シンプルボーダーライン】
ザ・トールの機能の紹介

【ライム左ラウンドラベル】
ザ・トールの機能の紹介

【ブルーボーダーラウンドラベル】
ザ・トールの機能の紹介

【丸アイコンオレンジラベル】
ザ・トールの機能の紹介

【ピンクアイコンラベル】
ザ・トールの機能の紹介

【四角アイコンラベル】
ザ・トールの機能の紹介

【破線ボーダーアイコンラベル】
ザ・トールの機能の紹介

【ビッグ右ブルーラウンドラベル】
ザ・トールの機能の紹介

【ターコイズグラデ右寄せラベル】
ザ・トールの機能の紹介

ボタンの種類

ボタンは適用したいテキストをドラッグすることで作成できます。

【オレンジ100%ボタン】
ザ・トールの機能の紹介

【グリーンシャドウ100%ボタン】
ザ・トールの機能の紹介

【ブルーボーダーボタン】
ザ・トールの機能の紹介

【ブルーグラデボタン】
ザ・トールの機能の紹介

【ピンクアイコンボタン】
ザ・トールの機能の紹介

【ピンググラデアイコンボタン】
ザ・トールの機能の紹介

【グリーン立体アイコンボタン】
ザ・トールの機能の紹介

【グレーラウンドアイコンボタン】
ザ・トールの機能の紹介

【サークルアイコンボタン】
ザ・トールの機能の紹介

【ボックスアイコンボタン】
ザ・トールの機能の紹介

ボックスの種類

ボックスは中に入れたいテキストをドラッグすることで作成できます。

【サブタイトルボーダーボックス】

なおサブタイトルのテキストは「スタイル」と同じ列にある「サブタイトル編集」で入力できます。

また「テキストエディター」に切り替えて直接以下のコードの●にタイトルを入れる事でも反映できます。

ボックス内ボックスの種類

ボックス内ボックスでは、ボックスの中にさらにボックスを作ることもできます。

なおこちらは一部の紹介のみで全ての組み合わせは割愛させていただきます。

【サブタイトルボーダーボックスを配置後、中にアイコンボーダータイトルを配置】

【方眼ペーパーボックスを配置後、中にはてなボックスを配置】

このようにパーツスタイルでは何通りも色々な組み合わせができるのであなただけのオリジナルの表現ができます！

ラベル・ボタン・ボックス・ボックス内ボックスのカスタマイズ

上でご紹介した通り、ザ・トールではある程度パーツの装飾ができることがわかっていただけたと思います。

ただ、デフォルトで用意されてるパーツ類だけでは「色が気にいらない」「一部を変更したい」という方もいるかと思います。

「ラベル」「ボタン」「ボックス」「ボックス内ボックス」の各パーツはどれもご自身でパターンを作成することが可能です。
とくに難しい操作はなく、同様にメニューからお好みのものを選択するだけです。

ここではボックスを例にご紹介させていただきます。

任意のテキストを入力し「スタイル」から「デフォルトパーツ」の「ボックス」選択します。
ここでまず基準となるパーツの種類が決定されます。

ザ・トールに対して「今からボックスを新規に作ります！」と伝えたことになります。

【注意】
新規デザインの設定に関しては、一度選択した設定は残っています。
※選択された項目には黒い縦線が表示されます。

これから設定する「スタイルセット」や「カラーセット」も複数選んだ場合、選んだ数の分同時に適用されるのでごちゃごちゃになってしまう可能性があります。

もし選択したものの結果が気に入らなかったらもう一度同じものを選択して適用をはずすか
[CTRL+Z]のショートカットで一つ前の操作に戻ってやり直すことをおすすめします。

それでは始めます。
設定は一度ではなく一つ一つ適用させて画面で結果を確認した方が進めやすいです。
選択しても効果が反映されない場合は、ボックス内にカーソルを置いたり文字などをドラッグする必要があります。

【デフォルトパーツ→ボックスを適用】（これで新規ボックスのスタートとなります）

【スタイルセット→サイズ系→サイズ（75%）を適用】

【カラーセット→背景色→ライトトーン→スカイを適用】

【スタイルセット→角丸系→角丸（10px）を適用】

【スタイルセット→ボーダー系→オール実線（中）を適用】

【スタイルセット→シャドウ系→ボックス内（ノーマル）を適用】

【スタイルセット→文字系→サイズ（極大）を適用】

【スタイルセット→文字系→太字を適用】

【カラーセット→文字色→ヴィヴィッドトーン→ネイビーを適用】

【カラーセット→ボーダー色→ヴィヴィッドトーン→ネイビーを適用】

簡単にではありますがボックスが完成しました！

ボックスなのにシャドウの内側を入れた為、立体感が出てボタンみたいになってしまいましたが、、、
あくまで操作の手順をご案内するのを優先したのでデザイン面に関してはつっこまないでください（苦笑）。

このように一つ一つ効果を適用させていけば簡単にできます。
時間をかけてあななだけのオリジナルのパーツを作成してみましょう！

作成したパーツの流用・登録方法

前の操作のように時間かけて作ったボタンやボックスなどのパーツを作成した場合、
毎回作成するのも面倒なのでパターンとしてはその後も使いたいと思うはずです。

もちろん作ったパーツのパターンはザ・トールの他の記事に流用することができます。

一つの方法はワードプレス投稿画面の「ビジュアル」から「テキスト」エディターに切り替えてコードを表示させます。
例として先ほど作成したボックスのコードは以下のように記載されています。

この赤い部分のコードに設定した全ての内容がふくまれています。

もし他の記事で同じデザインを使用したい場合は
<div class=” ～</div>までコード全てをコピーし、変えたいテキストだけ入力し直すことです。

もう一つの方法はザ・トールのカスタマイザーに登録することです。

こちらは既存の物を入れ替える形になるので作成したコードを登録すれば、スタイルメニュー内も登録したパーツに入れ替わるのですぐに選択できるようになります。

設定方法はザ・トールのカスタマイザーから【パーツスタイル設定→ボックス設定】を開きます。
※パーツスタイル設定にはマーカーやラベル、ボタンなども同様にあります。

ここで作成したボックスのタイトルとスタイルを登録できます。
貼り付けるスタイルは先ほどのコードの’’（ダブルコーテーション）内の設定した部分です。

ただ、カスタマイザーへの登録は私のようにデフォルトを消したくない方にはおすすめしません。

それにボックスなど登録できるのは一パーツ10個までですし、いちいちカスタマイザーを開いて登録するのも面倒です。

ワードプレスを使って記事を作成されてる方はコピペなんて日常茶飯事で得意だと思いますので
最初にお伝えしたように作成した＜divタグ＞のコピペの方が早くておすすめです。

デスクトップのテキストなどにいくつか作ったコードのパターンを保存しておけば手間がかかりません。

以上がパーツスタイルの設定になります。

本当にこのスタイルの設定は何通りもあるので凝れば凝るほど色々なデザインが楽しめると思います。
最初は抵抗があるかもしれませんが、何度も何度も試して使いこなしてサイトやブログのデザインに役立ててください！