スタイルシート （CSS）

ここでは、 スタイルシート （CSS） に関するカテゴリー情報を紹介しています。
無料ブログ テンプレート カスタマイズ TOP
無料ブログ＆アクセスアップ 関連広告

キーワード上位表示させる為のブログテンプレート カスタマイズの方法 *

* 無料のデータベース作成ツール（簡単ホームページ作成）
* 無料の高機能検索サイト作成ツール 『too-search』
アクセスアップ 無料ＳＥＯ対策ツールが使い放題！【AS─TOOLS】
ブログランキング ブログのアクセス数を増やすことができるブログランキングサイト「ブログセンター」
アクセスアップ 会員同士が簡単に相互リンクをが出来る【リンクボックス】

▼ リンクスタッフ各社への新規登録で、全員に3000円キャッシュバック中！▼ 検索エンジン登録代行/上位表示でアクセスアップ！
検索エンジン登録代行・検索エンジン上位表示でアクセスアップ！ 1980円〜！

☆★☆ ページ内のキーワード（単語）をドラッグすると、キーワードの詳細解説がご覧になれます ☆★☆

スタイルシート（CSS）の font-family: について

2009/08/01(土)
先日、「FC2ブログ共有テンプレート」に申請していたテンプレートが、「cssのfont-family:の部分が文字化けしている」という理由で却下されました。

▼該当部分のスタイルシート
body{
font-family: "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF","\30D2\30E9\30AE\30CE\20Pro\20W3",Osaka,sans-serif;
}

以前にも、一般の方から同様の質問を受けたことがあり、個別に説明させて頂きましたが、まさか、テンプレートを審査する専門の方から「font-family:の部分が文字化けしている」と指摘されるとは思ってもいませんでしたが、逆に、これでは一般の方に、文字化けの心配をされても仕方がないなあ・・・と思った次第で、ここで簡単に上記、font-family:のスタイルシートの解説をさせて頂きます。

通常ならば、上記、font-family:のスタイルシートは、
body{
font-family: "ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Osaka,sans-serif;
}
と、記載すれば良いのですが、これだと、MacOSでSafari（ブラウザ） などを利用してサイト（ホームページ）を閲覧すると、文字化けして正常に表示されないことがあるようです。

それを回避する方法として、「ＭＳ Ｐゴシック」と「ヒラギノ角ゴ Pro W3」をエスケープ処理して記載するという方法があります。

当ブログを訪問して下さっている方で、MacOS環境で、Safari を利用して閲覧されている方は、ほとんどいらっしゃらないので、そこまで気を使うこともないかもしれませんが、万が一、そのような環境でブログを閲覧される方が訪問されても、文字化けしないようにということで、青字の部分のように記載しているわけで、もちろん、このように記載したからといって、通常皆さんが使用されるプラウザで、文字化けが起こるということは、無いはずです。

そもそも、本当に「cssのfont-family:の部分が文字化けしている」のであれば、こちらで意図した（指定した）フォントでは、正常に表示されないわけで、テンプレートを審査する方も、考えてみれば、わかりそうなものなのですが・・・・・

記事の内容にご満足戴けましたならクリックをお願いします ↓
人気blogランキング！ ブログランキングくつろぐ ＪＲＡＮＫブログランキング
≫[ スタイルシート（CSS）の font-family: について ] の続きを読む

タグ ：CSS スタイルシート

トラックバック：0 | コメント：1 | Page Top↑

オプション（オリジナル）のスタイルシートを追加する

2009/01/13(火)
文字書式や文字サイズなど、普段はあまり使わなくても、時々変わったフォントを使ったり、文字を強調するために、テキスト（文字）装飾をするツールは使わず（<strong>タグの使い過ぎはＳＥＯ対策上好ましくない）、スタイルシートで強調したいなどという時もあります。

そのような時のために、テンプレートの「スタイルシート編集」の部分に、予め、オリジナルのスタイルシートをクラス指定して追加しておくと便利です。

▼オリジナルのスタイルシート記入例
/************************************/
/* オプション文字書式＆サイズ */
.font14me {
font-family: "メイリオ",Meiryo,Verdana,"ＭＳ Ｐゴシック",Osaka,sans-serif;
font-size: 14px; line-height: 130%;
}
.font14ve {
font-family: Verdana,"ＭＳ Ｐゴシック",Osaka,sans-serif;
font-size: 14px; line-height: 130%;
}
.font14b { font-weight: bold; font-size: 14px;}
.font14br { font-weight: bold; font-size: 14px; color: #cc0000;}
.font15b { font-weight: bold; font-size: 15px;}

特に文字書式の場合には、利用するプラウザによっては、指定したスタイルシートが適用されないこともあるので、複数の文字書式を指定したほうが良いといわれていますが、それをスタイルシートで指定すると、

文字書式を14pxサイズのメイリオで指定する　と表示させるのに、

<span style='font-family: "メイリオ",Meiryo,Verdana,"ＭＳ Ｐゴシック",Osaka,sans-serif;font-size: 14px;'>文字書式を14pxサイズのメイリオで指定する</span>
と記入しなければなりませんが、予め、オリジナルのスタイルシートをクラス指定しておけば、
<span class="font14me">文字書式を14pxサイズのメイリオで指定する</span>
と記入するだけで済みます。
ちなみに私は、変換ツールの「ＩＭＥ」に、「<span class=""></span>」を、「すぱん」で登録してあります。
　※画像参照

記事の内容にご満足戴けましたならクリックをお願いします ↓
人気blogランキング！ FC2ブログランキング ＪＲＡＮＫブログランキング
≫[ オプション（オリジナル）のスタイルシートを追加する ] の続きを読む

タグ ：スタイルシート CSS カスタマイズ

トラックバック：0 | コメント：0 | Page Top↑

文字（フォント）の種類を指定する方法

2009/01/13(火)
▼文字（フォント）の種類を HTMLタグで指定する

<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ランキング！ * ＪＲＡＮＫブログランキング * ブログランキングくつろぐ

≫[ 文字（フォント）の種類を指定する方法 ] の続きを読む

タグ ：カスタマイズ CSS スタイルシート HTML

トラックバック：0 | コメント：1 | Page Top↑

HTMLタグ＆スタイルシート(CSS)を自動で作成

2008/01/14(月)
HTMLタグやスタイルシート(CSS)がよくわからないという、初心者の方のために、「HTMLタグ＆スタイルシート(CSS)自動生成システム」なるものを作ってみました。

文字の大きさ、文字色、太さ、斜体など、文字装飾の為の基本的なスタイルシート(CSS)とHTMLタグのみ、変換可能です。

各種文字設定をするだけで、簡単にスタイルシート(CSS)のソースを表示できるので、スタイルシートを理解している上級者の方でも、いちいちスタイルシートを書き込むのが面倒くさいと考えている方は、よろしければ試してみてください。

　⇒ HTMLタグ＆スタイルシート(CSS)自動作成

記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！

タグ ：HTML ホームページ作成 初心者 スタイルシート CSS フリーソフト

トラックバック：0 | コメント：0 | Page Top↑

マウスをあわせたときだけ背景色が表示される透明なボタン

2007/11/02(金)

◎マウスをあわせたときだけ背景色が表示される透明なボタン

　　　　

▼ソース

<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'" />
≫[ マウスをあわせたときだけ背景色が表示される透明なボタン ] の続きを読む

タグ ：スタイルシート CSS

トラックバック：0 | コメント：0 | Page Top↑

段落の先頭1字だけスタイル変更

2007/01/05(金)
段落の先頭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ランキング！

≫[ 段落の先頭1字だけスタイル変更 ] の続きを読む

タグ ：スタイルシート CSS

トラックバック：0 | Page Top↑
サイトマップ  | ５ |  １５ |  ２５ |  ３５ |  ４５ |  ５５ |  ６５ |  ７５ |  ８５ |  ９５ |