無料ブログ＆アクセスアップ 関連広告
☆★☆ ページ内のキーワード（単語）をドラッグすると、キーワードの詳細解説がご覧になれます ☆★☆
▼文字（フォント）の種類を HTMLタグで指定する
フォントの値は 3 つまで指定することが可能で、左から順番に優先表示されます。
パソコンに指定したフォントが入っていない場合には、ブラウザの規定値で表示されます。
※表示例
<font face="ＭＳ 明朝" size="4">ＭＳ 明朝</font>
▼文字（フォント）の種類を スタイルシート(CSS)で指定する
フォントを複数指定したい場合には、各フォントを『,』（カンマ）で区切って指定します。
（左から順番に優先表示されます）
パソコンに指定したフォントが入っていない場合には、ブラウザの規定値で表示されます。
※記載例
<span style="font-family: verdana, 'ＭＳ Ｐゴシック', times;">verdana, ＭＳ Ｐゴシック, times</span>
※表示例
verdana, ＭＳ Ｐゴシック, times
▼ブログ全体にフォントを指定する方法
（Windows Vista 標準搭載フォント「メイリオ」を設定する方法）
スタイルシートに以下のように記述します。
body{
font-family: "メイリオ",Meiryo,Verdana,"ＭＳ Ｐゴシック",Osaka,sans-serif;
}
※注意
気が向きましたらならクリックをお願いします ↓
人気blogランキング！ 
ＪＲＡＮＫブログランキング 
ブログランキングくつろぐ
<FONT FACE="フォント,フォント,フォント">〜</FONT>
"フォント"の部分にはは、指定したいフォントの名前を入力します。フォントの値は 3 つまで指定することが可能で、左から順番に優先表示されます。
パソコンに指定したフォントが入っていない場合には、ブラウザの規定値で表示されます。
※表示例
<font face="ＭＳ 明朝" size="4">ＭＳ 明朝</font>
▼文字（フォント）の種類を スタイルシート(CSS)で指定する
<span style="font-family:指定フォント;">〜</span>
"指定フォント"の部分には、指定したいフォントの名前を入力します。フォントを複数指定したい場合には、各フォントを『,』（カンマ）で区切って指定します。
（左から順番に優先表示されます）
パソコンに指定したフォントが入っていない場合には、ブラウザの規定値で表示されます。
※記載例
<span style="font-family: verdana, 'ＭＳ Ｐゴシック', times;">verdana, ＭＳ Ｐゴシック, times</span>
※表示例
verdana, ＭＳ Ｐゴシック, times
▼ブログ全体にフォントを指定する方法
（Windows Vista 標準搭載フォント「メイリオ」を設定する方法）
スタイルシートに以下のように記述します。
body{
font-family: "メイリオ",Meiryo,Verdana,"ＭＳ Ｐゴシック",Osaka,sans-serif;
}
※注意
- フォント名を指定する場合、「ＭＳ Ｐゴシック」など日本語のものや間にスペースが入っているものは引用符（”や’）で囲う。というルールがあります。
- 従来の日本語フォントであるMS Pゴシックとは異なり、全角文字はすべて固定幅のフォントで行間も従来フォントに比べて広いため、従来のMS Pゴシックを前提とした設定のブログの場合、メイリオを使用するとデザインが崩れる場合があります。
- 「Windows Vista」以外のパソコン利用者のために、従来の日本語フォントも設定してあります。
- プラウザによっては、日本語標記のフォントが適用されなかったり、逆に、日本語フォントのアルファベット表記が適用されない場合があるので、両方表記してあります。
- 「Osaka」は、Mac-OS用のフォントです。
- テンプレートをカスタマイズする際には、必ず元のテンプレートをバックアップしてからカスタマイズするようにしてください。また、カスタマイズは自己責任のもとで行ってください。
気が向きましたらならクリックをお願いします ↓ 人気blogランキング！ ＪＲＡＮＫブログランキング ブログランキングくつろぐ
HTMLタグやスタイルシート(CSS)がよくわからないという、初心者の方のために、「HTMLタグ＆スタイルシート(CSS)自動生成システム」なるものを作ってみました。
文字の大きさ、文字色、太さ、斜体など、文字装飾の為の基本的なスタイルシート(CSS)とHTMLタグのみ、変換可能です。
各種文字設定をするだけで、簡単にスタイルシート(CSS)のソースを表示できるので、スタイルシートを理解している上級者の方でも、いちいちスタイルシートを書き込むのが面倒くさいと考えている方は、よろしければ試してみてください。
⇒ HTMLタグ＆スタイルシート(CSS)自動作成
記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング 
FC2ブログランキング 
人気blogランキング！
文字の大きさ、文字色、太さ、斜体など、文字装飾の為の基本的なスタイルシート(CSS)とHTMLタグのみ、変換可能です。
各種文字設定をするだけで、簡単にスタイルシート(CSS)のソースを表示できるので、スタイルシートを理解している上級者の方でも、いちいちスタイルシートを書き込むのが面倒くさいと考えている方は、よろしければ試してみてください。
⇒ HTMLタグ＆スタイルシート(CSS)自動作成
記事の内容にご満足戴けましたならクリックをお願いします ↓ ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！
◎マウスをあわせたときだけ背景色が表示される透明なボタン
▼ソース
<input type="button" value="無料ブログ" style="font-size:15pt;background-color:transparent;" onmouseover="this.style.backgroundColor='#ff8040'" onmouseout="this.style.backgroundColor='transparent'" />◎上記のボタンをリンクさせる
▼ソース
<input type="button" value="FC2ブログ" style="font-size:15pt;background-color:transparent;cursor:hand;" onclick="document.location='URL'" onmouseover="this.style.backgroundColor='#f79de0'" onmouseout="this.style.backgroundColor='transparent'" />
◎ 写真（画像）の周辺をぼかすスタイルシート （IE4以降のみ）
「Internet Explorer」のフィルター効果（alpha効果）を利用すれば、写真（画像）の周辺をぼかして表示することができます。
● 西洋醤油（ソース）
<img src="画像へのパス"
alt="猫" border="0" style="filter:alpha(style=2,opacity=100,finlshopacity=0)">
表示例 ⇒
記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！
「Internet Explorer」のフィルター効果（alpha効果）を利用すれば、写真（画像）の周辺をぼかして表示することができます。
| ← 元画像 <img> タグに、フィルター効果（alpha）のスタイルシートを追加します。 ※注意； IE以外のプラウザでは、alpha効果は得られません。 |
● 西洋醤油（ソース）
<img src="画像へのパス"
alt="猫" border="0" style="filter:alpha(style=2,opacity=100,finlshopacity=0)">
| style=2, opacity=100, finlshopacity=0 | グラデーションの形状を「1（線形）」「2（円形）」「3（長方形）」の値で指定 グラデーションの開始点の透明度を、0（透明）〜100（不透明）の数値で指定 グラデーションの終了点の透明度を、0（透明）〜100（不透明）の数値で指定 |
表示例 ⇒
記事の内容にご満足戴けましたならクリックをお願いします ↓ ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！
◎ 余白の設定：padding（パディング） & margin（マージン）
余白を設定するスタイルシート（CSS）として、「margin」と「padding」があります。
※余白を利用することで、任意の位置にコンテンツを配置させることができます。
記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！
さすが!と言わせる FC2ブログ徹底攻略術
HTML&スタイルシート レイアウトブック
余白を設定するスタイルシート（CSS）として、「margin」と「padding」があります。
| ■ margin（マージン）について 「margin」は、コンテンツの外側の余白を設定するCSSです。 ・数値＋単位で指定 ：（em, ex, pt, px）など ・数値＋％で指定 ：ひとつ外側のボックスに対する割合 ・auto ：自動調整（プラウザの設定に依存） ※マイナス指定可能 |
padding （パディング） サンプル padding:10px | ■ padding（パディング）について 「padding」は、コンテンツの内側の余白を設定するCSSです。 ・数値＋単位で指定 ：（em, ex, pt, px）など ・数値＋％で指定 ：ひとつ外側のボックスに対する割合 ※マージンと異なりマイナス指定はできない |
※余白を利用することで、任意の位置にコンテンツを配置させることができます。
|
記事の内容にご満足戴けましたならクリックをお願いします ↓ ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！ さすが!と言わせる FC2ブログ徹底攻略術 HTML&スタイルシート レイアウトブック
段落の先頭1字だけの文字表示形式（スタイル）を変えて表示します。
<HEAD>〜</HEAD>に以下のスタイルシート（CSS）を記述して下さい。
<style type="text/css">
<!--
.First {
font-weight:bold;
margin:0px 0px 5px 0px;
}
.First:first-letter {
font-style : italic; //先頭1字の文字を斜体に
font-size : 150%; //先頭1字の文字サイズ
color : blue; //先頭1字の文字の色
}
-->
</style>
※記載例 ⇒ <p class="First">段落の先頭1字だけスタイル変更</p>
※表示例（サンプルページ） ⇒ 段落の先頭1字だけのスタイル変更
記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！
<HEAD>〜</HEAD>に以下のスタイルシート（CSS）を記述して下さい。
<style type="text/css">
<!--
.First {
font-weight:bold;
margin:0px 0px 5px 0px;
}
.First:first-letter {
font-style : italic; //先頭1字の文字を斜体に
font-size : 150%; //先頭1字の文字サイズ
color : blue; //先頭1字の文字の色
}
-->
</style>
※記載例 ⇒ <p class="First">段落の先頭1字だけスタイル変更</p>
※表示例（サンプルページ） ⇒ 段落の先頭1字だけのスタイル変更
記事の内容にご満足戴けましたならクリックをお願いします ↓ ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！
| 無料ブログ テンプレート カスタマイズ |
Next
Copyright © 2006 無料ブログ テンプレート カスタマイズ All rights reserved.
ドメイン SEO対策カウンター
Template by ブログ＆ホームページ作成 ガイドブック 解説本
Copyright © 2006 無料ブログ テンプレート カスタマイズ All rights reserved.
ドメイン SEO対策カウンター
Template by ブログ＆ホームページ作成 ガイドブック 解説本
