プレビュー画面をリアルタイムに更新

 CSSコードを作成し、子テーマフォルダにアップしておくと、Elementorの編集エディター上にある詳細にCSSクラスを入れるだけで簡単にデザインを変更することができます。ここでは、テキストリンクを目立たせるCSSを紹介しています。

 使い方は他のCSSと同じように、CSSクラスのところに入れます。すると、このエリア内にあるリンクには以下のようなデザインが付きます。アフィリエイトや画像リンクなどがある場合は注意が必要です。

テキストリンクを目立たせよう

 テキストリンクは、本文中の単語にリンクを貼る場合に有効です。下の文のようにリンクの部分にアイコンやアンダーバーをつけたりすると目立ちます。

 なお、当サイトは 賢威 のテンプレートを使っています。

/*基本の設定 余白・サイズ*/

  1. [class*=”link0″] a{
  2. position: relative;
  3. padding:0.2em;
  4. left: 1.2em;
  5. font-weight: bold;
  6. margin-right: 25px;
  7. }
  8. [class*=”link0″] a:before {
  9. left: -1.2em;
  10. font-family: Fontawesome;
  11. margin-right: .6em;
  12. position: absolute;}
 

link01

 当サイトは 賢威 のテンプレートを使っています。

/*基本の設定 余白・サイズ*/

  1. .link01 a {border-bottom: dotted 3px #0080FF;}
  2. .link01 a:before {color: #0040FF; content: “\f0c5”;}
 

link02

 当サイトは 賢威 のテンプレートを使っています。

/*基本の設定 余白・サイズ*/

  1. .link02 a {border-bottom: dotted 3px #0080FF;}
  2. .link02 a:before {color: #0040FF; content: “\f14d”;}
 

link03

 当サイトは 賢威 のテンプレートを使っています。

/*基本の設定 余白・サイズ*/

  1. .link03 a {border-bottom: dotted 3px #FFBF00;}
  2. .link03 a:before {color: #088A08; content: “\f02c”;}
 

link04

 当サイトは 賢威 のテンプレートを使っています。

/*基本の設定 余白・サイズ*/

  1. .link04 a {border-bottom: dotted 3px #0080FF;}
  2. .link04 a:before {color: #0080FF; content: “\f164”;}
 

link05

 当サイトは 賢威 のテンプレートを使っています。

/*基本の設定 余白・サイズ*/

  1. .link05 a {border-bottom: dotted 3px #FA58AC;}
  2. .link05 a:before {color: #FA58AC; content: “\f004”;}
 

link06

 当サイトは 賢威 のテンプレートを使っています。

/*基本の設定 余白・サイズ*/

  1. .link06 a {border-bottom: dotted 3px #013ADF;}
  2. .link06 a:before {color: #013ADF; content: “\f0c1”;}
 

link07

 当サイトは 賢威 のテンプレートを使っています。

/*基本の設定 余白・サイズ*/

  1. .link07 a {border-bottom: dotted 3px #0080FF;}
  2. .link07 a:before {color: #0040FF; content: “\f35d”;}