2012年10月29日
投稿記事の一行にスタイルを設定する
CSS（Cascading Style Sheet、以下スタイルと呼びます）を一行に設定する方法を紹介します。
ご存知の方も多いことでしょう。
ここではスタイルの設定をよく知らない人向けに紹介していますのでご了承ください
スタイルシートを設定すると様々なページでスタイルの書式を読み込むことができてとても便利です。
ファンブログでも 「 スタイルの編集 」 での設定は可能ですが、ここでは割愛します。
投稿記事は、 htmlタグ の設定が可能です。
記事のデザイン上、1行だけスタイルを設定したいという場面があります。
弥太郎の場合は、以下のスタイルをよく使うのでそれをベースに解説します。
（スタイル例）
<p style="text-align:left; color:#DC143C; font-size:20pt; font-weight:normal; margin-top:2px; margin-bottom:10px; padding-left:60px; padding-right:0px">
気のみ気のままなブログ
</p>
（表示例）
このスタイル例では、
<p> </p>
の間に挟んだ文字に対してスタイルが適用されます。
ひとつひとつスタイルの説明しますと、
text-align:right;
は、左寄せ（text-align:left;）、中央（text-align:center;）、右寄せ（text-align:right;）の設定となります。
color:#DC143C;
は、文字の色を指定します。
16進法のカラー設定か、カラーネームで設定します。
詳しくは、 Htmlタグ辞典 を参考にしてください。
font-size:20pt;
は、文字のサイズの設定です。
数字を入れ替えて大きさを確認してみてください。
font-weight:normal;
は、文字の太さを指定します。
通常は、 normal か bold を指定しますが、100〜900の範囲でも指定ができます。
margin-top:2px;
は、一行上のマージンを指定します。
指定すると行の上部に空白スペースの調整ができます。
margin-bottom:10px;
は、一行下のマージンを指定します。
指定すると行の下部に空白スペースの調整ができます。
padding-left:60px;
は、一行の左側に空白スペースの調整ができます。
padding-right:0px
は、一行の右側に空白スペースの調整ができます。
細かく述べようとするとまだあるのですが、
これだけでもスタイルとしては十分に使えますのでここまでの解説とします。
記事の投稿後に表示の確認をしてみてください。
上手く表示されているでしょうか？
ご存知の方も多いことでしょう。
ここではスタイルの設定をよく知らない人向けに紹介していますのでご了承ください
スタイルシートを設定すると様々なページでスタイルの書式を読み込むことができてとても便利です。
ファンブログでも 「 スタイルの編集 」 での設定は可能ですが、ここでは割愛します。
投稿記事は、 htmlタグ の設定が可能です。
記事のデザイン上、1行だけスタイルを設定したいという場面があります。
弥太郎の場合は、以下のスタイルをよく使うのでそれをベースに解説します。
（スタイル例）
<p style="text-align:left; color:#DC143C; font-size:20pt; font-weight:normal; margin-top:2px; margin-bottom:10px; padding-left:60px; padding-right:0px">
気のみ気のままなブログ
</p>
（表示例）
気のみ気のままなブログ
このスタイル例では、
<p> </p>
の間に挟んだ文字に対してスタイルが適用されます。
ひとつひとつスタイルの説明しますと、
text-align:right;
は、左寄せ（text-align:left;）、中央（text-align:center;）、右寄せ（text-align:right;）の設定となります。
color:#DC143C;
は、文字の色を指定します。
16進法のカラー設定か、カラーネームで設定します。
詳しくは、 Htmlタグ辞典 を参考にしてください。
font-size:20pt;
は、文字のサイズの設定です。
数字を入れ替えて大きさを確認してみてください。
font-weight:normal;
は、文字の太さを指定します。
通常は、 normal か bold を指定しますが、100〜900の範囲でも指定ができます。
margin-top:2px;
は、一行上のマージンを指定します。
指定すると行の上部に空白スペースの調整ができます。
margin-bottom:10px;
は、一行下のマージンを指定します。
指定すると行の下部に空白スペースの調整ができます。
padding-left:60px;
は、一行の左側に空白スペースの調整ができます。
padding-right:0px
は、一行の右側に空白スペースの調整ができます。
細かく述べようとするとまだあるのですが、
これだけでもスタイルとしては十分に使えますのでここまでの解説とします。
記事の投稿後に表示の確認をしてみてください。
上手く表示されているでしょうか？
【ブログ・制作Tip！の最新記事】
この記事へのコメント