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

テスト

今日も良い一日になると良いですね

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

　今回は、前回のボックスについてでご説明した「パディング」の部分の設定方法をご説明したいと思います。パディングの使い方を覚えておくとレイアウトに役立つと思います。是非覚えておいてくださいね。

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

基本的なルールとしては

パディング（上）　→　padding-top:設定する値;
パディング（下）　→　padding-bottom:設定する値;
パディング（右）　→　padding-right:設定する値;
パディング（左）　→　padding-left:設定する値;
パディング（上下左右）　→　padding:設定する値;

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

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

それでは、実際に設定したものを見てみましょう。

■パディングの上を100pxにする（padding-top:100px;の場合）

文法）
||<#ccffff' style=padding-top:100px; ``今日も良い一日になると良いですね||

※補足　分かりやすくするために、セルの色に色を付けています。以下も同様。

結果）

今日も良い一日になると良いですね

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

■パディングの下を100pxにする（padding-bottom:100px;の場合）

文法）
||<#ccffff' style=padding-bottom:100px; ``今日も良い一日になると良いですね||

結果）

今日も良い一日になると良いですね

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

■パディングの右を100pxにする（padding-right:100px;の場合）

文法）
||<#ccffff' style=padding-right:100px; ``今日も良い一日になると良いですね||

結果）

今日も良い一日になると良いですね

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

■パディングの左を100pxにする（padding-left:100px;の場合）

文法）
||<#ccffff' style=padding-left:100px; ``今日も良い一日になると良いですね||

結果）

今日も良い一日になると良いですね

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

■パディングの上下左右全てを100pxにする（padding:100px;の場合）

文法）
||<#ccffff' style=padding:100px; ``今日も良い一日になると良いですね||

結果）

今日も良い一日になると良いですね

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

如何でしたか？
そんなに難しくはないと思います。パディングの設定は覚えておくと後々レイアウトに生かせると思いますので、是非覚えておいてくださいね。

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

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

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

記事本文を飾り付けてみよう「（番外編）CSSのボックスについて」

　今回はCSSの利用時に作られる「ボックス」についてご説明しておきます。少し分かりにくいかもしれませんが、CSSでのレイアウトを考える時に基礎となる部分なので、頭の片隅にでも覚えておいて下さい。

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

Yahoo!blogでCSSを利用できるのは、今のところテーブルなどに限られてしまっていますが、本来CSSはテキストや画像、その他様々な要素に適用することが出来ます。
こうした要素（Yahoo!blogの場合、テーブルなど）にCSSを適用すると、その要素に「ボックス」と呼ばれる領域を生成します。（図1）

[図1]

それでは、このボックスの詳細を見ていきましょう。

１、内容
文字列や画像などメインとなる内容を表示する部分です。テーブルにCSSを適用した場合は、その中に入っている文字列や画像が内容となります。

２、パディング
ボーダーまでの余白です。このパディング部分にはCSSで設定した背景色や背景画像が適用されますので、背景を大きく取りたい時には、このパディングを大きく設定してください。

３、ボーダー
パディングを囲む枠線です。線の太さや種類を設定することができます。

４、マージン
ボーダーの外にある余白です。この部分にはCSSで設定した背景色や背景画像は適用されません。無色の余白を取りたい時は、こちらを設定してください。

以上の内容からマージンまで全体がボックスとなります。
今後、これらの設定の仕方をご説明したいと思います。（図1）の構成を頭に入れておいてくださいね。

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

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

　今回はCSSを利用して、行の高さを変更してみたいと思います。普段は使うことが無いかもしれませんが、前回やったようにテーブルの中で改行をしたりする時に利用できると思います。

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

基本的なルールとしては

行の高さを変える　→　line-height:行の高さの値;

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

改行については
CSS超入門５「CSSで文字・単語の間隔をあける、改行する方法」

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

それでは、実際にいろいろとやってみましょう。
ちなみに、Yahoo!blogの標準の文字サイズは12pxに設定されているようです。

■行の高さ20pxにする（line-heightが20pxの場合）

文法）
||<#ccffff' style=line-height:20px;word-spacing:560px; ``おはよう こんにちは こんばんわ||

※補足　分かりやすくするために、セルの色に色を付けています。以下も同様。

結果）

おはよう こんにちは こんばんわ

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

■行の高さ30pxにする（line-heightが30pxの場合）

文法）
||<#ccffff' style=line-height:30px;word-spacing:560px; ``おはよう こんにちは こんばんわ||

結果）

おはよう こんにちは こんばんわ

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

■行の高さ40pxにする（line-heightが40pxの場合）

文法）
||<#ccffff' style=line-height:40px;word-spacing:560px; ``おはよう こんにちは こんばんわ||

結果）

おはよう こんにちは こんばんわ

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

如何でしょうか。
あまり使わないかもしれませんが、こういうやり方もあるのだと頭の片隅にでも入れておくと、後々使う時がくるかもしれません。
いろいろと工夫してみてくださいね。

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

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

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

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

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

　今回はCSSを利用して、文字の間隔や単語の間隔を調整する方法をご説明します。この方法を知っておけば、テーブルの中で改行をすることも出来るようになりますので、是非覚えておいてくださいね。
それでは、始めたいと思います。

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

基本的なルールとしては

文字の間隔をあける　→　letter-spacing:間隔の値;
単語の間隔をあける　→　word-spacing:間隔の値;

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

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

まずは文字の間隔を空けてみましょう。

■文字を5px空ける（letter-spacingが5pxの場合）

文法）
||<#ffffff' style=letter-spacing:5px; ``こんにちは||

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

結果）

こんにちは

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

■文字を10px空ける（letter-spacingが10pxの場合）

文法）
||<#ffffff' style=letter-spacing:10px; ``こんにちは||

結果）

こんにちは

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

■文字を20px空ける（letter-spacingが20pxの場合）

文法）
||<#ffffff' style=letter-spacing:20px; ``こんにちは||

結果）

こんにちは

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

さて、次に単語の間隔についてですが、日本語の場合英語のように単語と単語の間を空けるということがありません、その為にあまり間隔を空けるという意味では必要ないかもしれません。
しかし、これを利用すると改行することができるようになります。
まずは、間隔を空けてみましょう。

■単語の間を20px空ける（word-spacing:が20pxの場合）

文法）
||<#ffffff' style=word-spacing:20px; ``こんにちは 私の名前は i_8joです。||
（" "(半角スペース)の入った部分の間隔が設定したように空くようになります。）

結果）

こんにちは 私の名前は i_8joです。

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

■単語の間を40px空ける（word-spacing:が40pxの場合）

文法）
||<#ffffff' style=word-spacing:40px; ``こんにちは 私の名前は i_8joです。||

結果）

こんにちは 私の名前は i_8joです。

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

さて、次にこれを応用して改行してみましょう。Yahoo!blogは本文を表示する部分が560pxで設定されています。いろいろ試してみると、設定値を560pxにすると改行に設定されるような感じです。

■テーブルの中で改行する（word-spacing:が5600pxの場合）

文法）
||<#ccffff' style=word-spacing:560px; ``こんにちは 私の名前は i_8joです。||
（分かりやすいようにセルに色をつけています。）

結果）

こんにちは 私の名前は i_8joです。

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

※補足　以前は間に空白と書いていたのですが、それだとブラウザによって上手く改行されないようです。どのブラウザでも改行させたい場合は、必ず" "半角スペースを入れるようにしてください。

如何でしたか？今までテーブルの中での改行は不可能だと思っていました。この技を発見された「京都写真日記：Wiki文法を使いこなそう」さんに本当に感謝です。

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

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

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

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