WordPressのページビルダー系プラグインであるElementorについて、「スタイル設定」の、ごく基本的な使い方を解説します。
「WordPressとは何か？」については下記の記事も参考にしてください。
なお、この記事と同内容の動画もあります。あわせてご利用ください。
今回使っているソフトウェア等のバージョン情報です。使用するソフトウェアや、そのバージョンが異なる場合には、画面構成や挙動が異なる可能性があります。
- WordPress：Version 5.0.3–ja
- テーマ：Twenty Seventeen Version 2.0
- Elementor： Version 2.4.2
- ブラウザ：Google Chrome Version 71.0.3578.98
各ソフトウェアの最新バージョンは下記のリンクから確認してください。
1.スタイルタブを開く
今回は、前回の解説（見出しウィジェット入門編）で作った記事を使ってウィジェットの「スタイル」を設定していきます。
スタイルの設定では、ウィジェットの見た目や表示形式などについて、ウィジェットごとに設定することができます。
WordPressの管理画面から、前回作成したブログ記事をElementor編集画面で開きましょう。
まずは見出しウィジェットのスタイルを設定していきます。
「文鳥の魅力を語ろう」と書いた見出しウィジェットを選択し、画面左のサイドバー上部にある「スタイル」タブを開きます。
上の画像のように、「文字色」や「書体」など、選択した見出しウィジェットについて設定できるスタイルの項目が並んでいます。
2.文字の色を変更する
設定できるスタイルについて、順に見ていきます。
まずは文字の色を変更しましょう。
サイドバーのスタイルタブ内、「文字色」という表記の右にある、チェック模様の四角いボタンをクリックします。
すると、次の画像のように「カラーピッカー」が開き、好きな色を選択できるようになります。
ここでは、カラーピッカーの下部に並んでいるショートカットの中の右から3番め、濃いみどり色のボタンをクリックしてみます。
見出しの文字がみどり色になりました。
また、カラーピッカー本体にも鮮やかなグラデーションが表示されています。この中から欲しい色の部分をクリックすることで、その色を適用できます。
なお、カラーピッカー本体の右にある、縦に長い2本のバーですが、左側のバーで彩度を、右側のバーで透明度を変更することができます。
また、カラーピッカー本体の上にアルファベットと数字の羅列が表示されています。ここには現在適用している色の「カラーコード」が表示されています。
もし欲しい色のカラーコードが分かっている場合は、この欄に直接打ち込むことで素早く正確に色を指定することができます。
カラーコードは様々な方法で入手することができますが、以下にご紹介するツールを使うと便利でしょう。
3.文字の書体を変更する
色に続いて、文字のフォントやサイズなど、書体を変更してみましょう。
書体という表記の右にある鉛筆マークのボタンをクリックすると、次の画像のように書式の設定項目が表示されます。
たくさんありますが、焦らず一つずつ確認していきましょう。
フォントを変更する
まずは書式の設定項目の一番上にある「フォント」を変えてみます。
デフォルトと表記されているボタンをクリックすると、検索窓とドロップダウンリストが展開されます。
ドロップダウンリストの中には、使用可能なフォントが並んでいます。基礎的なアルファベット用のフォントに加えて、Googleフォントから好きなものを選択できるようになっています。
参考：Google Fonts
ただ、残念ながらリスト内のフォントはほとんどがアルファベット用です。
アルファベットの見出しをつくる場合は活用できますが、そうでない場合は選択肢が一気に狭くなります。
今回は、日本語に対応している数少ないフォントの中から”Noto Serif JP”を使ってみましょう。
検索窓に”noto”と入力すると、当てはまるフォントに絞り込まれます。
”Noto Serif JP”を見つけて、クリックします。
すると、上の画像のようにフォントが適用され、見出しが明朝体に変わりました。
文字のサイズを変更する
文字の大きさを変更してみましょう。
書体の設定項目の中に「サイズ」という表記があり、スライダーが用意されています。このスライダーを左右に操作することで、文字の大きさを自由に変更することができます。
また、スライダーの右に文字のサイズが数字で表記されている欄がありますが、こちらから直接サイズ指定を行うこともできます。
さらに、「パソコン」「タブレット」「スマートフォン」と、画面の大きさが異なる3つの端末について、文字の大きさをそれぞれの画面に最適になるように細かく設定することも可能です。
「サイズ」という表記の右にある、モニターのアイコンが描かれた灰色のボタンをクリックしてください。
灰色のボタンが3つに増えました。
左から「パソコン」「タブレット」「スマートフォン」に対応しています。
真ん中のタブレットボタンをクリックしてください。
上の画像のように、タブレットの画面サイズをシミュレートすることができます。
この状態でサイズのスライダーを操作するか、文字のサイズを数字で指定すると、タブレット画面用の文字サイズを設定できます。
上の画像ではタブレット用に、見出しの大きさを少し小さくしました。
スマートフォンも同様の操作で設定することができます。
文字の太さを変更する
文字の太さを変えることもできます。
「太さ」という表記の右側のボックスをクリックしましょう。
表示されたドップダウンリストの中には、”Normal”や”Bold”という単語だけではなく、100から900までの数字も並んでいます。
お使いのフォントによっては、ただ単に「普通（Normal）」や「太字（Bold）」と指定するのではなく、数字を使ってより詳細に太さを調整できる場合があり、Elementorはこれに対応しています。
今回は分かりやすく、”Bold”を選択して太字にしてみましょう。
上の画像のように、太字にすることができました。
文字を斜体にする
「スタイル」という項目では、文字をイタリックや斜体にすることができます。
文字に線を引く
「装飾」という項目では、文字に下線や取り消し線を引くことができます。
次の画像では下線を引いています。
行の高さを変える
文字の大きさを変え「行の高さ」だけを変えることができます。
「行の高さ」という表示の下にあるサイドバーを操作してみましょう。
上の画像では、文字の大きさが100pxあるのに対して、行の高さを50pxに指定してあります。
行の高さを文字の大きさが超えているため、行が重なって見えています。
字間を変える（カーニング）
文字と文字との間の幅を調整することも可能です。デザイン用語でカーニングと呼ばれる処理です。
「字間」という表示の下にあるサイドバーを操作することで調整することができます。
わずかな違いですが、個々の文字の間のスペースが狭くなり、少し詰まった印象になります。
注：このデモで使用しているWordPressテーマ「Twenty Seventeen Version 2.0」では、テーマのプログラムとElementorとが干渉してしまい、字間の設定が上手く動作しません。上の画像ではプログラムを修正して、字間を機能させています。
4.テキストシャドウで装飾する
サイドバーの「テキストシャドウ」の項目の右側にある鉛筆マークのボタンをクリックしましょう。
上の画像のように「テキストシャドウ」がオンになり、文字の周囲に薄い影ができています。
さらに、サイドバーではテキストシャドウの設定可能な項目がドロップダウンで出てきています。
「色」を変更することで、好きな色の影をつけることができます。デフォルトでは透明度を上げた黒になっているので、黒を濃くしてみましょう。
カラーピッカーの右側にある2本の縦に長いバーのうち、右側が透明度の指定です。上の画像では透明度を下げることで、黒が濃く表示されるようになりました。
また、影の位置をずらすことも可能です。サイドバーの「水平」「垂直」スライダーを操作することで、好きな位置に影を表示することができます。
なお、「ぼかし」は文字の影をどれだけくっきり表示するかを変更できる項目です。
ぼかしを弱くすると、もとのテキストそのものの影ができる一方、ぼかしを強くするとテキストとして判読できない、ぼんやりした影ができます。
5.テキストエディターのスタイル
ここまで見出しウィジェットのスタイル設定について確認してきました。
「スタイル」はウィジェットごとに異なる設定項目があります。
テキストエディターウィジェットのスタイル設定を見てみましょう。
「文鳥の魅力を語ろう」見出しの下になるテキストエディターを選択肢、サイドバーからスタイルタブを開いてください。
なお、次の画像では説明の都合上、テキストの内容をアルファベットにしています。
テキストエディターのスタイルでは、「配置」を設定することができ、確かに見出しウィジェットと異なる内容であることが分かります（見出しウィジェットでは「コンテンツ」タブの中に「配置」の設定項目がありました）。
とはいえ、テキストエディターも見出しウィジェットも、文字を扱うウィジェットであるため、スタイルの内容もほぼ同じです。
では、このテキストエディターを使って「書体」の「変換」という設定を操作してみましょう。
「変換」は入力されたアルファベットを自動的に大文字に変換したり小文字に変換したりして表示する設定です。
例えば、「変換」の右にあるボックスをクリックして表示されるドロップダウンリストの中から「大文字」を選択します。
すると、テキストがすべて大文字に変換されました。
以上、今回はスタイルの設定について学習しました。
今後、新しいウィジェットも続々登場しますが、スタイルの設定についてもあわせて解説していきますので、ご安心ください。
今回の解説はここまでです。
お疲れ様でした。