css8.permanent_area と not_permanent_area
< !--permanent_area-->と< !--not_permanent_area-->の違い
【fc2-blogカスタマイズ】 h ttp://amg2009.blog10.fc2.com/blog-entry-1775.html
・個別記事で表示させたくないものを囲む
< !--permanent_area--> ~ < !--/permanent_area-->
・個別記事のみで表示させる場合に囲む
< !--not_permanent_area--> ~ < !--/not_permanent_area-->
トップページでは表示させても
個別記事に移動したときに表示させたくないものは
< !--permanent_area-->< !--/permanent_area-->で囲み、
個別記事だけで表示させたいものについては、
< !--not_permanent_area-->< !--/not_permanent_area-->で囲むと
個別記事以外では表示されない。
あるいは、トップページと,個別記事で扱いを変えたい記事などに対応。
>トップページでは記事の上部に表示され、個別記事では記事の下部に表示されるというように。
以下では、トップページではタイトル部に表示されたプラグイン3が、個別記事では一番下で表示される
< div class="entry_header">
< body id="top">
< div id="center-left">
< div id="center">
< !--not_permanent_area-->
< !--plugin-->
< !--plugin_third-->
-----------プラグイン3のタグ--------------
< !--/plugin_third-->
< !--/plugin-->
< !--/not_permanent_area-->< /span>
< /div>
< div class="entry_body">
< %topentry_body>
< !--permanent_area-->
< !--plugin-->
< !--plugin_third-->
-----------プラグイン3のタグ--------------
< !--/plugin_third-->
< !--/plugin-->
< !--/permanent_area-->
< /div>< !--/ entry body -->
【fc2-blogカスタマイズ】 h ttp://amg2009.blog10.fc2.com/blog-entry-1775.html
・個別記事で表示させたくないものを囲む
< !--permanent_area--> ~ < !--/permanent_area-->
・個別記事のみで表示させる場合に囲む
< !--not_permanent_area--> ~ < !--/not_permanent_area-->
トップページでは表示させても
個別記事に移動したときに表示させたくないものは
< !--permanent_area-->< !--/permanent_area-->で囲み、
個別記事だけで表示させたいものについては、
< !--not_permanent_area-->< !--/not_permanent_area-->で囲むと
個別記事以外では表示されない。
あるいは、トップページと,個別記事で扱いを変えたい記事などに対応。
>トップページでは記事の上部に表示され、個別記事では記事の下部に表示されるというように。
以下では、トップページではタイトル部に表示されたプラグイン3が、個別記事では一番下で表示される
< div class="entry_header">
< body id="top">
< div id="center-left">
< div id="center">
< !--not_permanent_area-->
< !--plugin-->
< !--plugin_third-->
-----------プラグイン3のタグ--------------
< !--/plugin_third-->
< !--/plugin-->
< !--/not_permanent_area-->< /span>
< /div>
< div class="entry_body">
< %topentry_body>
< !--permanent_area-->
< !--plugin-->
< !--plugin_third-->
-----------プラグイン3のタグ--------------
< !--/plugin_third-->
< !--/plugin-->
< !--/permanent_area-->
< /div>< !--/ entry body -->
スポンサーサイト
css7.valueの文字列を改行する
燈明日記
http://d.hatena.ne.jp/chaichanPaPa/20100117/1263693373 より、
[WEB] ボタンのvalueで改行するには
input要素のtype属性が"submit"や"button"の場合で、value属性の文字列を改行するには、
実体参照で a「&#13;」、b「&#10;」、c「&#13;&#10;」を入れる。
a:<input type="submit" value="aaaaa&#13;aaaaa&#13;aaaaa&#13;aaaaa">
b:<input type="submit" value="aaaaa&#10;aaaaa&#10;aaaaa&#10;aaaaa">
c:<input type="submit" value="aaaaa&#13;&#10;aaaaa&#13;&#10;aaaaa&#13;&#10;aaaaa">
IE7では、a、b、c、どれも改行されるが、最後の行の先頭にスペースが入ってしまう。
Firefox、chromでは、b、c、のみ改行、a、は改行されない。
Operaでは、a、b、c、どれも改行されない。
http://d.hatena.ne.jp/chaichanPaPa/20100117/1263693373 より、
[WEB] ボタンのvalueで改行するには
input要素のtype属性が"submit"や"button"の場合で、value属性の文字列を改行するには、
実体参照で a「&#13;」、b「&#10;」、c「&#13;&#10;」を入れる。
a:<input type="submit" value="aaaaa&#13;aaaaa&#13;aaaaa&#13;aaaaa">
b:<input type="submit" value="aaaaa&#10;aaaaa&#10;aaaaa&#10;aaaaa">
c:<input type="submit" value="aaaaa&#13;&#10;aaaaa&#13;&#10;aaaaa&#13;&#10;aaaaa">
IE7では、a、b、c、どれも改行されるが、最後の行の先頭にスペースが入ってしまう。
Firefox、chromでは、b、c、のみ改行、a、は改行されない。
Operaでは、a、b、c、どれも改行されない。
css6. max-width
表示部分の画像の最大値を指定
.body img {
max-width: 100%;
}
↓
<div class="body">
・
・(この部分に表示される画像の最大値を100%に指定。自動的に縮小表示される)
・
</div><!--body-->
.body img {
max-width: 100%;
}
↓
<div class="body">
・
・(この部分に表示される画像の最大値を100%に指定。自動的に縮小表示される)
・
</div><!--body-->
css5.長さの単位
長さの単位/
相対単位
em :1em = 1文字分の高さ
ex :1ex = 「x」文字の高さ
px :1px = 画面上の1ピクセル
絶対単位
pt :72pt = 1in(1インチ:2.54cm)
pc :1pc = 12pt
css4.position
position : ボックスの配置方法を指定するプロパティ
値/
static :通常の位置に配置 (初期値)
static を指定した場合は、ボックスの配置位置の指定は無効になる。
relative :通常の位置を基準とした相対的な配置
absolute :ウィンドウまたは親ボックスを基準とした絶対的な配置
祖先要素に位置決めされた要素がある場合は、その要素の位置を基準にする。
ない場合は、ウィンドウの枠を基準とした配置。
位置決めされた要素 : positionで static 以外の値が指定された要素.
fixed :ウィンドウを基準とした絶対的な配置 + 位置の固定
*IE6以下では非対応。IE7では「互換モード」の場合機能しない。
sample code/
div {
width: 200px;
height: 100px;
position: relative;
position: absolute;
position: fixed;
top: 50px;
left: 50px;
right: 10em;
bottom: 10em;
* 指定 :上から、左から、右から、下からの距離+数値単位,%
}
css3.IEには使えない表記_背景色・背景画像
background: #*** url(xx/x.gif) repeat-y right top fixed;
このような一括表記は、IEではスルーされる、らしい。
従って、以下のように個々に指定するのが確実。
background-color: ***; ページの背景色を指定する
background-image: url(***); ページの背景に画像を使う
background-repeat: ***; 背景画像の並び方を指定する
background-position: ***; 背景画像の表示位置を指定する
background-attachment: fixed;
css2.ブラウザによって表記が違う
ブラウザによってプロパティの頭に付ける ベンダープレフィックス(接頭辞) が違う?!、、だけじゃない!
>>>同じ値の複数表記の必要
-moz- >> Firefox
-webkit- >> Safari、Google Chrome
-o- >> Opera
-ms- >> Internet Explorer
例えば、
プロパティ border-image (画像ボーダーを指定する)では、
border-image: url("img/a.png") 15 round;
-moz-border-image: url("img/a.png") 15 round;
-webkit-border-image: url("img/a.png") 15 round;
-o-border-image: url("img/a.png") 15 round;
-ms-border-image: url("img/a.png") 15 round;
と、各ブラウザ向けの表記をする以外に、
現在、CSS3が審議中で仕様変更・一部機能の廃止・新機能の追加が行われる可能性があることから。
ベンダープレフィックス無しの指定も併記しておく。
すでに、一部がベンダープレフィックス無しで動作するようになっていたり、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあるため。
ただし、IEのシェアが大きい日本では、IE6~8ではほとんどのプロパティに対応していないため、
無効になってしまう。
>>>CSS3は使わないのが無難。
もしくは、IEでは表示されないことを前提に、別のデザインを指定する。
付記:IEで使えるプロパティ
IE6~9 >> CSS FontFace
IE8~9 >> Box Sizing, Display: table, Generated Content, DataURI
IE9 >> RGBA, HSLA, RGBA, Background Size, Multiple Backgrounds, Border Radius, Box Shadow, Opacity, CSS Transforms, , Media Queries
付記2:使えるIE6~9がないプロパティ(FIREFOX,OPERA,CHROMEでは使える)
Border Image, Text Shadow, CSS Animations, CSS Columns, CSS Gradients, CSS Transitions
>>>同じ値の複数表記の必要
-moz- >> Firefox
-webkit- >> Safari、Google Chrome
-o- >> Opera
-ms- >> Internet Explorer
例えば、
プロパティ border-image (画像ボーダーを指定する)では、
border-image: url("img/a.png") 15 round;
-moz-border-image: url("img/a.png") 15 round;
-webkit-border-image: url("img/a.png") 15 round;
-o-border-image: url("img/a.png") 15 round;
-ms-border-image: url("img/a.png") 15 round;
と、各ブラウザ向けの表記をする以外に、
現在、CSS3が審議中で仕様変更・一部機能の廃止・新機能の追加が行われる可能性があることから。
ベンダープレフィックス無しの指定も併記しておく。
すでに、一部がベンダープレフィックス無しで動作するようになっていたり、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあるため。
ただし、IEのシェアが大きい日本では、IE6~8ではほとんどのプロパティに対応していないため、
無効になってしまう。
>>>CSS3は使わないのが無難。
もしくは、IEでは表示されないことを前提に、別のデザインを指定する。
付記:IEで使えるプロパティ
IE6~9 >> CSS FontFace
IE8~9 >> Box Sizing, Display: table, Generated Content, DataURI
IE9 >> RGBA, HSLA, RGBA, Background Size, Multiple Backgrounds, Border Radius, Box Shadow, Opacity, CSS Transforms, , Media Queries
付記2:使えるIE6~9がないプロパティ(FIREFOX,OPERA,CHROMEでは使える)
Border Image, Text Shadow, CSS Animations, CSS Columns, CSS Gradients, CSS Transitions
css1.プロパティ・セレクタ とIE
css プロパティ,セレクタ,とは・・・
セレクタ { プロパティ:-----値----- }
css3プロパティを使えば、こんなことができる?!!
border-radius(角丸)
box-shadow(陰影)
border-image(ボーダー画像)
multiple background images(背景画像の複数指定)
linear-gradient( as background image)(グラデーション)
* IEでは適用されない! >>> ケイタイ・スマホで利用(IE はまだ少数派らし??)
* ただし、jsを使えば、IEでもある程度の効果を期待できる、らしい?
詳しくは以下サイトさま・・・
【Selectivizr】CSS3セレクタをIE(6~8)で使いたーい【万能】
IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」
* 大ざっぱには、以下二つのjs(javascript)をDL、コピペなどしてjsファイルを作りアプロード、
<head> にtagを記入する、、らし。
1.Selectivizr >>>
2.jsライブラリ・・・これは複数あるので、選択、組み合わせて使う。
jQuery >>> ・・・Google Libraries API が簡単らしい。(以下を< head > に記入するだけ ?!!)
>> < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">< / script >
他に、
Dojo >>>
Prototype >>>
ようするに、<head> には以下?!( jQueryの場合 )
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script >
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js を使うjs にあわせて変える。
** 注意点
CSSは外部ファイルに記述する,
ローカルでは動かない >> サーバにアップして動作確認
*** 結論を言えば、とってもめんどくさい!!!!
こんな言葉がある? プログレッシブ・エンハンスメント
要するにChrome、Safari、Firefox等のモダンブラウザを使っている環境の整ったユーザーに対してはリッチなコンテンツを提供しようという考え方、
平たくいえば、IEなんか使っている人は、まあ、好きにやってください、というか・・・
IEユーザーが減れば、IEも考えるだろう、というか・・・^o^;;;
セレクタ { プロパティ:-----値----- }
css3プロパティを使えば、こんなことができる?!!
border-radius(角丸)
box-shadow(陰影)
border-image(ボーダー画像)
multiple background images(背景画像の複数指定)
linear-gradient( as background image)(グラデーション)
* IEでは適用されない! >>> ケイタイ・スマホで利用(IE はまだ少数派らし??)
* ただし、jsを使えば、IEでもある程度の効果を期待できる、らしい?
詳しくは以下サイトさま・・・
【Selectivizr】CSS3セレクタをIE(6~8)で使いたーい【万能】
IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」
* 大ざっぱには、以下二つのjs(javascript)をDL、コピペなどしてjsファイルを作りアプロード、
<head> にtagを記入する、、らし。
1.Selectivizr >>>
2.jsライブラリ・・・これは複数あるので、選択、組み合わせて使う。
jQuery >>> ・・・Google Libraries API が簡単らしい。(以下を< head > に記入するだけ ?!!)
>> < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">< / script >
他に、
Dojo >>>
Prototype >>>
ようするに、<head> には以下?!( jQueryの場合 )
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script >
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js を使うjs にあわせて変える。
** 注意点
CSSは外部ファイルに記述する,
ローカルでは動かない >> サーバにアップして動作確認
*** 結論を言えば、とってもめんどくさい!!!!
こんな言葉がある? プログレッシブ・エンハンスメント
要するにChrome、Safari、Firefox等のモダンブラウザを使っている環境の整ったユーザーに対してはリッチなコンテンツを提供しようという考え方、
平たくいえば、IEなんか使っている人は、まあ、好きにやってください、というか・・・
IEユーザーが減れば、IEも考えるだろう、というか・・・^o^;;;
プロフィール
Author:usagi
FC2ブログへようこそ!
information
2015.2.8_23:12
管理人のみ閲覧のコメントを下さるみなさまへ
管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。
お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。
管理人のみ閲覧のコメントを下さるみなさまへ
管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。
お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。
最新記事
最新コメント
カテゴリ ・