WordPressのテーマビルダープラグイン「Elementor」のファンブログ

【 ウィジェットマニュアル 】ヘッドライン(見出し)全設定項目解説!

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest
eyecatch_boy

ウィジェットマニュアル 「ヘッドライン(見出し)」

結構使用頻度が高い見出し。それだけに使いこなしたいウィジェットの1つです。記事のタイトルや、固定ページでの各コンテンツのタイトルなど、様々なところで利用します。時にはインパクトのあるキャッチコピーや、時には小さい注意書き、さらにはリンクボタンなんかにも?!ぜひマスターしてみて下さい。

【コンテンツ】

screenshot_contents

①タイトル
ここに表示させたいテキスト(文章を入力します)
残念ながら改行する事が出来ません。改行したい場合はHTMLコードの<br>を入れてあげると改行する事が出来ます。

②リンク
URLまたは既にあるページ名、記事のタイトルを入れるとサジェスト(候補が表示されます。また、入力欄の右にあるギアのアイコンをクリックする事でリンクにかんする設定が可能になります。
「新しいウィンドウで開く」チェックを入れると新しいタブが開きます
「Nofollow を追加」については、チェック無しで良いと思います。(話すと長くなるので・・・割愛致します。気になる方は調べて見て下さい)

③サイズ
簡易的なフォントサイズ(文字の大きさ)を設定出来ます。ただ、「スタイル」で詳しく設定も出来ます。こだわらなければここで設定しても良いかもしれません。

④HTML タグ
できれば設定した方が良いですが・・・とにかくサイトを作る!ページをデザインするんだ!という場合はスルーしても作れない事はありません。ただ、レベルアップする上でいつかはぶち当たる部分と思いますので、お時間に余裕がある方はこれを期に学習しても良いかもしれません。<HTMLタグの簡単な説明>ホームページを作る上でHTMLとCSSは重要なコードとなります。HTMLはざっくり言えば雑誌で言う原稿で、CSSはレイアウトなどを決めるデザインになります。原稿にあたるHTMLの書き方として、必ずタグから始まります。例えば「ここは見出しですよ」と書いてから見出しの文章を書くイメージです。そのタグはいくつも種類があります。
・h1〜h6:見出しのタグです。1〜6の数字は見出しの重要度
・div / span:グループ化出来る箱みたいなものです。
・p :「Paragraph」の略で段落を意味します。

⑤配置
1のタイトルで入力した文章を「右」「左」「中央」「均等」で移動させる事が出来ます。細かい移動は「詳細」のマージンやパディングで設定する事が出来ますので、ここでは大枠の配置を行います。ちなみに、スマートフォンやタブレットごとのデザインで設定を分ける事が可能な項目です。

 

【スタイル】

screenshot_style

①タイトル>文字色
カラーパレットで好き色の所を選択するか、または、#で始まるHTMLのカラーコードを入力する事で入力した文章の文字色を変更する事が出来ます。また、透明度もスライダーで設定する事が出来ます。

②タイトル>書体
・フォント:フォントを選ぶ事が出来ます。
(自分の好きなフォントを使う為にはPRO版のカスタムフォント機能で可能です)
・サイズ:文字のサイズを設定出来ます。
(スマホ、タブレットデザインによって設定を変えられます)
・太さ:文字の太さを選択出来ます。
(フォントによっては変化しない太さもあります)
・変換:アルファベットのみ有効みたいです。
・スタイル:文字を斜傾させたり、イタリックにしたい出来ます。
(フォントによっては変更しない場合もあり)
・装飾:下線や取り消し線などが設定出来ます。
・行の高さ:複数行の場合であれば行間を設定出来ます。
(1行の場合は余白が変化します)
・字間:文字の幅を調節出来ます。※何故か今は出来ません。

③タイトル>テキストシャドウ
・色:影の色を設定する事が出来ます。
・ぼかし:どれだけ影をぼかすかを調整出来ます。
・水平:影を横に移動する事が出来ます。
・垂直:影を縦に移動する事が出来ます。

④タイトル>ボタンモード
フォトショップなどの画像編集ソフトを使った事がある人なら馴染みがあるかと思いますが、「レイヤー効果」みたいなものです。この場合、背景に対しどの様な効果を付けるかを設定出来ます。

screenshot_mode

Normal(ノーマル)
Multiply(乗算)
Screen(スクリーン)
Overlay(オーバーレイ)
Darken(暗くする)
Lighten(明るくする)
Color Dodge(カラーダッヂ)
Saturation(彩度)
Color(色)
Luminosity(明度)

【詳 細】

screenshot_3

①詳細>マージン

②詳細>パディング
そもそもマージンとパディングって何?

screenshot_default
例えば、写真や文章(ウィジェット)に対し、赤い線画=枠線を境とした外側の余白と内側の余白をそれぞれマージンとパディングと言います。
例えばマージンを上下左右に100px余白を設定しみると・・・
screenshot_margin100
緑の部分(=つまりはウィジェットの外側)が100px余白が出来ました。次にパディングを上下左右100px世世余白を設定してみると・・・
screenshot_padding100
今度は黒の部分(=つまりはウィジェット内側)が100px余白が出来ます。マージンとパディングはデザインに大きく影響しますので、慣れておく事をおすすめします。また、このマージンとパディングはスマートフォンデザイン、タブレットデザインと個々に設定が可能です。

③詳細>Z-Index
ウィジェットなどの表示の優先順位を設定する項目です。
screenshot_zindex1
例えば、上の図の様に、Z-indexが1と2に設定された2つのウィジェットがあるとします。これをマージンなどで調整して重ねた場合どの様になるかみてみましょう。
screenshot_zindex2
Z-indexが大きい2のウィジェットが上に表示されました。0が一番下になり、設定数字の大きい順に手前に表示されます。ちなみに初期値は空欄となっており、この場合、下にあるウィジェットが上になるようです。
サイト制作の上でレイヤー感は見栄えが良くなると思いますので、マージンやパディングと合わせて慣れておくと良いかもしれません!

④詳細>開始アニメーション
ウィジェット(テキストや画像)が表示される際にアニメーション(動き)を付ける事が出来ます。詳細は下の動画をご覧下さい。
下記はアニメーションを選択すると表示される項目です。

・アニメーションの継続時間:
動きの時間を「遅い」「普通」「速い」の3段階で設定出来ます。
・アニメーションの遅延 (ms):動きの開始時間を遅らせる事が出来ます。単位がms=1000分の1秒で設定出来ます。ちなみに1000msは1秒なので、60000msは1分となります。さすがに1分はスルーされますね・・・(汗)

⑤詳細>CSS ID
CSS IDを設定する事が出来ます。
CSSについてはここでは触れません。

⑥詳細>CSS クラス
CSSクラスを設定する事が出来ます。
CSSについてはここでは触れません。


screenshot_background

⑦背景>普通・ホバー
「普通」は画面に表示する際の背景に対し、「ホバー」はカーソルがそのウィジェット範囲に入った時(カーソルがのっている状態)の背景となり、それぞれ背景を設定する事が出来ます。例えば、ボタンなどで良く見かけるのですが、マウスをボタンに乗せると色が変わったりするやつを想像して下さい。
(以下8〜9は普通・ホバー共通です)

⑧背景タイプ>クラシック
単色カラーの背景、または画像を設定出来ます。
・色:カラーパレットまたはHTMLカラーコードなどを使用して色を設定出来ます。また、透明度もスライダーで調節する事が出来ます。
・画像:画像を背景に指定する事が出来ます。ただし、画像を設定した場合は、色の設定は無効となります。
・位置:(画像を選択すると設定出来る項目)どこを起点に背景を設置するかを指定出来ます。
・添付:「デフォルト」「スクロール」「固定」の3種から選べます。
※スクロール(視差効果)はそのままでは機能しないみたいです。
※固定はデスクトップ上でのみ動作します。
・繰り返し:背景画像を連続して表示するか、しないかを選択出来ます。
・サイズ:背景画像の全体が見える様に縮小して配置するか、拡大して背景対象範囲をカバーするかなど設定出来ます。

⑨背景タイプ>グラデーション:2色を使ったグラデーション背景を設定出来ます。
・色:1色目の色を設定出来ます。
・場所:1色目の範囲割合を設定します。
・2つ目の色:2色目の色を設定出来ます。
・場所:2色目の範囲割合を設定します。
・タイプ:「線状」と「放射状」を選択出来ます。
(線状の場合)境界線の角度が設定出来ます。
(放射状の場合)放射の中心点の位置を選択する事が出来ます。


screenshot_boarder

⑩ボーダー
ウィジェットエリアに枠線を付ける事が出来ます。

⑪ボーダー>普通・ホバー
カーソルがウィジェット範囲に入ると枠線のデザインを変える事が出来る「ホバー」
(普通)通常表示時の枠線設定
(ホバー)カーソルがウィジェット範囲に入った場合、枠線設定

⑫ボーダー>ボーダータイプ
枠線のタイプを選べます。二重線や破線などがあります。
※以下は、ボーダータイプを選択した時のみ項目が表示されます。
・幅:枠線の太さを上下左右の枠線ごとに設定する事が出来ます。
・色:枠線の色を設定出来ます。
・ボーダーの丸み:枠の角を上下左右ごとに丸くする事が出来ます。

④ボーダー>ボックスシャドー
ウィジェット領域に対し、影を付ける事が出来ます。注意:テキストだけに影をつけたい場合は、スタイルのテキストシャドウで設定します。この場合は、ウィジェット範囲全体に影がつきます。

レスポンシブ

 

screenshot_responsive
ウィジェットを閲覧デバイス(デスクトップ、タブレット、モバイル)ごとに表示するか非表示にするかを設定出来ます。注意:編集モードの際には適用されません。確認する際はプレビューモードなどで確認しましょう。
ちなみに、上の設定の場合、モバイルでの閲覧時にのみ、このウィジェットが表示され、デスクトップやタブレットで見た場合は表示されません。

カスタムCSS ※PRO版のみ
CSSコードを追加する事が出来ます。その際、詳細の5と6を使うと安易に適応範囲の指定が出来ます。

まとめ

ウィジェットマニュアル 見出し編
ランディングページやサービス紹介ページなど、静的ページで大いに活躍してくれるウィジェットです!アイデア次第で素敵な見出しを作る事が可能となります。特にドロップシャドー設定やレイヤー(Z-index)感を出す事で、プロ顔負けの見出しになると思います。各設定やパラメーターをいじりながら納得のいく見出しデザインを作って下さい。

 

関連投稿

多くの人にElementorを知ってもらいたいので
\ SNSでシェアお願いします /
Share on facebook
Facebook
Share on twitter
Twitter

プロフィール

icon

 HTMLはなんとなく聞いた事があったけど、CSSって?っていうレベルの人間がこのElementorと出会い、ハマり、好きになってしまい・・・今や他社のサイト制作を受注するまでに至りました。
 プログラミングリテラシーがゼロのこの僕が、仕事でホームページ制作を請負うまでになり、今や個人事業主から中小企業まで年間のべ25〜30サイトの制作をElementorと共にやらせて頂いております。

自称:プロElementor
趣味:Elementor・デザイン・マーケティング

オススメ記事

もくじ

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。