CSS CSSの編集・・・
前回の記事 ・・・CSSが消えた場合の救出方法ですが・・・
適当なサンプルがまだ見つかりませんので
先にこちらの説明から・・・・
-------------------------------------------------------------------
注意です・・・・・・
この記事を書いているからといって
カスタマイズ用スキンに「ベーシック」を薦めているわけではありません
あくまでカスタマイズ用には「グリーン」「ブルー」「ピーチ」「グレイ」だと思っています
CSSの保存は忘れずに！
-------------------------------------------------------------------
昨日のスタッフブログでアナウンスされました
で、紹介されている
カスタマイズ用スキン「ベーシック」のCSSが少し使いやすくなっているようです
はっきり言って
たいしたことはできないのですが
少しでもわかりやすくという趣旨は大歓迎です
ただ・・・・ これ以外のスキンの場合で
CSS編集出来るスキンなのか出来ないスキンなのかが
実際にスキンを選択して保存するまでわからないのはどうなんでしょうか？
どうせならそこまで気を使っていただきたかったです・・・・
CSSを見てみると・・・・
/*============ ☆ かんたんスキンカスタマイズはこちら ☆ ==============*/
/*:(コロン)と、;(セミコロン)の間に色、画像、サイズなどを指定して下さい*/
/*１）ブログタイトルの文字サイズを変更する*/
#header h1{
font-size: 3.0em; /*-- 25px相当の文字サイズ --*/
}
/*２）ブログタイトルの文字色を変更する*/
#header h1 a{
color:#333333; /*-- 濃いグレー --*/
}
/*３）ブログ説明の文字サイズを変更する*/
#header h2{
font-size: 1.0em; /*-- 12px相当の文字サイズ --*/
}
/*４）ブログ説明の文字色を変更する*/
#header h2{
color:#333333; /*-- 指定なし --*/
}
/*５）ページ背景に画像を入れる*/
body{
background-image:url();
}
/*６）ページ全体の文字色を変更する*/
body{
color: #333333; /*-- 濃いグレー --*/
}
/*７）記事タイトルの背景色を変更する*/
.entry h3.title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
}
/*８）記事タイトルの文字色を変更する*/
.entry h3.title{
color: #333333; /*-- 濃いグレー --*/
}
/*９）サイドバーの見出し文字色を変更する*/
h4.menu_title{
color: #333333; /*-- 濃いグレー --*/
}
/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
}
/*===================================================================*/
と・・・初心者の方にもさわりやすくなっています
本当にカンタンカスタマイズで・・・
かんたんに変更方法がわかるのはコレだけです・・・・・
その下には・・・・
/*============ ★ その他のスキンカスタマイズはこちら ★ ==============*/
/*
目次
■スキン基本設定
+--基本設定
+--デザインカスタマイズ
+--リンク
+--リンク：訪問済み
+--リンク：マウスオーバー時
+--コンテンツ全体
+--メインカラム
+--サイドカラムA
+--サイドカラムB
■ヘッダー
+--基本設定
+--デザインカスタマイズ
+--ブログタイトル
+--ブログ説明
■メインカラム
+--基本設定
+--デザインカスタマイズ
+--メッセージボード
+--記事
+--トラックバック
+--コメント
+--読者一覧
+--お気に入りブログ一覧
+--ブックマーク一覧
+--最新記事一覧
■サイドA(sub_a)&サイドB(sub_b)
+--基本設定
+--デザインカスタマイズ
+--モジュールタイトル
+--プロフィール
+--ブログの読者
+--カレンダー
+--プラグイン
■フッター
+--基本設定
*/
/*===================================================================*/
って・・・・
目次まで付いてるよ～
アメブロも親切になったもんだね～
・・・・・・って思われた あ・な・た！
今回はあなたのための記事です
親切ではありますが・・・・
便利に使うためのものなんですよ
・・・ で、
お待たせいたしました
ここからが本題です・・・・・・・・
例えばカレンダーのCSSを変更したいとします
目次をみたら下の方だから一番下から上に探した方が早いな・・・・
って・・・・使い方もできるのですが・・・・・
WindowsXPのIE6での場合・・・・
ブラウザーのメニュバーの中から 編集 → このページの検索
検索窓が現れますので
検索単語「カレンダー」を入力して [次を検索]
目次のカレンダーをコピーして貼り付けでもOKです
CSSの中から「カレンダー」を探し出して移動します
もし・・・ 修正したいCSSがこの部分でない場合は・・・
再度 [次を検索] ボタンをおすと 次の 「カレンダー」に移動します
※そのページの中から探しますので ページのCSS以外で使われていた場合も移動します
その場合でも [次を検索] を押していけば大丈夫です
それ以上なければ・・あるいは該当がない場合は 「ドキュメントの検索が完了しました」が・・・
検索する方向を 「上へ」 にすると下から上に検索していきます
例えば・・・
このブログで質問をされて
#comment_module .label{
font-size:10px;
font-color:#ff0000;
}
↓下のように変更してください
#comment_module .label{
font-size:12px;
font-color:#ff00ff;
}
にしてください・・・
なんて回答のコメントがあったとします・・・
CSSは最後に加えるようにしていますので
このように途中を変更する場合はあまりありませんが
ドンドン加えていくうちに
最後に加えたものが途中になってしまうこともありますので・・・
そんな場合は
検索する文字列に
#comment_module .label
なんて入れて検索すれば一発でその場所に・・・
※#comment_module .label{ と #comment_module .label { これは違います
{ の前にスペースがあるのとないのとで違います
#comment_module .labelで検索をすればどちらの場合でも見つかります
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
残念なことにCSSの枠の中はテキストエリア（textarea）なんです
textarea内を検索できるかどうかはお使いのブラウザーによります
textarea内の検索機能を持っていないブラウザーもあるんです
同じブラウザーでもバージョンによって出来たりできなかったりもあります
(WindowsXP)
IE6 ・・・ ○
IE7 ・・・ ○
firefox1.5 ・・・ △
firefox2 ・・・ ○
firefox3 ・・・ ○
Safari ・・・ ×
Google Chrome ・・・ ×
sleipnir ・・・ ○
Opera8 ・・・ ○
Opera9 ・・・ ○
Lunascape3 ・・・ ○
○ ： 検索可能 △ ： 移動は出来ないがマークは可能 × ： 不可能
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
Operaの場合 ・・・ ○
Firefoxの2以上は○でしたが Firefox1.5の場合は △
ブラウザーのメニュバーの 編集 → このページの検索
ブラウザーの左下に検索窓が現れます
Firefoxの2以上は○
Firefox1.5の場合・・・・
窓の中がピンクになるのは見つからなかった場合です
テキストエリア内は検索できませんでした
Firefox1.5の場合・・・・
textarea内を検索して移動は出来ませんが「すべて強調表示」にすると検索後に背景が付きます
Safari の場合は × やはりテキストエリア内は検索できません・・・
テキストエリア以外しか検索できませんでした
このブログでは
ＣＳＳはドンドン最後に付け加えていってくださいって説明しています
が
なれてきたらこのような目次を作って
ＣＳＳを整理することにチャレンジ下さい
ＣＳＳになれてきたら逆にバラバラより
こうやって同じところに固まっていた方がわかりやすく修正も楽になります
他の方にソースを覗かれても恥ずかしくないしね
そうすれば・・・ あなたは ・・・ もう ・・・ プロです（自称・・・？）
スタッフブログの冒頭で・・・・
「これまで多数お問い合わせいただいおりました、
カスタマイズが可能なスキンがわからない、方法がわからないといった
ご質問にお応えするため・・・」
と、言っておきながら
なぜ・・・・・
ここまで説明しないのでしょうか？
CSSを書かれた方は初心者のためにそこまで考えて書かれていると思います
なのに・・・・
ユーザーさまの思いがアメブロに伝わらないのと同じように
アメブロ内部でもCSSを書かれた方の思いが
ヘルプページを作られた方にまで伝わっていないような気がします
簡単スキンカスタマイズページ
スタッフブログから
簡単スキンカスタマイズページがリリースされました
http://ameblo.jp/staff/entry-10192303363.html
の、お知らせが・・・ って遅くないですか？
少し前からこれはＣＳＳに入っていましたよね
スキン「ベーシック」を使っているようですが・・・
以前はくせがあって使いにくくてこのブログではグリーン、ブルー、ピーチやグレイを使ってください
って記事にしていましたが
なおったのでしょうか？
ＣＳＳでカスタマイズをされている方は
ためしに・・・・ なんて変更しないで下さい
今までのＣＳＳがなくなってしまいますよ・・・・
試してみる場合はＣＳＳを保存してから試してください
万が一・・・・
やっちゃった場合で
今までのＣＳＳを保存していなかった場合は
絶対にＣＳＳの編集はさわらないでそのままにしておいてください
もしかしたら救える場合があります
でも・・・ＣＳＳの編集にさわってしまうと絶対に戻りません
つづく・・・・
CSS IE6CSSハック
Plan-note のブログを作ったときに
IE6はPNGの透過画像がど～しても利用できませんでした
そのときに使ったカンタンなハックを紹介します
で、
こちら・・・・
IE6 と それ以外のブラウザーで見たときと画像が違うってご存知でしたか？
色々試しましたが・・・ ムリと判断して
IE6だけは別の透過していないPNG画像か透過GIF画像を使っています
この下にどんな画像が背景として表示されていますか？ ↓
もし・・・IE6をつかってコレをご覧になっている場合はコチラの画像・・・・
IE6 以外でご覧になっている場合はコチラが表示されていると思います
一番カンタンな方法だと思います
#ie6hcss{
background-image:url(IE6以外で表示する画像のURL) !important;
background-image:url(IE6で表示する画像のURL);
background-repeat:no-repeat;
background-position:center;
}
ここで使っている !important; どこかで見たことあると思います
CSSの適用優先順位を上げます
このブログではCSSは最後に付け加えてくださいって紹介しています
CSSは後に書かれているものの方が適用されるんです
でも !important が付いている場合は ドコに書かれていても優先して適用されます
これは同じセレクタ内で同じものを後から指定し直せば!importantが無視されるというIE6のバグ利用しています
IE6以外では !important が付いていますから当然 IE6以外で表示する画像のURL が表示されますが
IE6ではバグのため !important が無視されてＣＳＳのルール通り後に書かれている IE6で表示する画像のURL が表示されます
背景以外にも使えますのでIE6だけ・・・って困っている場合はお試し下さい
CSSハック・・・
インターネットエクスプローラ（IE）、Firefox、Opera などといったブラウザー
あるいは同じブラウザーでもバージョンによってCSSの受け取り方の違いによって表示に違いが出てくる場合があります
そんな時に各ブラウザーの特徴、バグなどを利用して同じように表示させたりする方法です