「スタイルセット」「カラーセット」を使って「スタイル」をアレンジしよう!【THE THOR(ザ・トール)】

「スタイルセット」「カラーセット」を使って「スタイル」をアレンジしよう!【THE THOR(ザ・トール)】Web解説

前回はTHE THOR(ザ・トール)の「スタイル」機能を使えば、文章にイロイロな装飾をつけることができる事を解説しました。

便利な「スタイル」機能ですが、「スタイルセット」や「カラーセット」を合わせて使うことで、さらに思い通りのデザインにすることができます!

 

THE THOR(ザ・トール)の「スタイルセット」で形を整えよう!

まずは「スタイルセット」について簡単に説明します。

「スタイルセット」では、主にデフォルト「スタイル」のを変えることができます。

「スタイルセット」で変えることができるパーツ例:

・ボックスの大きさ(サイズ系)
・枠線の種類(ボーダー系)
・文字の位置やサイズ(文字系)
・影をつける(シャドウ系)
       ・・・など

THE THOR(ザ・トール)の「カラーセット」で色をアレンジしよう!

カラーセット」は主にデフォルト「スタイル」のをアレンジできます。

「カラーセット」で変えることができる色の例:

・文字の色
・背景の色
・枠線の色(ボーダー色)

「スタイルセット」「カラーセット」を使ってオリジナルパーツを作ろう!

では実際に下の見本のようなオリジナルの「ボックス」を作る手順を解説します。

「スタイルセット」「カラーセット」を使ってオリジナルパーツを作ろう!

 

土台となる「ボックス」を選ぼう!

まずは土台となるボックスを作ります。

ここは前回の復習です!

ボックスにしたいテキストを選択し、メニューの「スタイル」からイメージに近いボックスを選びます。

土台となるボックスを選ぼう!

テキストを選択したら・・・

土台ボックスを選択

メニューの「スタイル」からイメージに近いボックスを選びます。

今回は土台にするボックスとして、「はてなボックス」を選択しました。

これでデフォルトの「ボックス」が作成されました!

デフォルトのはてなボックス

今回は、この「はてなボックス」をアレンジしていきます!

 

「カラーセット」で色を変えよう!

それでは「カラーセット」で色をアレンジしていきます。

まずは文字の色を変えていきます。

ボックス内のテキストが選択された状態で、「スタイル」から「カラーセット」を選択し、更に「文字色」を選択します。

※ボックス内のテキストが選択しにくい時は、テキストの上でダブルクリックやトリプルクリックしてみてください。

文字色を選択

 

さらに文字色のカテゴリーを選び、色の一覧から好きなをクリックします。

今回は「モノトーン」から「ホワイト」を選択してみます。

文字色をホワイトに変更

 

これで文字の色を変えることができました!

文字色をホワイトに変更後

 

続いて、同じように「カラーセット」から「背景色」や「枠線の色(ボーダー色)」を変えていきます。

このときのポイントとして、「背景色」等はデフォルトで色がついていることがあるので、まずはデフォルトの色を解除するところから始めます。

 

それでは、「背景色」を変えてみます。

先程と同じように、「カラーセット」から「背景色」へと進みます。

この時に、デフォルトで選択されている色がある場合は、その色をクリックして解除しておきます。

(「はてなボックス」の場合は、デフォルトでホワイトが選択されているため、「ホワイト」をクリックして選択を解除しておきます。)

デフォルトではホワイトが選択

 

デフォルトの色を解除したら、再び「背景色」から好きな色を選びます。

背景色をマゼンタに変更

 

ボックスの「背景色」を変えることができました!

背景がマゼンタのボックス

 

枠線の色(「ボーダー色」)についても見てみましょう。

「カラーセット」から「ボーダー色」へと進み、デフォルトで選択されている色がないか見ていきます。

デフォルトボーダー色はブルー

 

デフォルトで「ブルー」が選択されていることが分かりました。

今回はこのブルーのまま使いますが、変更するしたい場合は「ブルー」をクリックして一度解除してから好きな色を選んでください。

「スタイルカラー」を選ぶ時の注意点

※色をクリックしても変わらない場合は、複数の色が選択されている可能性があります

他の色が選択されていないか探して、不要な色をクリックして解除しておきましょう!

 

「スタイルセット」で形や装飾をアレンジする

次に「スタイルセット」でボックスの形を変えてみます。

まずはボックスの「大きさ」を変えてみます!

ボックス内のテキストが選択された状態で、「スタイルセット」から「サイズ系」へと進み好きな大きさを選択します。

ボックスの大きさを変更

 

ボックスの大きさが変わりました!(画像は50%選択時)

ボックスの大きさが変更された

 

次に、よく使う枠線の種類(「ボーダー系」)を変更してみます。

「スタイルセット」から「ボーダー系」へと進み、好きな枠線の種類を選択します。

破線を選択

 

今回は「オール破線(中)」を選択してみました。

オール破線(中)ボックス

 

オール○○」という枠線はボックスの四面全体を変更します。

ボックスの下の線を変えたいときは「ボトム〇〇」、左側を変えたいときには「レフト○○」というように使い分けてみて下さい。

 

次に、文字をアレンジしていきます。

「スタイルセット」から「文字系」へと進み、文字の位置文字の大きさを選択してみて下さい。

文字系を変更

 

試しに文字を「中央寄せ」して、サイズを「大きく」してみます。

文字位置サイズを変更

 

文字位置やサイズが変わりました

文字変更後

 

続いて、よく使う「シャドウ系」を選択してみます。

「シャドウ系」はボックス等に影を付ける効果があり、立体的に見せることができます。

シャドウ系を選択

 

ボックスに影(シャドウ)が付きました。(少し分かりにくいですが)

ボックスに影がつきました

個人的には「シャドウ系」は「ボックス外○○」をよく使用します!

 

次に解説するのは「丸角系」です。

ボックスに丸みを持たせることができ、柔らかい印象となります。

「スタイルセット」から「丸角系」へと進み、丸み度合いを選択します。

ちなみに、選択肢の下に行くほど丸みが大きくなります。

丸角系を選択

 

ボックスの角に丸みを持たせることができました!

ボックスを丸く

 

さらに、背景にもアレンジを加えてみましょう。

「スタイルセット」から「背景系」へと進むと背景をアレンジできます。

背景系を変更

 

グラデーションにしてみました!

グラデーションボックス

 

最後に、「ボックスパーツ専用」を見てみましょう!

ここにはボックスに使用できるイロイロな効果が入っています。

今回はデフォルトで「はてなマーク」が選択されていました。

はてなマークはデフォルト

 

この「ボックスパーツ専用」を少し使って、はてなマークの位置を変えてみたいと思います。

「スタイルセット」から「ボックスパーツ専用」へと進み、「アイコン(コーナー)」を選択します。

アイコン(コーナー)を選択

 

はてなアイコンがコーナーに移動しました!

アイコンがコーナーに移動

 

最後にボックス内のテキストの選択を解除してみると、完成したオリジナルのボックスとなります。

ボックスの完成

 

【THE THOR(ザ・トール)】「スタイルセット」「カラーセット」まとめ

今回は、【THE THOR(ザ・トール)】の「スタイル」アレンジについて解説しました!

「スタイルセット」はとても奥が深く、少し練習が必要になるかもしれませんが、使いこなせれば表現の幅を広げることができるでしょう。

また、選択しても上手く変わらないときは、同じ種類の装飾が複数入っていないかを確認してみて下さい

最後まで読んでいただきありがとうございました!

 

 

 

タイトルとURLをコピーしました