プロセルピナ
Top Internet
Mail 		Private
Proxy 		Capture
Device 		Download Config
and
Words 		Online
Help 		Online
Home
[BACK]
☞ Top > PrivateProxy > AntiAd > Edit > mixi > create > css_infoファイル
 

PROSERPINE AntiAd

 ♕ css_infoファイルの編集
  (mixi cstomize)




このページでは、 mixiカスタマイズデータ(配色カスタマイズ用のgif画像とCSSのセット) を作成する手順を説明しています。

 既に作成され公開されているmixiカスタマイズデータを使用するだけの場合は、 「mixi画面のカスタマイズについて」 を参照してください。

 

css_infoファイルはどこにある？


 サンプルデータ black.zip(黒背景用のmixiカスタマイズデータ) に含まれます。

もちろん最初から新規に作成することも、サンプルデータを改造することもできます。

 

cssファイルは編集しないでください


 マクロで出力される cssファイル をテキストエディタなどで直接に編集しないようにしてください。
cssファイルが意図したとおりに編集されるように、 css_infoファイル を編集してください。
このルールを守ることにより、css出力が自動化できます。 自動化されていないと、サイトレイアウト変更に素早く対応できません。

 

css_infoファイルの例


 サンプルデータ(black.zip)に含まれる css_infoファイルのうち、 明るい背景色用にリンクの文字色を変更した reset.css_info の例を次に示します。



【NOTE】 サンプルデータの reset.css_info との相違点は color:指定の５箇所だけです。

 

css_infoファイルの概要


 マクロ「mixi_CssFinisher.txt」 は、 マクロ mixi_CssUpdate.txt で作成した css_srcファイル を入力にして、 cssファイル を作成します。
(実際には マクロ mixi_CssUpdate.txt は マクロ mixi_CssAllUpdate.txt から起動されるのみで、また、 マクロ mixi_CssFinisher.txt は マクロ mixi_CssAllFinisher.txt から起動されるのみなので、普通、ユーザが起動するのは、 mixi_CssAllUpdate.txt と mixi_CssAllFinisher.txt のマクロになります。)

マクロ mixi_CssFinisher.txt で参照される設定ファイルは、次の４つです。

   ・ CSSカスタマイズ設定ファイル mixiCssList.txt
  ・ 共通replaceInfoファイル $for_all_css.replaceInfo
  ・ 個別replaceInfoファイル
  ・ css_infoファイル

 共通replaceInfoファイルと個別replaceInfoファイルを使ってできる編集は、単純置換のみです (詳細は マクロ mixi_CssFinisher.txt を参照)。
それ以外の編集は css_infoファイル を使用します。

マクロ mixi_CssAllUpdate.txt で一括作成される css_srcファイル は、cssファイルの元になるもですが、 背景色と文字色の定義は全てコメントアウトされています。
これにより基底になるcssファイルで背景色と文字色を指定するだけで、全ての定義に反映させることができます。
mixiでは、この基底になるcssファイルは reset.css になります (static_css/basic/reset.css)。 つまり、 reset.css には 背景色と文字色の定義が必要です。これを行うのが css_infoファイル を使用した処理です。

また、 CSSカスタマイズ設定ファイル mixiCssList.txt には、リンクの色を指定する箇所はありません。
これを指定するときも css_infoファイル を使用して reset.css に編集することになります。

まず、 reset.css_srcファイルの body定義(背景色と文字色を指定している部分)と、 reset.css_infoファイルの body定義を編集する指定を示します。
reset.css_srcのbody定義
reset.css_infoのbody定義を編集する「コマンドブロック」

上記のように reset.css_src では、 CSSカスタマイズ設定ファイル mixiCssList.txt で指定したとおりに color: と background: の色指定が変更されていますが、 それらはコメントアウトされています。

reset.css_info には、先頭行に目的のcss定義の名前を指定します。 body定義を編集する場合は
  body
と記述します。
次の行からはコマンドです。この例では 「use:コマンド」、 「add:コマンド」 の２つがあります。
この３行をまとめて１つの「コマンドブロック」といいます。

use:コマンドは、 「use: string」の書式で、stringで開始される行のコメントを外し、指定を有効にします。
add:コマンドは、 「add: string」の書式で、stringを定義に追加します。
上記例にあるように、add:コマンドで追加する定義には、 [#背景] や [#URL] のようなメタ定義が使用できます。
[#背景] は CSSカスタマイズ設定ファイル mixiCssList.txt の background color: で設定されている背景色を指定するメタ定義で、 [#URL] は site: で設定されているURLになります。

マクロ mixi_CssFinisher.txt の実行結果(reset.css)のうち、 body定義に関する部分は次のようなものになります。
生成されたreset.cssの body定義部分

css_infoファイルの 区切り(コマンドブロック終端記号) は１つの「改行のみの行」です。
改行のみの行があるまで、コマンドとして処理されます。
改行が発見されると、コマンドブロックはそこで終了となり、 その次の行はコマンドブロック先頭である「CSS定義を指定している行」と解釈され、 そのCSS定義が検索されます。
次の例は５つのCSS定義を対象とする例です。 ５つのコマンドブロックに、それぞれコマンドを１行含んでいます。
reset.css_info (部分)

css_infoファイルの作成は、css_srcファイルを見ながら、変更したい箇所をメモしていくような感じで作成します。
このようにして一度css_infoファイルを作成しておけば、 マクロ mixi_CssFinisher.txt を起動するだけでいつでも簡単にcss_srcファイルからcssファイルを生成することができます。
そしてそのcss_srcファイルは マクロ mixi_CssUpdate.txt により、 mixiの最新cssからいつでも簡単に作成することができます。

コマンドには他に、削除する「del:コマンド」、 (「use:コマンド」とは逆に)コメント化する「cmt:コマンド」、 置換を行う「rpl:コマンド」 などがあります。

css_infoファイルは UTF-8 のエンコードで記述します。上記例では半角英数字のみしか出現していませんが、 日本語や全角記号が含まれる場合は注意してください。 特に「rpl:コマンド」ではUTF-8以外では文字化けする記号を使います。
mixiのcssは、euc-jpとUTF-8の２種類のエンコードが混在している状況ですが、 マクロによって生成されたcss_srcファイルは、UTF-8エンコードに統一されています (css_srcファイルの先頭行は必ず 「@charset "utf-8";」 です)。

 

css_infoファイルのCSS定義指定方法


 上記の body定義 を編集する例では、コマンドブロック先頭行は body と書くだけでした。
次のような カンマで区切られた複数の指定をもつCSS定義 を、編集の対象としたい場合は どうなるでしょうか。
例: css_srcファイル (部分)

 この場合、コマンドブロック先頭行は、
  input,textarea,select
と記述します。
途中で改行が入る場合は、
  [CRLF]
で改行を表します。たとえば、
例: css_srcファイル (部分)

 この場合は、
  input,[CRLF]textarea,select
と記述します。

特殊な例として、直前のコメントを含めた指定をすることができます。
次の例は #headerArea の定義を対象としたコマンドブロックですが、直前のコメント /*---- HeaderArea ----*/ まで含めて検索します。
例: css_infoファイル (部分)

 このような指定をした場合、次のようなcss_srcファイルに対しては、下側の #headerArea だけが対象となります。
例: css_srcファイル (部分)

よって、マクロの実行結果は次のようになります。


cssファイル (マクロ実行結果)

#headerArea とだけ指定した場合、先に発見される上側の定義を対象とすることに注意してください。
その場合、１つ定義を発見すれば、他を探すことはないので、下側の定義には変化はありません。

直前の行のコメントで対象としたい定義の区別がつく場合は、このような方法で指定します。 この方法では区別できない場合は、
  ＠MARKER→→css_string
といった、少々複雑な指定をします。
これは MARKER の文字列が発見された以降にある css_string を対象とする意味になります。
＠記号、→→記号 は全角文字です。
例: css_infoファイル
 

css_infoファイルのコマンド


 具体例は css_infoファイルのサンプル common.css_info などを参照にしてください。

add:コマンド
【書式】 add: css_string
css_stringを追加します。

 [#背景] や [#URL] のようなメタ定義が使用できます。

del:コマンド
【書式】 del: css_string
css_stringで開始される行を削除します。

cmt:コマンド
【書式】 cmt: css_string
css_stringで開始される行をコメントアウト(無効化)します。

use:コマンド
【書式】 use: css_string
css_stringで開始されているコメント行を、有効化します。

//コマンド
【書式】 // comment_string
comment_stringはcss_infoファイルのコメントです。この行は単純に無視されます。

rpl:コマンド
【書式】 rpl: css_string,,,src_string♐»»new_string
css_stringで開始される行に対し、src_stringの文字列をすべてnew_stringに置換します。

*コマンド
【書式】 *
次の *(半角アスタリスク) だけの行までの間を、cssファイルの末尾にそのまま追加します。
「*コマンド」は、それだけで１つのコマンドブロックです。コマンドブロックの先頭行が *(半角アスタリスク) になります。
具体例は css_infoファイルのサンプル common.css_info を参照にしてください。
追加される位置はcssファイルの末尾です、位置を指定することはできません。

 [#背景] や [#URL] のようなメタ定義が使用できます。

 

コマンドで使えるメタ定義


 add:コマンド と *コマンド で、メタ定義が使えます。

[#背景]
CSSカスタマイズ設定ファイルの background color: で設定されている背景色を指定するメタ定義。

[#URL]
CSSカスタマイズ設定ファイルの site: で設定されているURLを指定するメタ定義。

[#文字]
CSSカスタマイズ設定ファイルの font color: で設定されている文字色を指定するメタ定義。

[#枠]
CSSカスタマイズ設定ファイルの border color: で設定されている枠色を指定するメタ定義。
[BACK]
プロセルピナ