おはようございます。山梨県でホームページ制作をしているY-DESIGNERの須山です。
この記事は全２回の記事中の後編になります。前編をまだ見ていない方は前編から見てみてください。
後編で仕上げです。
前編で見出しの文字の装飾をしましたので後編では下の線をデザインしていきます。
選択中の項目を変更
選択中の項目を展開し、一番下の項目から『::before』を選びます。
選べたらOKを押して選択中の項目を閉じます。
背景カラーを設定
なんで背景？って思った方もいらっしゃるかもしれませんが、文字の下にある緑色のラインは線ではなく、背景カラーなんです。
とりあえず、背景色のところが実際に表示されるアンダーバーの色になりますのでお好みの色にしてみてください。
今回はDressのデフォルトのグリーンにしてあります。
コンテントは””
高度な設定の中にあるコンテントを設定します。
『””』と入力しましょう。これは空のコンテンツを追加という意味ですが今回はあまり気にせずこういうふうにするんだレベルで考えてください。
残りの高度な設定
画像のように設定していきます。
上から順に以下の通りです。
- 表示 inline-block
- トランスフォーム translateX(-50%)
- 角丸 2px
- 幅 60px
- 高さ 5px
- ポジション absolute
- ボトム -15px
- レフト 50%
表示は前編と一緒ですね。
幅がアンダーバーの長さになります。今回は60pxにしていますが数値を変えれば長さも変更可能です。
また高さが線の太さになります。これも数値を変えて見た目の太さを変更可能です。
また角丸を設定していますのでアンダーバーに丸みもかかっています。
ポジション、ボトム、レフト、トランスフォームの箇所はタイトルの文字の中央下にアンダーバーを配置するための設定です。
完成
写真のような表示になっていれば完成です。Dressを保存して戻りましょう。
まとめ
今回の見出しのCSSコードはwebデザインに関するblog『サルワカ』さんを参考にさせていただいております。
一部こちらでCSSはプラスしましたが、大変参考になります。
他にも違う見出しのデザインを掲載してくれていますので参考にしてみてください。
今日はここまで。
BiNDの困った、お悩みはY-DESIGNERまで!!