i-8jo.com（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文法を使いこなそう」さんの研究の成果に感謝！！

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

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

　今回はCSSを利用して、文字の色を変えてみましょう。これまで、Wiki文法を利用すると、文字の色は変えられないと考えられていましたが、これを利用すれば、Wikiを使っていても、文字の色を変えられるようになりますので、タイトルなどに使ってみると良いかと思います。

　それでは、始めましょう。

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

色を変えるときの基本的なルールとしては

||<#セルの色の値 style=color:#文字の色の値; ``文章||

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

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

■文字の色を赤に変える（colorが#ff0000の場合）

文法）
||<#ffffff' style=color:#ff0000; ``こんにちは||

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

結果）

こんにちは

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

■文字の色を緑に変える（colorが#00ff00の場合）

文法）
||<#ffffff' style=color:#00ff00; ``こんにちは||

結果）

こんにちは

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

■文字の色を青に変える（colorが#0000ffの場合）

文法）
||<#ffffff' style=color:#0000ff; ``こんにちは||

結果）

こんにちは

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

CSSを設定する場合、いろいろな設定を組み合わせて利用することが出来ます。

基本的なルールを確認すると、

||<#セルの色の値 style=設定する項目1:設定する値1;設定する項目2:設定する値2;設定する項目3:設定する値3; ``文章||

という風に、";"セミコロンの後に項目を追加していけば、様々な設定を追加することが出来ます。

それでは、前回やった文字の大きさを変えながら、色を変えてみましょう。

■文字の大きさ8px、色を青に変える（font-sizeが8px、colorが#0000ffの場合）

文法）
||<#ffffff' style=font-size:8px;color:#0000ff; ``こんにちは||

結果）

こんにちは

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

■背景は赤、文字の大きさ18px、色を白に変える（背景colorが#0000ffの場合）

文法）
||<#ff0000' style=font-size:18px;color:#ffffff; ``こんにちは||

結果）

こんにちは

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

如何でしょうか？
何となく雰囲気はつかめましたでしょうか？
タイトルなどにいろいろと試してみてくださいね。

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

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

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

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

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

　今回から、CSS（スタイルシート）を利用する方法をご紹介したいと思います。他のhtmlやWikiもそうですが、Yahoo!blogで利用できるCSSは、ほんの一部分です。しかし、それを利用すると又様々な表現が可能になってきます。

　本来CSSは様々な部分に対して設定できるのですが、Yahoo!blogの場合は設定できるのが、今のところテーブルに対する設定だけのようです（私が知らないだけかもしれませんが）。なので、とりあえずテーブル関連のCSSから初めてみたいと思います。

　少し複雑に感じる部分もあるかもしれませんが、少しずつやって行きましょう。それでは、はじめたいと思います。

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

基本的なルールとしては

style=設定項目:設定値;

です。
（":"コロンと";"セミコロンの違いに注意！！）

これをテーブルに設定するときは以下のようになります。

||<#色の値 style=設定項目:設定値; ``文章||

という感じになります。

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

■フォントのサイズを変える（font-sizeが8pxの場合）

文法）
||<#ccffff' width=100 height=50 style=font-size:8px ``こんにちは||

※補足　分かりやすくするために、セルの色と大きさを設定しています。
　　　　Yahoo!blogの場合、標準でフォントのサイズが12pxに設定されているようです。

結果）

こんにちは

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

■フォントのサイズを変える（font-sizeが10pxの場合）

文法）
||<#ccffff' width=100 height=50 style=font-size:10px ``こんにちは||

結果）

こんにちは

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

■フォントのサイズを変える（font-sizeが12pxの場合）

文法）
||<#ccffff' width=100 height=50 style=font-size:12px ``こんにちは||

結果）

こんにちは

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

■フォントのサイズを変える（font-sizeが14pxの場合）

文法）
||<#ccffff' width=100 height=50 style=font-size:14px ``こんにちは||

結果）

こんにちは

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

■フォントのサイズを変える（font-sizeが16pxの場合）

文法）
||<#ccffff' width=100 height=50 style=font-size:16px ``こんにちは||

結果）

こんにちは

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

■フォントのサイズを変える（font-sizeが18pxの場合）

文法）
||<#ccffff' width=100 height=50 style=font-size:18px ``こんにちは||

結果）

こんにちは

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

如何でしょうか？
何となく雰囲気はつかめましたでしょうか？もちろん、この他にも値は変更できます。皆さん、いろいろと試してみてくださいね。

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

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

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

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

記事本文を飾り付けてみよう「（その２６）Wiki超入門１６」

今回はそのテーブルのセルを結合させる方法をご紹介します。
いつも書いていますが、あまり使い勝手は良くありません。いろいろ工夫してみてくださいね。

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

基本的なルールとしては

||||
||<#色の値' width=横幅 height=高さ colspan=右方向へ結合するセル数 rowspan=下方向へ結合するセル数 ``表の文

です。

・"|"は縦棒です（何て言うのか判りません）。私のキーボードでは右上の"\"キーをShiftと一緒に押すと出てきます。
・色の値の次にあるのは['](シングルクォーテーション)です。私のキーボードでは"7"キーをShiftと一緒に押すと出てきます。
・表の文の前にあるのは[`](何て言うのか判りません)。私のキーボードでは右側の"@"とshiftを一緒に押すと出てきます。

■テーブルのセルを横に結合する（colspan属性）

文法）
||||
||<#ccffff' width=100 height=50 ``１：結合なし
||<#ccffff' width=100 height=50 ``２：結合なし
||<#ccffff' width=100 height=50 ``３：結合なし
||||
||<#ccffff' width=100 height=50 colspan=2 ``１と２を結合
||<#ccffff' width=100 height=50 ``３：結合なし
||||
||<#ccffff' width=100 height=50 colspan=3 ``１と２と３を結合

※補足　結合をするとその分だけセルの数が減りますので、設定するセルの数も減っていきます。

結果）

１：結合なし	２：結合なし	３：結合なし
１と２を結合		３：結合なし
１と２と３を結合

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

■テーブルのセル縦に結合する（rowspan属性）

文法）
||||
||<#ccffff' width=100 height=50 rowspan=5 ``１列目を３つ結合
||<#ccffff' width=100 height=50 rowspan=3 ``２列目を２つ結合
||<#ccffff' width=100 height=50 ``３：結合なし
||||
||<#ccffff' width=100 height=50 ``３：結合なし
||||
||<#ccffff' width=100 height=50 ``２：結合なし
||<#ccffff' width=100 height=50 ``３：結合なし

※補足　ここでrowspanの値に注目して頂きたいのですが、３つのセルを結合するときは"5"、２つのセルを結合する時には"3"に設定しています。これは何故かというと、実は縦のセルとセルの間に小さなセルが挟まれています。これも含めて結合しなくてはいけない為に、この様な設定になります。

結果）

１列目を結合	２列目を結合	３：結合なし
		３：結合なし
	２：結合なし	３：結合なし

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

如何でしょうか？
今回は少し複雑だったかも知れませんね。テーブルを作る際に紙に書いて、何処と何処を結合するかを確認しながらやると良いかもしれませんね。

ちなみに、これまで説明してきた方法だとテーブルの一番上と、縦に並ぶセルの間に線のようなものが入ってしまいます。これは上の補足でも説明したように、間に小さなセルが入っているからなのです。
もしも、気になるようでしたら以下のように設定してください。

||||　→　||<#ffffff' ``||

こうすれば、間のセルの色が背景の白と同じになります。

例）
||<#ffffff' ``||
||<#ccffff' width=100 height=50 ``こんにちは
||<#ccffff' width=100 height=50 ``さようなら
||<#ffffff' ``||
||<#ccffff' width=100 height=50 ``こんばんわ
||<#ccffff' width=100 height=50 ``おやすみなさい

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

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

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

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