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を書かれた方の思いが
ヘルプページを作られた方にまで伝わっていないような気がします