動的スタイルシートの作成

category-icon

 こんばんは。だいぶ日も長くなってきましたね。

 さて、小生のブログで、「エクセルデータをHTMLテーブルに変換」というエントリーを書いて、そこでppBlog用に見栄えの良いTABLEを作成してくれるページLink を公開していました。早速、使って下さったユーザーの方から、ppBlogをリスト表示にしていると、テーブルのスタイルシートが有効になっていないとのご指摘がありました。確かに、リスト表示での個別スタイルシート指定はすっかり対応を忘れていました。

 というわけで、ppBlogでは記事毎にスタイルシートやJavaScriptを指定することが可能ですが、あまり知られていない気もするので簡単に使い方を書いておきます。スタイルシート(CSS)を指定したければ、記事のどこでも良いので、[style][/style]で囲った中の記述がCSSとして認識されます。記述はまんまCSSと同じです。具体例を挙げると以下のような感じ。

[style]
.article-content table { border-color: tomato; }
[/style]

とか。.article-contentは、記事内容要素に対するクラス名です。記事の個別表示のときは、記事ボックスはひとつしかないので問題ありませんが、複数の記事が表示されている場合、上の例だと、別の記事にテーブルが含まれていたら(クラス名が同じため)そこにも反映されてしまいます。なので、これを回避するには、指定したい記事の固有IDを利用すると良いです。ppBlogでは、すべての記事にUID1234567890のようなIDが割り振られます。

[style]
#UID1234567890 .article-content table {
  border-color: tomato; /* IDを利用して適応先の .article-content を絞り込む */
} 
[/style]

追記 2009/02/19 18:56:29 考えてみると、このUIDを付加する作業は、ppBlogの方で自動的にやるべきかなぁ。次バージョンではそうしようと思います。

 記事ごとのJavaScript指定も同じように、[script][/script]で囲った中に記述すればOKです。

[script]
alert("Bonjour, tout le monde!"); /* 普通にJavaScriptを記述 */
[/script]

 前置きが長くなりましたが、本題。最初に挙げたリンク先Link のソースを見れば分かりますが、動的にスタイル指定を適応させる処理を入れています。同じような処理は、ppBlogで使っているソースハイライト表示用のsyntax.jsLink でも使っていますが、ここでは、上記エクセルコピペのテーブル変換の部分を抜粋してみます。

var sheet = d.styleSheets && d.styleSheets[0]; /* 最初のスタイルシートを取得 */

var rulesCSS = { /* JSON形式で要素毎のスタイルを指定 */
  'table' : 'border: solid 1px gray; margin: 2em auto; border-collapse: collapse;',
  'table td' : 'border: solid 1px gray; padding: 2px; text-align: right;',
  'table th' : 'border: solid 1px gray; padding: 2px; text-align: center;',
  'thead tr th' : 'background: #eeffff;',
  'tbody tr th' : 'background: #ffeeee;'
};

for (var el in rulesCSS){
 if(sheet.addRule){ /* IE 向け */
  sheet.addRule(el, rulesCSS[el]);
 } else {  /* Firefox, Safari, Opera 向け */
  sheet.insertRule(el + '{' + rulesCSS[el] + '}', sheet.cssRules.length);
 }
}

 このように、予めJSON配列などに適応させたいCSSを記述している時は、こんな感じで動的に変更させることが出来るのですが、「普通のCSSの記述」つまり

<style type="text/css">
  table { border: solid 1px gray; margin: 2em auto; border-collapse: collapse; }
  table td { border: solid 1px gray; padding: 2px; text-align: right; }
  table th { border: solid 1px gray; padding: 2px; text-align: center; }
  thead tr th { background: #eeffff; }
  tbody tr th { background: #ffeeee; }
</style>

を、このまま適応させたいときもあると思います。ppBlogでは、リスト表示モードというのがあり、記事の読み込みにはAjaxを活用しています。この際に、最初の方で紹介した、記事ごとのCSS記述があると、まさにこんな感じで、テキストとしてCSSの記述も読み込みます。で、それを処理するのを忘れていました、という最初の話に戻るのですが、その辺の処理は以下のようにしてみました。lib.jsの256行目あたりからの部分ですが、IEとMozilla系で処理が違うので条件付きコンパイルを使っています。

if(!o("#css4list")){ /* ID#css4list を持つオブジェクトがなければ */
 oParts.create("style#css4list", null, o("head")); /* ID名css4listを持つSTYLE要素をHEAD要素の子要素として追加 */
 newCSS = o("#css4list").$; /* HTMLStyleElementオブジェクトの取得 */
 newCSS.type = "text/css";
} else newCSS = o("#css4list").$;
 /*@cc_on @*//*@if(1) newCSS.styeSheet.cssText = css[1]; @else@*/
 newCSS.textContent = ""; /* 前に適応させたCSSをクリア */
 newCSS.appendChild(d.createTextNode(css[1])); /* 新たにCSSを設定 */
/*@end@*/

 リストモードでは記事は常にひとつしか表示されないので、ひとつ動的スタイルシート用のHTMLStyleElementを用意しておけば十分です。IEとMozilla系では、そこから先の処理が違います。IEでは、スタイルシートオブジェクトから操作。

HTMLStyleElement.styleSheet.cssText = (先に挙げたような素のCSSテキスト);

 Mozilla系では、DOMオブジェクトとして操作。

HTMLStyleElement.appendChild(document.createTextNode(先に挙げたような素のCSSテキスト));

 複数行にわたるCSSテキストを一気に適応させたいときは、こんな感じでしょうか。

ちなみに、[object HTMLStyleElement]から[object CSSStyleSheet]にアクセス?する際もIEとMozilla系では違いますね。IE8では、だいぶ歩み寄りが見られたような気もするけど。

[object HTMLStyleElement].styleSheet = [object CSSStyleSheet] /* IE */
[object HTMLStyleElement].sheet = [object CSSStyleSheet] /* Mozilla */

なので上のスクリプトの例では、IEの処理部分は以下のように書いても同じです。

document.styleSheets[document.styleSheets.length - 1].cssText = css[1];

つまり

newCSS.styleSheet == document.styleSheets[document.styleSheets.length - 1];

まぁこんなとこですかねぇ。そろそろアップデートせねば。。

— posted by martin at 11:48 am   commentComment [12]  pingTrackBack [0]

この記事に対するコメント・トラックバック [12件]

scrollUp1. ぷらむ — 2009/02/20@21:16:36

テーブルのセルの右詰、中揃え、左詰ですが、right、center、leftを変える方法でやってみました。
.article-content table th { text-align: center; }
.article-content table td { text-align: left; }
text-align:を変更しました。リスト表示と単独記事の時は、変更の指定どおりに表示されますが、ボックス表示では、変更の指定が有効でなく、thは中揃え、td右詰になってしまいます。
ここも直していただけるとありがたいです。

Owner Comment martin Website  2009/02/20@21:47:43

 こんにちは。それは、正に記事で書いているようなCSS指定のバッティングが起こっているからだと思います。#UID1234567890みたく、付加しても良いですし、記事中にも追記しましたが、自動的に付加するような処理を入れていますので、最新版に入れ替えればOKかなと思います。
 http://p2b.jp/demo/utils.txtLink  ($ 2009/02/17 22:38:09)

3. ぷらむ — 2009/02/20@22:43:28

指定通り文字揃えができるようになりました。ありがとうございます。

4. ぷらむ — 2009/03/01@15:38:47

2月分のhtml形式のアーカイブを作成し、できたファイルを開いたところ、テーブルの罫線が落ちていました。別にアーカイブですから、これでも問題はありませんが、もし簡単に付け加えられるなら、そうしていただけるとうれしいのですが。面倒なら、その必要はありません。

Owner Comment martin Website  2009/03/03@11:21:47

とりあえず、これで良いかなと思います。
http://p2b.jp/demo/utils.txtLink
http://p2b.jp/demo/archives.inc.txtLink
archives.inc.phpはmodulesディレクトリに。

scrollUp6. ぷらむ — 2009/03/03@20:29:04

表がきれいに表示されるようになりました。Excelをtableにするツール、利用させていただいています。これで、気がつきましたが、逆にHTMLのテーブルの表をコピーし、テキストでExcelに貼り付けると、ふつうのExcelの表になるんですね。テーブルとExcelの相性がこんなにいいとはこれまで知りませんでした。

7. ぷらむ — 2009/03/04@21:29:24

テーブルの関係で修正していただいた「utils.php」ですが、これが原因?で、何かの調子で、真っ白画面になり、ブログが開かないんです。朝と今、この現象が起こりました。ブログを開こうとして真っ白だから、どんなときに起こるのかわかりません。
独自のエラーを有効にして、いじっていたら、こんなメッセージが出ることがあったので、config.inc.phpが原因?かも。
ppBlog Notice: LINE 186 of config.inc.php: Undefined offset: 3
ppBlog Notice: LINE 187 of config.inc.php: Undefined offset: 2

3月3日提供の
http://p2b.jp/demo/utils.txtLink
http://p2b.jp/demo/archives.inc.txtLink
を入れてから、起こった現象ですから、やはりこれのどちらかだと思います。

Owner Comment martin Website  2009/03/04@21:44:21

こんにちは。考えてみたら、カレンダー部分をいじって、それをutils.phpにも反映させていたので、それが原因かも知れません。カレンダーが関わる部分を従来のものに戻したやつをアップしておきます。何か、記事を書いたりして、カレンダーが書き換えられるタイミングでその現象が出たのであれば、そうかもしれません。
 http://p2b.jp/demo/utils2.txtLink

9. ぷらむ — 2009/03/07@21:08:40

提供していただいたutils.phpを使っています。真っ白画面になることはなくなりましたが、atom1.0のファイルがうまくできません。それは、ここのブログも同様です。
どのファイルが原因か私にはわかりませんが、よろしくお願いします。

Owner Comment martin Website  2009/03/08@11:30:31

こんにちは。ぷらむさんのAtomをvalidatorで調べてみると、
http://feedvalidator.org/check.cgi?url=http%3A%2F%2Fpuramu.dip.jp%2Ffeeds%2Fatom1.0.xmlLink
294行目が<tr><th></td><td>となっていて、これでエラーのようです。ここは、<tr><th><td>のように余分な</td>を消せばOKですね。これって、例のエクセル変換プログラムですよねぇ。再現性があるなら修正しないといけないですね。
自分のところは、別の原因でエラーが出ていました。

scrollUp11. ぷらむ — 2009/03/08@12:26:53

表中の空白セルのところで、<tr></td>や<th></th>の関係がおかしくなっていたのですね。ほかに3カ所ぐらい出てきたので直しました。Atom1.0が表示されるようになりました。初めのうちに作った表で、起こっており、後のほうで作った表では、エラーは出ていません。今度、表を作ったときは、そこをよく見てみます。

Owner Comment martin Website  2009/03/08@14:15:33

ご報告ありがとうございます。お陰様で、こちらも更新に伴うfeedの対応をすることが出来ました:)

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0045 sec.
prev
2024.3
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31