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に設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

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

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

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

　今回はCSSを利用して、文字をいろいろと飾り付けてみましょう。CSSでは飾り付けの設定も細かくできるようになっているのですが、基本的な部分だけをピックアップしてご説明します。
　それでは、始めましょう。

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

基本的なルールとしては

強調　→　font-weight:bold;
斜体　→　font-style:italic;
上線　→　text-decoration:overline;
取消線　→　text-decoration:line-through;
下線　→　text-decoration:underline;
点滅　→　text-decoration:blink;

という感じになります。（":"コロンと";"セミコロンの違いに注意！！）

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

■文字を強調する（font-weightがboldの場合）

文法）
||<#ffffff' style=font-weight:bold; ``こんにちは||

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

結果）

こんにちは

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

■文字を斜体にする（font-styleがitalicの場合）

文法）
||<#ffffff' style=font-style:italic ``こんにちは||

結果）

こんにちは

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

■文字に上線をつける（text-decorationがunderlineの場合）

文法）
||<#ffffff' style=text-decoration:overline; ``こんにちは||

結果）

こんにちは

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

■文字に取消線をつける（text-decorationがline-throughの場合）

文法）
||<#ffffff' style=text-decoration:line-through; ``こんにちは||

結果）

こんにちは

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

■文字に下線をつける（text-decorationがunderlineの場合）

文法）
||<#ffffff' style=text-decoration:underline; ``こんにちは||

結果）

こんにちは

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

■文字を点滅させる（text-decorationがblinkの場合）

文法）
||<#ffffff' style=text-decoration:blink; ``こんにちは||

※注　この設定はブラウザによっては、上手く表示されないかもしれません。

結果）

こんにちは

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

今回の設定も、スタイルシートの基本的なことが理解できていれば、そんなに難しくないと思います。
ただ、点滅のところでもご説明しましたが、ブラウザによっては上手く表示されないことがありということを頭に入れておいてくださいね。
いつもの事ながら、いろいろと試してみてくださいね。

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

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

[感謝]
この記事は「京都写真日記：Wiki文法を使いこなそう」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「京都写真日記：Wiki文法を使いこなそう」さんのページにて、ボタンをお願いします。
「京都写真日記：Wiki文法を使いこなそう」さんの研究の成果に感謝！！

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

ヤフー、ブログとGeoCitiesにアフィエイト広告掲載を表明

気が付くのがおそくなりましたが、ヤフーがアフィリエイト広告掲載を発表していたのですね。

参考
http://internet.watch.impress.co.jp/cda/news/2005/04/21/7375.html

これで、またYahoo!blogが賑やかになりそうですね。
でも、ますます重くなったりして、、、。

背景画像

このページは背景画像をアップする為のページです。

上手くいくかな？