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

【投稿記事ページ作成】

ザ・トールのスタイル

ザ・トールの投稿ページの編集画面では専用の項目が表示されます。

このスタイルを使用することで簡単にボタンやボックスが作成できます。
やはりザ・トールの魅力の一つは手軽に凝ったレイアウトやデザインができるところです!

ここでは「スタイル」を使って以下のデザインができるので紹介させていただきます。

 

・マーカー
・ラベル
・ボタン
・ボックス
・ボックス内ボックス

マーカーの種類

ワードプレスのおすすめテーマ【THE THOR】ザ・トールの機能紹介マーカー
テキストに対してドラッグすることでマーキングを適用できます。
マーカーには太さと色の組み合わせができます。

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

 

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

 

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

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

 

 

ラベルの種類

ワードプレスのおすすめテーマ【THE THOR】ザ・トールの機能紹介ラベルテキストに対してラベルを適用します。

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

ボタンの種類

ワードプレスのおすすめテーマ【THE THOR】ザ・トールの機能紹介ボタン
ボタンを配置します。

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

ボックスの種類

ワードプレスのおすすめテーマ【THE THOR】ザ・トールの機能紹介ボックス
ボックスを配置します。

なおサブタイトルのテキストはサブタイトル編集で入力できます。

ワードプレスのおすすめテーマ【THE THOR】ザ・トールの機能紹介ボックスのサブタイトル

 

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

ザ・トールの機能の紹介
【BIG括弧ボックス】
ザ・トールの機能の紹介

 

【方眼ペーパーボックス】
ザ・トールの機能の紹介

 

【はてなボックス】
ザ・トールの機能の紹介

 

【ビックリボックス】
ザ・トールの機能の紹介

 

【Qボックス】
ザ・トールの機能の紹介

 

【Aボックス】
ザ・トールの機能の紹介

 

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

 

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

 

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

 

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

ワードプレスのおすすめテーマ【THE THOR】ザ・トールの機能紹介ボックス内ボックス
ボックスの中にさらにボックスを作ることもできます。
なおこちらは一部の紹介のみで全ての組み合わせは割愛させていただきます。

 

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

ザ・トールの機能の紹介

 

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

ザ・トールの機能の紹介

ザ・トールの機能の紹介

 

 

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

上でご紹介した通り、ザ・トールではある程度パーツの装飾ができることがわかっていただけたと思います。
ただ、デフォルトで用意されてるパーツ類だけでは「色が気にいらない」「自分でデザインしたい」という方もいるでしょう。

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

 

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

ワードプレスのおすすめテーマ【THE THOR】ザ・トールの機能紹介ボックスのカスタマイズ
任意のテキストを入力し「スタイル」から「デフォルトパーツ」の「ボックス」選択します。
ここでまず基準となるパーツの種類が決定されます。
ザ・トールに対して「今からボックスを新規に作ります!」と伝えたことになります。

 

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

ワードプレスのおすすめテーマ【THE THOR】ザ・トールの機能紹介ボックスのカスタマイズ

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

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

 

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

 

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

ザ・トールの機能の紹介

 

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

ザ・トールの機能の紹介

 

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

ザ・トールの機能の紹介

 

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

ザ・トールの機能の紹介

 

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

ザ・トールの機能の紹介

 

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

ザ・トールの機能の紹介

 

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

ザ・トールの機能の紹介

 

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

ザ・トールの機能の紹介

 

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

ザ・トールの機能の紹介

 

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

ザ・トールの機能の紹介

 

ザ・トールの機能の紹介

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

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

 

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

時間かけて作ったボタンやボックスなどのパーツはその後も使いたいと思うはずです。
もちろんザ・トールで作ったパーツは他の投稿記事にも流用できます。

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

 

<div class=”ep-box es-size75 bgc-Lsky es-radiusL es-borderSolidM es-shadowIn es-FbigL es-bold ftc-Vnavy brc-Vnavy”>ザ・トールの機能の紹介</div>

 

この<div class=”
以降に設定した全ての内容がふくまれていますので、ボックスを適用させたいテキストの前に
<divタグ全体>をコピペしてテキストの後方を</div>で囲えば簡単に流用できます。

 

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

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

 

ワードプレスのおすすめテーマ【THE THOR】ザ・トールの機能紹介ボックスの設定設定方法はザ・トールのカスタマイザーから【パーツスタイル設定→ボックス設定】を開きます。
※パーツスタイル設定にはマーカーやラベル、ボタンなども同様にあります。

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

<div class=”ep-box es-size75 bgc-Lsky es-radiusL es-borderSolidM es-shadowIn es-FbigL es-bold ftc-Vnavy brc-Vnavy“>ザ・トールの機能の紹介</div>

 

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

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

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

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

 

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

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

スポンサーリンク
>THE THOR(ザ・トール)はサイトアフィエイトの強い味方です

THE THOR(ザ・トール)はサイトアフィエイトの強い味方です

ザ・トールはデザイン性・機能性・利便性・SEO対策・収益面などあらゆる場面で力強いサポートをしてくれます。 一度公式ホームページをご覧ください。

CTR IMG