Diviで前後の疑似要素を使用して独自のデザインを作成する方法

公開: 2019-04-14

ウェブデザイナーとして、私たちは常に私たちが作成するウェブサイトに個性を加えるための新しい方法を探しています。 Diviは、ユニークなレイアウトを作成するための無限の機会を提供しますが、デザインをまとめるために含めることができる追加は常にほとんどありません。これは、CSS疑似要素が非常に役立つところです。

CSS疑似要素とは何ですか？

簡単に言うと、CSS疑似要素を使用して、要素の特定の部分のスタイルを設定できます。異なることを行う疑似要素には5つのタイプがあります。この投稿の目的のために、:: beforeと:: afterを見ていきます。

これらの2つの疑似要素は、要素のコンテンツの前後に何かを挿入するために使用されます。これは、既存の画像やテキストなどに視覚的な要素を追加するために使用できるため、特に便利です。

では、なぜこれらの疑似要素を使用するのでしょうか。前後は、要素やモジュールを追加することなく、設計の可能性を解き放つのに最適です。同様に、HTMLテンプレートやコアテーマファイルに触れることなく、要素を追加するのに役立ちます。

Diviで要素の前後をどのように使用しますか？

これまでのところ、これが少し混乱しているように聞こえても、心配しないでください。 CSSコードを最初から作成するときに:: beforeと:: afterを使用すると、次のようになります。

クラス「text-example」のテキスト行があるとします。この行のスタイルを設定してカスタマイズするCSSは次のようになります。

.text-example {*This is where you add the styles*}

:: beforeまたは:: after要素を追加してスタイルを設定する場合、CSSは次のようになります。

.text-example::before {*This is where you add before content and styles*}

.text-example::after {*This is where you add after content and styles*}

幸い、Diviを使用すると、:: beforeおよび:: after疑似要素に簡単にアクセスでき、煩わしさが大幅に軽減されます。実際、カスタムCSSコードを追加するためにモジュールの[詳細設定]タブを開いたことがあれば、私たちが参照している領域を見たことがあるでしょう。

これらのボックスは、既存のDiviモジュールの前後にコンテンツを追加およびカスタマイズするためのクイックショートカットを提供し、それらを利用して、非常に柔軟で興味深いデザインを作成できます。

スニークピーク

これは、このチュートリアルで作成するものです。

例1

例2

例3

入門

このチュートリアルでは、Diviテーマのコピーと白紙の状態が必要です。まず、新しいページを作成し、ページタイトルを追加した後、ビジュアルビルダーをクリックします。

これで、開始する準備が整いました。

例1：疑似要素を使用した番号付き宣伝文モジュール

宣伝文句は、おそらく最も柔軟なDiviモジュールの1つです。この例では、疑似要素を使用して各宣伝文の前に数字を追加し、段階的な「仕組み」セクションを作成します。また、プロセスを示すために右側に矢印の形を追加します。

作成するもの：

このデザインはどの宣伝文デザインでも機能しますが、Webエージェンシーレイアウトから宣伝文セクションを借用しました。これらを開始点として使用する場合は、新しいページを作成してフロントエンドビルダーにアクセスすることにより、Webエージェンシーランディングページにアクセスできます。

ページが読み込まれると、事前に作成されたレイアウト、保存されたレイアウトの1つを使用するか、最初から作成するかを選択できます。既成のレイアウトを選択し、検索バーを使用して「Webエージェンシー」レイアウトを見つけます。このチュートリアルの宣伝文のセクションは、ランディングページにあります。

ロードされると、事前に作成されたレイアウトとこの例の唯一の違いは、各宣伝文の背景、タイトル、テキストフォントの色を変更し、少しパディングを追加したことです。

1つの宣伝文でこれらの設定を変更したら、モジュールを右クリックし、「スタイルの拡張」を使用して他の3つに適用できます。

4つの宣伝文モジュールを希望どおりにカスタマイズしたので、コードを追加して番号付き要素を作成します。ただし、この設計を機能させるには、最初に1行のcssをメイン要素のカスタムcssボックスに追加する必要があります。

overflow: visible;

これにより、次の手順で作成する要素が、宣伝文句モジュールのエッジと重なる場所に表示されるようになります。

これが完了したら、モジュールオプションを開き、[詳細設定]タブに移動します。「前」ボックス内に、次のCSSスニペットを追加します。

content: '1.'; /* Adds the number 1. as before content */
font-weight: bold;
font-size: 80px;
opacity: 0.7; /* Makes the number slightly transparent */
color: blue; /* Changes the color of the number text */
position: absolute; 
z-index: 9999;
left: 0; /* Positions the content 0px away from the left border */
Top:-20px; /* Positions the content 20px above the top border */

このコードスニペットを追加すると、blurbモジュールの左上に番号が表示されます。「left：」と「top：」の行を変更するか、このCSSスニペット内の番号の色とフォントサイズを変更することで、番号の位置を修正できます。

最初のモジュールでこれを完了したら、3つの新しい宣伝文モジュールに移動し、「content：」行を次のように変更します。

内容： '2.';
内容： '3.';

…等々。

数値を並べ替えたので、矢印の形を作成するためにcssを少し追加する必要があります。

各モジュールを開き、カスタムCSS領域内の[後]ボックスにこれを入力します。

content: '';
display:block;
height:60px; /* Size of the shape */
width:60px; /* Size of the shape */
position:absolute;
top:40%;
right:-30px;
z-index: -1;
background-color: #e8e8e8; /* Colour of the shape */
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);

これで、4つの宣伝文は次のようになります。

例2.既存のモジュールに一意の形状を追加する

このデザインは、各テキストモジュール内の:: beforeおよび:: afterカスタムCSSボックスの両方に追加されるシンプルで効果的な小さなコードスニペットに依存しています。

ここで疑似要素を使用する利点は、ページに要素やモジュールを追加しなくても、既存のモジュールに一意の形状やオブジェクトを統合できることです。これらの疑似要素は既存のモジュールに含まれているため、デザインに余分なスペースを追加することはなく、すべてのデバイスで見栄えがします。

作成するもの：

初期レイアウトを作成するには、デフォルトの幅に設定された3列の行を持つ通常のセクションを追加する必要があります。これが完了したら、新しい列の1つにテキストモジュールを追加します。

繰り返しになりますが、このテキストモジュールのスタイルは自由に設定できますが、従う場合は、次の手順でこのデザインを実現できます。

テキストモジュールオプションを開き、必要に応じてテキストコンテンツと背景画像または背景色を追加します。上に透明なグラデーションがある通常の背景画像を使用しました。

次に、次の設計オプションを構成します。

1.上パディング：120px＆下パディング：120px

2.テキストの配置：中央とテキストの色：#ffffff

3.見出しの配置：中央と見出しの色：＃f5ee5d

これで、最初のテキストモジュールの視覚的な側面がすべて整ったので、CSSを追加して魔法を実現します。テキストモジュールの[詳細設定]タブで、[前]ボックスに次のコードを追加します。

content:'';
height: 30px; /* change the size to suit your design */
width: 30px; /* change the size to suit your design */
display: block;
position: absolute;
border-top: solid 3px #f5ee5d; /* change the colour to suit your design */
border-left: solid 3px #f5ee5d; /* change the colour to suit your design */
left: 20px; /* change the position to suit your design */
top: 20px; /* change the position to suit your design */

次に、次のコードを「後」ボックスに追加します。

content:'';
height: 30px; /* change the size to suit your design */
width: 30px; /* change the size to suit your design */
display: block;
position: absolute;
border-bottom: solid 3px #f5ee5d; /* change the colour to suit your design */
border-right: solid 3px #f5ee5d; /* change the colour to suit your design */
right: 20px; /* change the position to suit your design */
bottom: 20px; /* change the position to suit your design */

これらのコードスニペットをモジュールに追加すると、新しいシェイプが追加されたことがわかります。

このCSSが何をするのか疑問に思っているなら、それは実際には非常に簡単です。私たちが行っているのは、テキストモジュールの上部と左側（および下部と右側）から20px離れた位置にある透明な正方形を作成することだけです。次に、これらの正方形に2つの境界線を追加して、矢印効果を作成します。

この最初のテキストモジュールの外観に満足したら、それをコピーして貼り付けて他の列に入力し、テキストの内容、背景、スタイルを適切に変更します。

この方法の利点は、少しカスタマイズするだけで、ほとんどすべてのDiviモジュールで機能することです。もっと凝ったものにしたい場合は、CSSを追加して、:: before要素と:: after要素をさらに回転、傾斜、カスタマイズしてみてください。楽しむ！

例3.タブタイトルにアイコンと説明を追加する

このデザインでは、既存のコンテンツの前に画像アイコンを追加する機能と、以下の小さなテキストの説明を利用します。これは、Diviタブモジュールを通常よりも少しカスタマイズするのに最適です。

注– cssを介してコンテンツを追加することは設計には最適ですが、検索エンジンで簡単にインデックスを作成することはできません（ただし、Googleは実際にはCSSとJavascriptコンテンツのインデックスを作成しますが、現在ははるかに時間がかかり、信頼性がありません。BingやDuckDuckGoなどの検索エンジンはこのコンテンツにはまったくインデックスを付けません）。このため、コンテンツは最小限に抑える必要があり、ランキングの可能性に影響を与えるためにコンテンツに依存しないでください。

作成するもの：

まず、標準セクションと1列の行を追加し、次にDiviタブモジュール自体を追加する必要があります。タブモジュール内では、次の手順でスタイルを処理するため、各タブにタイトルとコンテンツを追加するだけで済みます。

コンテンツを配置したら、モジュールの:: before要素にコンテンツを追加し始める必要があります。上記の方法を使用して特定のタブにカスタムCSSを追加することはできないため、これを少し異なる方法で実行する必要があります。

タブモジュールオプションを開き、[詳細設定]タブ内で、モジュールに「ファンシータブ」クラスを指定します。

このCSSクラスを追加したら、少し準備をする必要があります。タブタイトルにいくつかのアイコンや画像を追加するには、明らかにこれらをWordPressに追加する必要があります。 WordPressダッシュボードの[メディア]タブに移動し、通常どおりに選択したアイコンをアップロードします。

画像をアップロードしたら、それぞれをクリックして、WordPressが生成したURLをコピーする必要があります。各画像に目を通し、これらのURLをコピーしてドキュメントまたは選択したメモアプリケーションに貼り付けます。

選択した画像のURLが手元にある状態で、WordPressダッシュボードのDiviメニュー内のDiviテーマオプションに移動します。

このページの下部に、独自のカスタムCSSを追加できるボックスが表示されます。このボックス内に、CSSコードを貼り付けます。

次のスニペットは、各タブタイトルの上に画像を追加します。このスニペットをコピーしてカスタムCSSボックスに貼り付け、アスタリスクの間（およびアスタリスクを含む）のコンテンツを前にメモしたURLに置き換えます（たとえば、*これを最初の画像のURLに置き換えます*）。

.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}

.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
 
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }

タブモジュールをオンにしてページに戻ると、各タイトルの上に画像が追加されていることがわかります。成功です。

では、説明を追加するのはどうですか？幸いなことに、これも非常に簡単です。カスタムCSSボックスにコピーしたコードのすぐ下に、以下を貼り付けます。

.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
 
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
 
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }

以前の画像と同様に、「これは説明です」を独自のコンテンツに置き換える必要があります。タブモジュールが表示されているページに戻ると、すばらしい説明が表示されます。

最後に、上記の完全な設計を実現するには、CSSをもう少し適用する必要があります。繰り返しますが、次のスニペットを同じカスタムCSSボックスにコピーします。

.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }

.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}

@media (max-width: 768px) {

.fancy-tabs .et_pb_tabs_controls li {
width: 100% !important;
}

.fancy-tabs .et_pb_tabs_controls {
padding: 0 !important;
}
}

このコードは、タブのテキストと画像を中央に配置し、モジュール全体をカバーするようにタブの幅を広げます。

また、すべてのデバイスでタブの見栄えを良くするために、CSSをいくつか追加しました。タブを全幅にしてモバイルでスタックしたくない場合は、元のCSSコードに戻ってメディアクエリで囲む必要があります。つまり、タブレットサイズ以上のデバイスでは説明とアイコンを追加しますが、小さいデバイスではDiviのデフォルトのスタイルに戻します。

これを行うには、以下の修正されたCSSコードをコピーして、DiviテーマオプションパネルのカスタムCSS領域に貼り付けます。

@media (min-width: 769px) {

.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}

.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
 
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }

.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
 
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
 
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }

.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
}

タブを追加する

この例では、2つの異なるタブを含むタブモジュールを作成しましたが、実際には、これ以上のものが必要になる場合があります。 2つ以上のタブを作成しようとしている場合は、追加したコードを修正する必要があります。

スニペットからわかるように、Diviは各タブタイトルにクラスを自動的に割り当てます。最初のクラスは0（.et_pb_tab_0）で始まり、毎回1ずつ増加します（.et_pb_tab_1、.et_pb_tab_2など）。最初の2つのタブはすでに処理しているので、さらに追加するときは、新しいタブごとにコードのセクションをコピーして貼り付けるだけです。

.fancy-tabs .et_pb_tab_0 a:before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
}

クラスの番号（.et_pb_tab_0）を2、3、4などに変更します。説明についても同じことを行う必要があります。

私たちが行う必要のある最後の修正は、CSSのもう1行を調整することです。タブの数を100で割ります。この数を書き留めて、カスタムCSSの次のセクションに移動します。

.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}

そして50％をあなたの答えと交換してください。これにより、タブがモジュールの幅全体に等間隔に配置されます。

たとえば、3番目のタブを作成する場合、必要な追加のCSSコードは次のようになります。

.fancy-tabs .et_pb_tabs_controls li {
width: 33% !important;
}

最後に

そして、CSS :: before要素と:: after要素を利用して新しいデザインの可能性を生み出す3つの優れた方法があります。このガイドが、将来の作品で疑似要素をどのように使用できるかを探求するきっかけになることを願っています。チャンスは本当に無限大です。