文字装飾一覧ページサンプル | アフィリエイトでおうちママ☆初心者が在宅で稼ぐ方法

文字装飾一覧ページサンプル

本テンプレートで使用できる文字装飾一覧ページサンプルです!あくまでもサイト運営者に対するサンプルページですのでサイト公開時には「下書き」で保存しなおしてください^^

文字装飾一覧サンプル

文字の装飾はクラス指定で行います^^

例:<p class="ここに指定">テキスト</p>
例:<span class="ここに指定">テキスト</span>

Pタグは改行時にスペースが空きますので1行全てを装飾する場合に使用
文中の一部に装飾を行いたい場合はspanタグを使用すると良いですね^^

*そのままコピペで使用いただけます。

フォントサイズ

<p class="font-12"></p>

<p class="font-14"></p>

<p class="font-16"></p>

<p class="font-18"></p>

<p class="font-20"></p>

<p class="font-22"></p>

<p class="font-24"></p>

<p class="font-26"></p>

<p class="font-28"></p>

<p class="font-30"></p>

フォントカラー

<p class="light-brown"></p>

<p class="dark-brown"></p>

<p class="light-red"></p>

<p class="dark-red"></p>

<p class="light-pink"></p>

<p class="dark-pink"></p>

<p class="light-orange"></p>

<p class="dark-orange"></p>

<p class="light-green"></p>

<p class="dark-green"></p>

<p class="light-blue"></p>

<p class="dark-blue"></p>

<p class="light-purple"></p>

<p class="dark-purple"></p>

太文字

<p class="strong"></p>

蛍光ペン : 黄

テキストに背景色を付ける場合はPタグを使用するとその1行全てに反映される為<span>タグを使用

<span class="keikou"></span>

装飾を組み合わせる

フォントサイズとフォントカラーを組み合わせて使用する場合は半角スペースを入れる。

<p class="font-16 dark-purple"></p>

<p class="font-16 dark-blue"></p>

<p class="font-16 dark-purple strong"></p>

<p class="font-16 dark-blue strong"></p>

<span class="font-16 dark-purple strong keikou"></span>
<span class="font-16 dark-blue strong keikou"></span>

この記事と一緒に読まれている人気記事はこちら

もっと詳しく知りたい事や
理解できなかった事などございましたらお気軽にご連絡下さい。

お問い合わせはこちらからどうぞ

  • Yahoo!ブックマークに登録する
  • はてなブックマークに登録する
  • livedoorクリップに登録する
  • newsingブックマークに登録する
  • del.icio.usブックマークに登録する
  • ニフティクリップに登録する
  • RSSを購読する

次の記事 »
前の記事 »
トップページへ » アフィリエイトでおうちママ☆初心者が在宅で稼ぐ方法

この記事へのコメント

アフィリエイトでおうちママ☆初心者が在宅で稼ぐ方法 TOP » 未分類 » 文字装飾一覧ページサンプル

CSSレイアウト講座