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

記事本文を飾り付けてみよう「（その２８）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に設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

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

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

テーブルテスト

こんにちは

１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目　　１行目１行目　１行目 ２行目 ３行目

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

前回はテーブルの色やサイズの変更をしましたが、今回はそのテーブル内での文字の位置を変えてみたいと思います。
テーブルの中で改行ができないので、あまり使い勝手は良くありませんが、工夫次第でもしかしたら凄いレイアウトが出来るかもしれません。是非試してみてくださいね。

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

基本的なルールとしては

||||
||<#色の値' width=横幅 height=高さ align=横の揃え方 valign=縦の揃え方 ``表の文

[align属性]
左揃え => left
中央揃え => center
右揃え => right

[valign属性]
上寄せ => top
中央揃え => middle
下寄せ => bottom

です。

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

基本の位置は、横＝左揃え・縦＝中央揃えになっています。それ以外に変更したい時は以下の様に設定してください。

■テーブルの文字の横の位置を変える（align属性）

文法）
||||
||<#ccffff' width=100 height=100 align=left ``左揃え
||<#ccffff' width=100 height=100 align=center ``中央揃え
||<#ccffff' width=100 height=100 align=right ``右揃え

結果）

左揃え	中央揃え	右揃え

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

■テーブルの文字の縦の位置を変える（valign属性）

文法）
||||
||<#ccffff' width=100 height=100 valign=top ``上寄せ
||<#ccffff' width=100 height=100 valign=middle ``中央揃え
||<#ccffff' width=100 height=100 valign=bottom ``下寄せ

結果）

上寄せ	中央揃え	下寄せ

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

■テーブルの文字の位置を変える（いろいろ組み合わせてみる）

文法）
||||
||<#ccffff' width=100 height=100 align=left valign=top ``左・上揃え
||<#ccffff' width=100 height=100 align=left valign=middle ``左・中央揃え
||<#ccffff' width=100 height=100 align=left valign=bottom ``左・下揃え
||||
||<#ccffff' width=100 height=100 align=center valign=top ``中央・上揃え
||<#ccffff' width=100 height=100 align=center valign=middle ``中央・中央揃え
||<#ccffff' width=100 height=100 align=center valign=bottom ``中央・下揃え
||||
||<#ccffff' width=100 height=100 align=right valign=top ``右・上揃え
||<#ccffff' width=100 height=100 align=right valign=middle ``右・中央揃え
||<#ccffff' width=100 height=100 align=right valign=bottom ``右・下揃え

結果）

左・上揃え	左・中央揃え	左・下揃え
中央・上揃え	中央・中央揃え	中央・下揃え
右・上揃え	右・中央揃え	右・下揃え

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

如何でしょうか？
ますます細かい設定が出てきてしまいましたが、少しずつやっていけばそんなに難しいことではありません。一つ一つやってみてくださいね。

※ここでは、例として色や大きさを設定していますが、ご利用の際にはお好きな色と大きさを指定してください。

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

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

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

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