blogタイトルと本文の文字サイズ・色
tempによっていろいろある、下は一例です。（U-BOXv08Sora-binを使用）
本文の文字サイズ・色
css_________________________
body {
background-color: #fff;
color: #6e727f;/*230-13-50*/
font-size: 12px;
line-height: 160%;
font-family: arial,"ＭＳ Ｐゴシック",sans-serif;
margin: 0;
pading: 0;
}
blogタイトルの文字サイズ・色
HTML______________________＿
< div id="top">
< h1>< a href="< %url>">< %blog_name>< /a>< /h1> ・・・blogタイトル
< h2>< %introduction>< /h2> ・・・サブタイトル
< /div>< !--top-->
css_________________________
h1 {
font-family: sans-serif, Verdana, "メイリオ", Meiryo;
color: #373a49;/*228-25-29*/
} ・・・blogタイトルの文字サイズ、サイズ指定がないのでデフォルト
（h1のデフォルト＝本文文字サイズの200%）
h2 {
font-size:130%; ・・・サブタイトルの文字サイズ（本文文字サイズの130%）
margin-left: 3%;
}
* h2はblog内の見出しにも使われているため、サイズを指定するときは使用箇所ごとの指定が望ましかったりする
・
・
・
/ * header */
#top {
color: #080e26; /*228-25-29*/・・・サブタイトルの色
width: 99.8%;
margin: 0 0.1% 0 0.5%;
padding: 1em 0 9.5em;
word-break: break-all;
}
#top h1 a:link, #top h1 a:visited {color: #080e26} /*228-77-15*/・・・blogタイトルの色
#top h2 {
font-weight: normal;
margin: 0.5em 0 0 0.3em;
}
blogタイトル、サブタイトルの文字サイズの変更例(赤字挿入)
#top h1 a:link, #top h1 a:visited {
color: #080e26; /*228-77-15*/
font-size: 24px;
}
#top h2 {
font-size: 16px;
font-weight: normal;
margin: 0.5em 0 0 0.3em;
}
* サイズはpxで指定すると本文文字サイズに影響されない。
* 上記は本文12pxのときの%指定をpx換算した数字です。この数字を希望のものに変更する。
本文の文字サイズ・色
css_________________________
body {
background-color: #fff;
color: #6e727f;/*230-13-50*/
font-size: 12px;
line-height: 160%;
font-family: arial,"ＭＳ Ｐゴシック",sans-serif;
margin: 0;
pading: 0;
}
blogタイトルの文字サイズ・色
HTML______________________＿
< div id="top">
< h1>< a href="< %url>">< %blog_name>< /a>< /h1> ・・・blogタイトル
< h2>< %introduction>< /h2> ・・・サブタイトル
< /div>< !--top-->
css_________________________
h1 {
font-family: sans-serif, Verdana, "メイリオ", Meiryo;
color: #373a49;/*228-25-29*/
} ・・・blogタイトルの文字サイズ、サイズ指定がないのでデフォルト
（h1のデフォルト＝本文文字サイズの200%）
h2 {
font-size:130%; ・・・サブタイトルの文字サイズ（本文文字サイズの130%）
margin-left: 3%;
}
* h2はblog内の見出しにも使われているため、サイズを指定するときは使用箇所ごとの指定が望ましかったりする
・
・
・
/ * header */
#top {
color: #080e26; /*228-25-29*/・・・サブタイトルの色
width: 99.8%;
margin: 0 0.1% 0 0.5%;
padding: 1em 0 9.5em;
word-break: break-all;
}
#top h1 a:link, #top h1 a:visited {color: #080e26} /*228-77-15*/・・・blogタイトルの色
#top h2 {
font-weight: normal;
margin: 0.5em 0 0 0.3em;
}
blogタイトル、サブタイトルの文字サイズの変更例(赤字挿入)
#top h1 a:link, #top h1 a:visited {
color: #080e26; /*228-77-15*/
font-size: 24px;
}
#top h2 {
font-size: 16px;
font-weight: normal;
margin: 0.5em 0 0 0.3em;
}
* サイズはpxで指定すると本文文字サイズに影響されない。
* 上記は本文12pxのときの%指定をpx換算した数字です。この数字を希望のものに変更する。
スポンサーサイト
jQuery-memo
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
v24shine, v28shine2, v29mono, v45mono2, v47woody2, v48cosmos, v49sky, v50cosmos2, v51sky2, s01_1sky,
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
v25cloud, v26cloud2, v27cloud3,
http://code.jquery.com/jquery-1.7.1.min.js
v31sakura, v32sakura2, v33sakura3, v33_2reef, v33_3mw_sea, v34kamiW, v35floral, v36g3tyou, v37krage, v37_2shark, v38flo01, v39flo02, v40voyage, v41mjL, v42flo03, v43green, v44green2, v46woody,
2014/10/19 03:58:58
tab-.jsdisp1～7, tab1～7
s01_1sky,
2014/10/19 08:48:11
accordion-s2.js.write2, .write2i, .body3 h3
s01_1sky,
2014/10/17 05:51:50
accordion0mov.js.sub_menu0, .main_list0 a
s01_1sky,
2014/09/21 21:37:14
accordion-v45.js.write2, .body3 h3
v45mono2, v47woody2, v48cosmos, v49sky, v50cosmos2, v51sky2,
2014/09/21 21:37:13
accordion.js.accordion p, ul, span, .accordion dt, dd
2013/10/06 22:33:29
slidetogglesample-v25.js.write2, .body3 h3
v25cloud, v26cloud2, v27cloud3,
2014/09/20 22:15:09
pagetop300-500.js#pagetop, #pagetop a
v25cloud, v26cloud2, v27cloud3, v28shine2, v29mono, v31sakura, v32sakura2, v33sakura3, v33_2reef, v33_3mw_sea, v34kamiW, v35floral, v36g3tyou, v37krage, v37_2shark, v38flo01, v39flo02, v40voyage, v41mjL, v42flo03, v43green, v44green2, v46woody, v47woody2, v48cosmos, v49sky, v50cosmos2, v51sky2, s01_1sky,
2014/09/20 21:27:50
scrolltopcontrol100-500.js#pageTop
v24shine, v45mono2,
2014/09/14 01:08:49
PIE.js
2014/09/14 00:55:13
selectivizr.js
http://html5shiv.googlecode.com/svn/trunk/html5.js
http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js
v48cosmos, v49sky, s01_1sky,
*
- color_code
- tb: 0
- cm: 0
- [ edit ]
color
{ color: #00ffff } /*180-100-100*/
{ color: #c7cce2 } /*230-12-89*/
{ color: #3d4f96 } /*227-59-58*/
{ color: #051e84 } /*228-96-52*/
{ color: #6e717f } /*230-13-50*/
{ color: #393d4f } /*229-27-30*/
{ color: #373b49 } /*228-25-29*/
{ color: #373a49 } /*230-24-28*/
{ color: #121212 } /*0-0-7*/
{ color: #c7cce2 } /*230-12-89*/
{ color: #3d4f96 } /*227-59-58*/
{ color: #051e84 } /*228-96-52*/
{ color: #6e717f } /*230-13-50*/
{ color: #393d4f } /*229-27-30*/
{ color: #373b49 } /*228-25-29*/
{ color: #373a49 } /*230-24-28*/
{ color: #121212 } /*0-0-7*/
{ color: #eee } /*0-0-93*/
{ color: #ddd } /*0-0-86*/
{ color: #ccc } /*0-0-80*/
{ color: #bbb } /*0-0-73*/
{ color: #aaa } /*0-0-66*/
{ color: #999 } /*0-0-60*/
{ color: #888 } /*0-0-53*/
{ color: #808080 } /*0-0-50*/gray
{ color: #777 } /*0-0-46*/
{ color: #666 } /*0-0-40*/
{ color: #555 } /*0-0-33*/
{ color: #444 } /*0-0-26*/
{ color: #333 } /*0-0-20*/
{ color: #222 } /*0-0-13*/
{ color: #1e1e1e } /*0-0-12*/
{ color: #1c1c1c } /*0-0-11*/
{ color: #191919 } /*0-0-10*/
{ color: #161616 } /*0-0-9*/
{ color: #141414 } /*0-0-8*/
{ color: #121212 } /*0-0-7*/
{ color: #111 } /*0-0-6*/
{ color: #0c0c0c } /*0-0-5*/
{ color: #0a0a0a } /*0-0-4*/
{ color: #070707 } /*0-0-3*/
{ color: #050505 } /*0-0-2*/
{ color: #020202 } /*0-0-1*/
{ color: #ddd } /*0-0-86*/
{ color: #ccc } /*0-0-80*/
{ color: #bbb } /*0-0-73*/
{ color: #aaa } /*0-0-66*/
{ color: #999 } /*0-0-60*/
{ color: #888 } /*0-0-53*/
{ color: #808080 } /*0-0-50*/gray
{ color: #777 } /*0-0-46*/
{ color: #666 } /*0-0-40*/
{ color: #555 } /*0-0-33*/
{ color: #444 } /*0-0-26*/
{ color: #333 } /*0-0-20*/
{ color: #222 } /*0-0-13*/
{ color: #1e1e1e } /*0-0-12*/
{ color: #1c1c1c } /*0-0-11*/
{ color: #191919 } /*0-0-10*/
{ color: #161616 } /*0-0-9*/
{ color: #141414 } /*0-0-8*/
{ color: #121212 } /*0-0-7*/
{ color: #111 } /*0-0-6*/
{ color: #0c0c0c } /*0-0-5*/
{ color: #0a0a0a } /*0-0-4*/
{ color: #070707 } /*0-0-3*/
{ color: #050505 } /*0-0-2*/
{ color: #020202 } /*0-0-1*/
v01LeoRed
v01LeoRed_公開(7/30.申請,8/2.承認)
PC版サンプル（画像をクリックするとサンプルページを見ることが出来ます)
>>DL
001_U-BOX のバリエーションです。
2カラム。固定幅。750px。
記事部分 480px。サイドバー 210px。
font-size: 12px;
カラム幅を超える画像は縮小表示されます。
PC版サンプル（画像をクリックするとサンプルページを見ることが出来ます)
>>DL001_U-BOX のバリエーションです。
2カラム。固定幅。750px。
記事部分 480px。サイドバー 210px。
font-size: 12px;
カラム幅を超える画像は縮小表示されます。
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)をＤＬ、コピペなどして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)をＤＬ、コピペなどして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^;;;
テンプレートの利用規約
テンプレートで使用している画像の著作権はusagiにあります。
(一部例外もあります.記載有り。)
以下、テンプレを使用していただくにあたり、守って欲しいことです。
よろしく願い致します。m(_ _)m
使用禁止ブログ
違法なことをしているブログ（著作権侵害・肖像権侵害含む）
著作権侵害・肖像権侵害とは…
他人の画像を勝手に加工して配布していたり、写真掲載不可なタレントさんの写真を掲載していたり、JASRAC（日本音楽著作権協会）のマークがないのにアイドルやアーティストの曲のMIDIの使用や歌詞を掲載していたり、動画サイト（YouTube等）にUPされているアーティストのPVやアニメ等の動画を勝手に掲載しているブログのことです。
テンプレートを使用するにあたっての禁止事項
画像の加工は禁止です。
画像の二次使用は著作権表示(Photo by U-BOX)でOKです。
画像・テンプレートの再配布は禁止です。
著作権表示(Template by usagi 等）を消すことは禁止です。
テンプレートのカスタマイズはOKです。
以上です。
規約を守ってお使いくださ。
基本的にリクエストは受け付けておりません。
ただ、「こういうのを作成して欲しい」というご希望がありましたらコメントにて残してください。
必ずとはいえませんが、時に応じて試みたいと思います。
テンプレの使用報告や不具合等につきましては、使用したテンプレの記事にコメントしていただければ幸いです。
不具合などは可能な限り修正いたします。
(一部例外もあります.記載有り。)
以下、テンプレを使用していただくにあたり、守って欲しいことです。
よろしく願い致します。m(_ _)m
使用禁止ブログ
違法なことをしているブログ（著作権侵害・肖像権侵害含む）
著作権侵害・肖像権侵害とは…
他人の画像を勝手に加工して配布していたり、写真掲載不可なタレントさんの写真を掲載していたり、JASRAC（日本音楽著作権協会）のマークがないのにアイドルやアーティストの曲のMIDIの使用や歌詞を掲載していたり、動画サイト（YouTube等）にUPされているアーティストのPVやアニメ等の動画を勝手に掲載しているブログのことです。
テンプレートを使用するにあたっての禁止事項
画像の加工は禁止です。
画像の二次使用は著作権表示(Photo by U-BOX)でOKです。
画像・テンプレートの再配布は禁止です。
著作権表示(Template by usagi 等）を消すことは禁止です。
テンプレートのカスタマイズはOKです。
以上です。
規約を守ってお使いくださ。
基本的にリクエストは受け付けておりません。
ただ、「こういうのを作成して欲しい」というご希望がありましたらコメントにて残してください。
必ずとはいえませんが、時に応じて試みたいと思います。
テンプレの使用報告や不具合等につきましては、使用したテンプレの記事にコメントしていただければ幸いです。
不具合などは可能な限り修正いたします。
プロフィール
Author:usagi
ＦＣ２ブログへようこそ！
information
2015.2.8_23:12
管理人のみ閲覧のコメントを下さるみなさまへ
管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。
お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。
管理人のみ閲覧のコメントを下さるみなさまへ
管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。
お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。
最新記事
最新コメント
カテゴリ ・