この件で検索を行っても CSS を PHP のヒアドキュメントとして、記載する方法が見つからなかったのでメモとして記事にします
CSS を記載する方法としては style 要素の中に記述するか、link 要素の中にスタイルシートの URI を記載して UA に読み込ませると言う 2つの方法がありますが、今回、ここで記載するのは後者の方です。何故この様な事を考えたかと言うと、いい加減此処の超カオス気味のスタイルシートを何とかしたいと思った次第です
PHP の公式マニュアルによると PHP: 基本的な構文 - Manual たいていの場合、PHP は HTML ドキュメントの中に埋め込まれます と記載されています。たいていの場合? では、別に HTML でなくてもいい訳です。参照先にその具体例が記載されています。そこで、まず行ったのが HTML の head 要素内の link 要素を以下の様に修正
<link rel="stylesheet" type="text/css" href="filename.php" media="all" />
スタイルシートを指定しているファイルのサフィックス部分が php になっている所がポイント。で、実際のスタイルシートファイル(.php) は以下の様に記述します
@charset "UTF-8";
<?php
$color = 'pink';
$background = 'green';
?>
body {
color: <?php echo $color; ?>;
background-color: <?php echo $background; ?>;
}
ブラウザをリロード行っても…真っ白けです。どぎつい配色になるはずなんですが、これはスタイルシートが適用されていないようです。つまり、UA がスタイルシートとして認識しなかったようです。そこで Proxomitron 1 のログウィンドウを開いて、もう一度リロードを行います。案の定 PHP が HTTP レスポンスヘッダー Content-Type のメディアタイプに text/html として返しています。これが原因の様です。つまり、スタイルシートならばメディアタイプを text/css として返さなければならないのに UA に対して HTML 文書ファイルですよ。と、返してしまっている訳です。これは、PHP の設定 default_mimetype が text/html となっているので正常な動きです。そこで、スタイルシートファイル(.php) を以下の様に修正します
<?php header('Content-Type: text/css; charset=utf-8'); ?>
@charset "UTF-8";
<?php
$color = 'pink';
$background = 'green';
?>
body {
color: <?php echo $color; ?>;
background-color: <?php echo $background; ?>;
}
どうってことはありません。header 関数にてデフォルトのヘッダーを置き換えてやっているだけです。ブラウザを再度リロードするとスタイルシートが認識されました。本来ならば、ここで終了なんですが、link 要素のファイル名の指定が php となっているのがどうもかっこよくない。そこで、HTTP サーバーのアクセス制御ファイルを以下の様に記述します 2
<FilesMatch "filename\\.css">
SetHandler application/x-httpd-php
</FilesMatch>
あとは、HTML の head 要素内の link 要素のファイル名指定部分の php を css に変更。実際のファイル名も css に変更。実際にブラウザをリロードしてアクセス制御ファイルが効いているか確認して終わりです
これには色々と応用が効きます。各 UA に対応させる為に UA のバグを逆用して苦労してスタイルシートの読込みの振り分けなどを行っている様ですが、PHP 変数の $_SERVER["HTTP_USER_AGENT"] で判定を行えばいいのです。3 他には、色を容易に変更できる様に PHP の変数としておけば、変数の値を変更するだけで配色の変更が可能です。などなど…PHP コードが記述できるので、良いと思います 4
またもや PHP でブログパーツなるものを作ってみました。サイドバーに表示されているお天気アイコンがそうです
いい加減、カオス気味の此処のスタイルシートを何とかしないと…('A`)
標準の table 要素で行うカレンダーは気に入らないので PHP で自作しました。表示フォントはちょっとオサレに Georgia を使っています。Windows, Mac の人もオッケーだと思います
話はチョット変わって、此処のブログシステムの事ですが、フッターに表示している様に WordPress 1 を使用しています。先の記事で、記事の移行はあっさりと終ったと書きましたが、実はあの後に色々とありました…('A`)
ところが phpMyAdmin 2 にてデータベースの中身を除くと、ちゃんと div 要素としてデータに入っています…WordPress Japan のフォーラムを検索すると、こんな記事が…WordPress Japan :: トピックを表示 - 記事投稿でCSS....【エディタの不具合?仕様?】・・解決 と言う訳で、早速ダッシュボードのユーザー設定にて ビジュアルエディタを使用する のチェックを外して、この問題は解決
データベースの中は置き換わっていないので、表示する際のフィルターの問題でしょう。それにしても、此れは大きなお世話。この問題は解決していませんが、時間ある時に調べてみます
この要素の中に以下の文字が入っていると、表示の際に勝手に別の文字に置き換わってしまいます
これ、表示の際に復帰改行に変更しているんですが、文字コードで言うならば、0x0d 0x0a を出力している為、UA によっては br 要素と同じように復帰改行してしまう…
上記の 1番以外の問題は恐らく表示する際のフィルター問題でしょう。時間ある時にソースコードを追っかけて調べてみたいと思います。取り敢えず、今は文字参照やキャラクターエンティティを使用して回避しています。改行の問題も文章間に改行を入れないようにして回避しています。いずれも運用で回避できる問題ですが…
