Diviで代替テキストアンダースコアスタイルを適用する方法

公開: 2019-03-18

テキストの下線のスタイルは常にかなり制限されてきました。 Webでテキストに下線を引く最も一般的な方法は、CSSプロパティ「text-decoration：underline」を使用することです。 Diviでは、DiviBuilderモジュールの設定内でこのタイプの下線を配置してスタイルを設定することもできます。 ただし、この標準的な下線の方法には、スタイルとクロスブラウザのサポートに関して制限があります。

確かに、ほとんどの場合、下線付きのテキストは複雑である必要はありません。 たとえば、クリック可能であることを示すためにサイト上のすべてのリンクに下線を引くことは、必ずしも代替方法を必要としない標準的なアプリケーションです。 ただし、下線を次のレベルに引き上げたい場合は、この投稿が役立つ場合があります。

このチュートリアルでは、Diviのテキストに代替テキストアンダースコアスタイルを適用する方法について説明します。 テキストに下線を引くためのDiviの組み込みオプションを使用する標準的な方法を紹介します。 また、テキストに下線を引くための代替方法として下枠を使用する方法も示します。 下の境界線を使用すると、スタイルをより細かく制御できるだけでなく、すべてのブラウザーでサポートされます。

始めましょう。

テキスト装飾でテキストに下線を引く（一般的な方法）

テキストに下線を引く最も一般的で簡単な方法は、テキスト装飾CSSプロパティを使用することです。 実際、Diviを使用すると、モジュールの組み込みオプション内でこのメソッドを使用してテキストのスタイルを簡単に設定できます。 [テキストフォントスタイル]オプションを探し、[ U ]アイコンを選択して、下線付きのテキスト装飾を展開します。 下線フォントスタイルを選択すると、下線の色とスタイルをカスタマイズするオプションもあります。

スタイルに下線を引くテキスト

これにより、実際のテキストの色とは異なる下線の色を使用できます。

また、次のアンダースコアスタイルから選択できます。

  • 個体
  • ダブル
  • 点在
  • 破線
  • 波状

スタイルに下線を引くテキスト

本文内のリンクの下線スタイルをターゲットにすることもできます。 これにより、テキストモジュールを使用するときにデザインをより細かく制御できます。 テキストデザインカテゴリの切り替えの下にある[リンクフォント]タブを選択するだけです。 リンクフォントスタイルには、「下線」を選択します。 次に、それに応じてリンクの下線の色とスタイルをカスタマイズできます。

スタイルに下線を引くテキスト

テキスト装飾アンダースコアスタイルの制限

線の幅と位置を調整する機能が不足している

残念ながら、Diviの組み込み設定を使用してtext-decoration：underline cssプロパティを追加する場合、線の幅または線の位置を調整するオプションはありません。 行の幅はフォントサイズに関連しているため、フォントサイズを大きくすると線の幅が大きくなります。 また、アンダースコアの位置がベースラインにあるため、ディセンダー（ベースラインを下回る小文字）が線の邪魔になり、特にディセンダーが多い単語（「タイポグラフィ」など）で不整合が発生します。 。

スタイルに下線を引くテキスト

心配するディセンダーがないため、すべて大文字のテキストを使用している場合、この制限は問題にならない可能性があります。 下線の幅と下線の位置を調整するためのサポートがあればいいのですが、今のところ運が悪いです。

ブラウザのサポートが不足している

Internet Explorerはtext-decoration-styleまたはtext-decoration-colorプロパティをサポートしていないため、下線のスタイル（二重、点線、破線など）と下線の色をカスタマイズすることはできません。 Safariはtext-decoration-styleプロパティもサポートしていませんが、下線の色を変更できます。

このサポートの欠如はDiviに限定されません。 カスタムCSSでさえあなたを助けません。

下枠を使用してテキストに下線を引く

テキストスタイルに下線を引くための代替ソリューションを探している場合、私の意見では、下の境界線を使用するのが最善のオプションです。 これを行ういくつかの正当な理由があります：

  • 境界線は、下線のスタイルを設定するために、点線、破線、実線、二重、溝、尾根、はめ込み、およびはめ込みを含む8つの異なる境界線スタイルをサポートします。
  • フォントサイズに関係なく、境界線の幅（太さ）をカスタマイズできます。
  • 境界線をテキストに近づけたり遠ざけたりすることができます。
  • ボーダーに好きな色を追加できます。
  • ボーダースタイルはすべてのブラウザでサポートされています。

アンダースコアに下枠を使用する場合の制限

  • ブロック要素の1行のテキストに制限されます。 しかし、これを回避する方法があります（以下を参照）。
  • ディセンダーの下に完全に配置されており、正しい位置を取得するのは少し難しいです（ただし実行可能です）。

ブロック要素とインライン要素の違いを理解する

境界線の下線がどのように機能するかを理解するには、ブロック要素とインライン要素の違いを知る必要があります。

ブロック要素

ブロック要素は、（カスタム幅が設定されていない限り）コンテナの全幅に自動的に広がり、新しい行から始まります。 Webサイト（Diviで構築されたものを含む）はブロック要素でいっぱいです。

一般的なブロック要素の例は次のとおりです。

  • Diviセクション、行、モジュール（div）
  • 本文または段落（p）
  • 見出し（h1、h2、h3、h4、h5、h6）
  • リスト（ol、ul）

ブロック要素に下の境界線を追加すると、境界線はブロック全体の下に配置されます。 したがって、テキストの段落（p）または見出し（h1）が2行以上に分割されている場合、下の境界線はブロックの下部にのみ適用され、個々のテキスト行には適用されません。

これは、テキストが複数行に分割されたときに、h1見出しブロック要素に下の境界線を追加するとどのようになるかの例です。

スタイルに下線を引くテキスト

cssがh1タグをターゲットにしている場合でも、この行はブロック要素にのみ適用されます。 したがって、線は一番下にのみ適用され、各線に個別に適用されることはありません。

インライン要素

ブロック要素とは異なり、インライン要素は複数の行に分割できます。 したがって、インライン要素（リンクなど）に下の境界線を追加すると、リンクが新しい行に分割された場合でも、下の境界線の下線が適用されます。 また、本文テキストの行の高さに影響を与えることなく、インライン要素のパディングを調整できます。これは、下の境界線の下線を配置するのに最適です。

これは、下の境界線に下線が引かれているいくつかのリンク（デフォルトではインライン要素）の例です。

スタイルに下線を引くテキスト

簡単に言えば、インライン要素は複数の行に分割するときに下枠に下線を引くことができ、ブロック要素はできません。

1行のテキスト（ブロック要素）に下線の下線を追加する方法

これは、テキストモジュールの組み込み設定を使用して1行のテキストに下枠を追加する方法の例です。 このオプションは、テキストを1行に制限するため、ヘッダーに最適です。

1列の行で新しいセクションを作成します。 次に、次の内容のテキストモジュールを追加します。 

Underlining Typography

次に、テキストモジュールの設定を次のように更新します。

  • テキストテキストサイズ：46px（デスクトップ）、40px（タブレット）、26px（電話）
  • テキスト行の高さ：1.8em
  • 幅：517px（デスクトップ）、450px（タブレット）、293px（電話）
  • 下の境界線の幅：2px
  • 下の境界線の色：＃0c71c3
  • ボトムボーダースタイル：点線

スタイルに下線を引くテキスト

ご覧のとおり、境界線は幅、色、スタイルを使用してスタイルを設定できます。 下の境界線がモジュールに適用されているため、モジュールの幅をテキストの幅と同じに調整する必要があります。 したがって、それに応じてテキストサイズとモジュール幅を変更する必要があります。

行間で分割されるブロック要素（見出しなど）に下線の下線を追加する方法

前述のように、見出し（h1、h2、h3など）などのブロック要素では、各改行に下の境界線をインラインで適用することはできません。 これを回避するには、テキストをスパンタグでラップするだけです。 スパンを使用すると、インライン要素（テキストのグループなど）をグループ化して、それらの要素にスタイルを追加できます。 したがって、h1タグ（ブロック要素）の下の境界線が必要な場合は、追加のスパンタグを使用してh1タグ内のテキストを折り返すことができます。 次に、下の境界線の下線スタイルをスパンタグに追加できます。 これにより、別の行に分割された場合でも、h1タグテキスト（またはその一部）に下線を引くことができます。

これは、カスタムCSSを使用して複数行のテキストに分割されるブロック要素（見出しなど）に下の境界線を追加する方法の例です。

まず、1列の行を持つ新しいセクションを追加します。 次に、テキストモジュールを行に追加します。 コンテンツボックスで、デフォルトのモックテキストを次のように置き換えます。 

<h1><span>This is a Heading with Bottom Border Underlining Styled with a Span Tag</span></h1>

下の境界線の下線を追加するので、次のようにh1見出し行の高さを増やしましょう。

スタイルに下線を引くテキスト

次に、[詳細設定]タブで次のカスタムCSSIDを追加します。

CSS ID：border-underline

スタイルに下線を引くテキスト

次に、ページ設定モーダルを開き、次のカスタムCSSを追加します。 

.border-underline span {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
}

この下の境界線のスタイルは、スパンタグ内の要素に適用されています。 また、spanタグはインライン要素であるため、各行のテキストに下線が適用されます。

スタイルに下線を引くテキスト

border-bottomプロパティは、必要に応じてカスタマイズできます。 最初の値（2px）は、境界線の太さ（または幅）を設定します。 2番目の値（破線）は、境界線のスタイルを設定します。 次の境界線スタイルも使用できることを忘れないでください：破線、点線、二重、溝、尾根、はめ込み、およびはめ込み。 そして、3番目の値（＃0c71c3）は境界線の色を設定します。 また、テキストモジュールの組み込みオプションのテキスト行の高さの値と組み合わせてカスタムパディングcssを微調整して、間隔を適切に設定することもできます。

spanタグが不要で、h1タグ全体をインライン要素に変換する場合は、代わりにこのCSSをページ設定で使用できます。 

.border-underline h1 {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
display: inline;
}

このcssがh1タグをターゲットにしていることに注意してください。 下の境界線とパディングスタイルに加えて、「display：inline」は、h1タグをインライン要素に変更します。これにより、h1テキストに複数行の下線を付けることができます。

Diviのインラインリンクに下枠の下線を追加する

これは、カスタムCSSを使用してDiviのインラインリンクテキストに下枠を追加する方法の例です。 まず、1列の行で新しいセクションを作成し、その行にテキストモジュールを追加します。

次に、wysiwygエディターを使用して、本文テキストにいくつかのリンクを追加し、操作するリンクをいくつか用意します。

スタイルに下線を引くテキスト

次に、次のように[詳細設定]タブでカスタムCSSクラスを追加します。

CSSクラス：border-underline

スタイルに下線を引くテキスト

次に、ページ設定を開き、次のカスタムCSSを追加して、テキストモジュール内のすべてのリンクに下の境界線を適用します。 

.border-underline a {
border-bottom: 1px solid #333333;
padding: 0.1em 0;  
}

スタイルに下線を引くテキスト

border-bottomプロパティは、必要に応じてカスタマイズできます。 最初の値（1px）は、境界線の太さ（または幅）を設定します。 2番目の値（実線）は、境界線のスタイルを設定します。 次の境界線スタイルも使用できることを忘れないでください：破線、点線、二重、溝、尾根、はめ込み、およびはめ込み。 そして、3番目の値（＃333333）は境界線の色を設定します。

したがって、幅2pxで破線のスタイルで別の色の下枠の下線が必要な場合は、これらの値を次のように置き換えることができます。 

border-bottom: 2px dashed #0c71c3;

スタイルに下線を引くテキスト

パディング値を調整して、境界線の下線を垂直に配置することもできます。 したがって、テキストからさらに下の行が必要な場合は、パディング値を次のように増やすことができます。 

padding: 0.3em 0;

スタイルに下線を引くテキスト

このカスタムパディングをテキストモジュールの組み込みオプションのテキスト行の高さの値と組み合わせて使用​​して、間隔を適切に設定することもできます。

また、リンクはインライン要素であるため、境界線の下線は、行をまたがるリンクに残ります。

スタイルに下線を引くテキスト

仕切りはどうですか？

1行のテキスト（ブロック要素）に下線を引いて本当にクリエイティブにしたい場合は、いつでもDiviの仕切りモジュールを使用できます。 仕切りモジュールには、スタイル、高さ、幅、背景、境界線、ボックスシャドウなどの多くの組み込みオプションがあります。 仕切りを積み重ねて、さらにカスタムな外観にすることもできます。

これは、背景がグラデーションの二重線でテキストに下線を引くために使用される仕切りモジュールの簡単な例です。

テキストを含むテキストモジュールのすぐ下に仕切りモジュールを追加するだけです。 次に、以下を更新します。

  • 背景のグラデーションの左の色：＃2b87da
  • 背景のグラデーションの正しい色：＃29c4a9
  • グラデーションタイプ：線形
  • グラデーション方向：90度
  • 色：#ffffff
  • 仕切りの重量：2px
  • 高さ：2px
  • 幅：400px（これは上のテキストの幅に調整する必要があります）
  • カスタムパディング：上5px、下5px

スタイルに下線を引くテキスト

最終的な考え

このチュートリアルが、Diviでテキストアンダースコアスタイルを追加する代わりに役立つことを願っています。 「text-decoration：underline」を使用する一般的な方法は、はるかに簡単な解決策ですが、制限はドラッグになる可能性があります。 下の境界線の下線の方法では、線のスタイルと配置をもう少し制御できます。 また、カスタムCSSは間違いなく面倒ではなく、必要に応じて簡単に調整できます。 したがって、テキストの下線を次のレベルに引き上げたい場合は、これが役立つはずです。

いつものように、コメントであなたからの連絡を楽しみにしています。

乾杯！