HTMLタグで見る、ブログ記事本文の修飾方法

記事本文の装飾方法と言えば、強調したい文字の大きさや色を変えることですが、HTMLの基本的な知識を知っておけば、いろいろなパターンに利用できます。そこで今回は、HTMLのソースをと照らし合わせながら、各タグの関係性を解説してみたいと思います。

基本スタイル：
「仕分け人　妻に比べりゃ　まだ甘い」

文字の色を変える

「仕分け人　妻に比べりゃ　まだ甘い」

<font color="#ff6699">「仕分け人　妻に比べりゃ　まだ甘い」</font>

文字の色を変え、太字にする

「仕分け人　妻に比べりゃ　まだ甘い」

<font color="#ff6699"><strong>「仕分け人　妻に比べりゃ　まだ甘い」</strong></font>

文字の色を変え、下線も引く

「仕分け人　妻に比べりゃ　まだ甘い」

<font color="#ff6699"><u>「仕分け人　妻に比べりゃ　まだ甘い」</u></font>

文字の色を変え、太字にし、下線も引く

「仕分け人　妻に比べりゃ　まだ甘い」

<font color="#ff6699"><strong><u>「仕分け人　妻に比べりゃ　まだ甘い」</u></strong></font>

文字の色を変え、太字にし、下線を引き、大きくする

「仕分け人　妻に比べりゃ　まだ甘い」

<font color="#ff6699"><font size="2"><strong><u>「仕分け人　妻に比べりゃ　まだ甘い」</u></strong></font></font>

※タグ（font）が重複する際は、以下のようにまとめることもできます。

<font color="#ff6699" size="2"><strong><u>「仕分け人　妻に比べりゃ　まだ甘い」</u></strong></font>

ここまではすべて、アメブロの編集画面、上部にある装飾ボタンでできる方法です。
各ソースを見比べれば、装飾時に使用されるHTMLタグがなんとなく、分かると思います。
なお、ソースを表示させる際は、記事編集画面にあるタブを切り替えてください。

文字色……カラーパレット
太字…………「B」ボタン
下線…………「U」ボタン
大きさ………「文字サイズ」

文字色の数字や大きさの値を変えることで、色が変わったり、サイズが大きくなります

では、装飾方法とHTMLタグの関係性が分かったところで、他にどんなパターンがあるのか別の機会に改めて解説してみたいと思います。※以下の過去記事もご参考に…

参考記事：
「ブログ記事を彩る、これだけは押さえておきたいCSS属性」
「カスタマイズの基本！投稿エディタの種類と違いとは？」

以上、アメブロカスタマイズ＆ホームページ制作*Mydesignの*Copyselfでした。
アメブロカスタマイズ料金プラン＆過去の制作実績はコチラからご覧いただけます。

アメブロカスタマイズ*Mydesign