記事クオリティーアップを図るため、コードをコピペして、テキストを差し替えるだけで装飾が可能なテキストコードを用意しました。
各自、適材適所で活用してください。

 

①斜線の罫線

DEMOテキスト

DEMOテキスト

DEMOテキスト

<p class="text_deco01">ここにテキストを入力する</p>
<p class="text_deco02">ここにテキストを入力する</p>
<p class="text_deco03">ここにテキストを入力する</p>

 

②おしゃれマーカー

おはようございます。DEMOテキストっていう感じ。 スパンで囲ってあげると、DEMOテキストって感じでおしゃれに。 ぜひ、DEMOテキストを使ってみてね。あ、フォントサイズは自分で変えてね。

<span class="text_keiko01">ここにテキストを入力する</span>
<span class="text_keiko02">ここにテキストを入力する</span>
<span class="text_keiko03">ここにテキストを入力する</span>

 

③リスト表示

リストを増やしたい場合は、「li」の部分を増やしてください。

  • ・DEMOリストパート1
  • ・DEMOリストパート2
  • ・DEMOリストパート3
  • ・DEMOリストパート4
  • ・DEMOリストパート5
  • ・DEMOリストパート6
<ul class="text_splist01">
<li>・ここにテキストを入力</li>
<li>・ここにテキストを入力</li>
</ul>
<ul class="text_splist02">
<li>・ここにテキストを入力</li>
<li>・ここにテキストを入力</li>
</ul>
<ul class="text_splist03">
<li>・ここにテキストを入力</li>
<li>・ここにテキストを入力</li>
</ul>

 

④半透明な罫線

DEMOテキスト

DEMOテキスト

DEMOテキスト

<p class="text_deco04">ここにテキストを入力する</p>
<p class="text_deco05">ここにテキストを入力する</p>
<p class="text_deco06">ここにテキストを入力する</p>

 

⑤しまゆき見出し改良版

DEMOテキスト

DEMOテキスト

DEMOテキスト

<p class="text_well01">ここにテキストを入力する</p>
<p class="text_well02">ここにテキストを入力する</p>
<p class="text_well03">ここにテキストを入力する</p>

 

⑥おしゃれ見出し

DEMOテキスト

DEMOテキスト

DEMOテキスト

<p class="text_deco07">ここにテキストを入力する</p>
<p class="text_deco08">ここにテキストを入力する</p>
<p class="text_deco09">ここにテキストを入力する</p>

 

⑦しまゆき見出し改良版2

DEMOテキスト

DEMOテキスト

DEMOテキスト

<p class="text_well04">ここにテキストを入力する</p>
<p class="text_well05">ここにテキストを入力する</p>
<p class="text_well06">ここにテキストを入力する</p>

◆お問い合わせ◆

LINE : @vfn2685i
注意「@」を必ず入れて検索して下さい。

メールアドレス
japan@kuvera-investment.com