田舎暮らし＆北海道 移住 ネット起業 マツのブログ

文字装飾 htmlタグ＆CSSサンプル

サイトやブログをやってると、全部黒文字で強調や下線だけの装飾では、なかなか思うようなデザインのサイトは作れません。

自分でHTMLサイトをイチから起こすとか、WordPressやMTのテンプレを作る前段階として、やりたくなるのが文字装飾だと思います。他でもない私も、まずはそこから入って、今ではアフィリエイトに使う程度なら、HTMLやWordPress、MTは何でもできます。

そこで、HTMLとCSSのサンプルを紹介します。

実際に私が今使ってるタグです。自分の好みに作り替えて下さい。

文字装飾 HTMLタグ＆CSSソース サンプル

赤色
青色
緑色
黄色バック 太字

HTMLタグ
<span class="red">赤色</span>
<span class="bule">青色</span>
<span class="green">緑色</span>
<span class="line">黄色バック 太字</span>

CSSソース
.red {
color:#DB0000;
font-weight: bold;
font-size:15px;
}
.green {
color:#369B50;
font-weight: bold;
font-size:15px;
}
.bule {
color:#0080C0;
font-weight: bold;
font-size:15px;
}
.line {
background: #FFFF7D;
font-weight: bold;
font-size:15px;
}

IMEの単語登録に、タグを登録しておけば、すぐに使えますし、テキストファイルで上のCSSソースを保存して、テンプレートのCSSに追記すれば、ブログでもHTMLでも何でも使えます。今のところ、これが私にとって一番早い 文字装飾の手順です。