i-8jo.com（Yahoo!blog入門）

やばいぞ、Yahoo!blog！

きろくぶろぐさんの記事によれば、昨日からYahoo!blogに異常が発生しているようです。

中には記事や書庫が消えてしまった方もいるようです。
また、コメントが書き込めなくなってしまったりもしているところがあります。

みなさん、早めにバックアップを取っておきましょう。

バックアップと言っても簡単。

記事の編集部分を開き、そこをコピーしてウィンドウズのメモ帳などを利用して、自分のパソコンに保存しておくだけです。

後で泣かないように、今の内やっておきましょう。

記事本文を飾り付けてみよう「（その３０）CSS超入門４」

　今回はCSSを利用して、フォントの種類を変えてみたいと思います。少し分かりにくいかもしれませんが、お許しください。それでは、始めましょう。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては以下のようになります。

font-family:フォント名,フォントの種類;

※フォントの種類とは？
明朝系のフォント　　　　　　→　serif
ゴシック系のフォント　　　　→　sans-serif
筆記体・草書体系のフォント　→　cursive
装飾的なフォント　　　　　　→　fantasy
等幅のフォント　　　　　　　→　monospace

フォントは人それぞれパソコンに入っているものが違います。指定したフォントが無い場合にフォントの種類を指定しておくと、近いフォントを利用して表示するようになります。日本語のフォントはあまり種類を指定できないかもしれませんが、英数字は楽しいフォントがある場合も多いので、指定してみるといいかもしれません。

例えば、以下のように指定します。（よく分からない場合は、このまま指定してみて下さい。）
明朝体の場合　　　　→　font-family:ＭＳ Ｐ明朝,平成明朝,serif;
ゴシック体の場合　　→　font-family:ＭＳ Ｐゴシック,Osaka,sans-serif;

（注１　":"コロンと";"セミコロンの違いに注意！！）
（注２　ＭＳの後ろは本来だと半角スペースなのですが、そのままだと上手く表示されないので、文字コードにしてあります。）

テーブルに関して詳しくは
Wiki超入門１３「テーブルを表示させる方法」
Wiki超入門１４「テーブルの大きさと色を変える方法」
Wiki超入門１５「テーブル中の文字の位置を変える方法」
Wiki超入門１６「テーブルのセルを結合する方法」
をご覧ください。

■文字を明朝体にする

文法）
||<#ffffff' style=font-size:20;font-family:ＭＳ&#x20;Ｐ明朝,平成明朝,serif; ``こんにちは||

※補足　分かりやすくするために、セルの色は白・文字のサイズ20pxに設定しています。以下も同様。

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■文字をゴシック体にする

文法）
||<#ffffff' style=font-size:20;font-family:ＭＳ&#x20;Ｐゴシック,Osaka,sans-serif; ``こんにちは||

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

フォントについては、よく分からない部分が多いかもしれません。（私も良く分かっていません。）
その場合には、あまり深く考えずに書いてある通りに指定してみてくださいね。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

また、Yahoo!blogの場合、記事の部分の横幅は560pxに設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

[感謝]
この記事は「おっさん」の記事を参考にさせていただきました。
もしも、参考になりましたら「おっさん」のページにて、ボタンをお願いします。
「おっさん」の研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。