]]>]]>
とは言えど、イーラーンではまだ旧年の 1388 年だから。
イーラーンの新年は NoRuz, Persian New Year にカウントダウンが載っているように 3 月 21 日午前 3 時 32 分に始まる。
【緑・白・赤】の色はイーラーンの国旗を模している。「日の丸」はこういう用途には使えないなぁ。
因みに 19 時にキャプチャしたもの。
タイトルのペルシア文字は sale no mobarak サーレ・ノ・モバーラクと読みます。
ラジオ「サヘル・ガーデン」の受け売りを含めました。
]]>問題のブラウザは 
Safari 4.04 と 
Google Chrome 3.0.195.38 のいずれも Webkit エンジンのブラウザだった。
は再起動時に消えていたので問題ナシとし、
の Webkit エンジンでも正常だった。
よ～く見りゃ、背景画像や背景色の指定のある他の部分には問題が無い。
CSS を振り返ると、ナルホド。
.EntryInnerBlock には背景色の指定が無かった。
これは盲点だったわい。
案の定、背景色「シロ」を加えると、他のブラウザと揃った。
ということで、CurvyCorners を用いたページを で見たとき、閲覧者に妙な思いをされなくて済みます。
ここでは CurvyCorners を使っています。
ところが、他の無料ブログ・サービスでは「システムエラー」でブログ自体が表示され無かったり、javascript が機能せず、Unvalid な CSS ハックを書いたりしていました。
この忍者ブログと FC2 ブログは javascript ファイルのアップロードが可能なので、Unvalid な CSS ハックを書いたりせずとも、バッチリ決めることができました。
上記リンクから curvycorners-2.0.4.zip をダウンロード。
展開したフォルダから curvycorners.js を「ファイルのアップロード」からアップロード
テンプレート編集画面上部の </head> 直前に
<script type="text/javascript" src="http://file.sever.blog.shinobi.jp/curvycorners.js"></script>
のように記述。
CSS は適用させたい部分に「枠線」指定をしておきます。
背景色若しくは背景画像の指定も忘れずに。
/*記事表示部分の背景や余白等の設定*/
.EntryInnerBlock {
padding: 10px;
background-color: #ffffff;
text-align: left;
margin-bottom: 30px;
border: 2px solid #92dc00;
border-top: 2px solid #92dc00;
border-right: 2px solid #92dc00;
border-bottom: 2px solid #92dc00;
border-left: 2px solid #92dc00;
}
反転された一括表示を用いると、上手く適用されないことがありますから、枠線指定は個別に指定します。
「背景色若しくは背景画像」を指定しておいかないと、 Safari で上辺と下辺がマックロになったりします。
次に角丸の設定をしますが、html 末尾の </body> の直前に置くのがポイントです。
<script type="text/javascript">
//<![CDATA[
addEvent(window, 'load', initCorners);
function initCorners() {
var settings = {
tl: { radius: 20 }, // 左上の角丸
tr: { radius: 20 }, // 右上の角丸
bl: { radius: 20 }, // 左下の角丸
br: { radius: 20 }, // 右下の角丸
antiAlias: true // コンマが無いことに注意
}
curvyCorners(settings, ".prof"); // プロフィールに適用
curvyCorners(settings, ".cat"); // カテゴリに適用
curvyCorners(settings, ".EntryInnerBlock"); // 記事部分に適用
}
//]]>
</script>
適用箇所の名前は CSS のセレクタ名と同一にします。
即ち id 名なら "#TopTitle" のようにして引用符で囲みます。
Mac 環境はありませんが、次のようなブラウザで動作が確認済みです。
| Windows | Ubuntu |
|---|---|
 Internet Explorer 6.0 / 7.0 / 8.0 |  |
 Firefox 3.0 / 3.5 | Firefox 3.0 / 3.5 |
 Flock 2.5.2 | Flock 2.5.2 |
 Opera 10.10 | Opera 10.10 |
| Safari 4.04 |  Konqueror 4.3.2 |
| Google Chrome 3.0.195.38 | Google Chrome 4.0.266.0 |
| Lunascape 6.0.1 | |
 Sleipnir 2.9.2 | |
Ubuntu の 
Dooble 0.07 では角丸が描画されませんでした。
最初から xhtml CSS Valid なテンプレートを選択した方が好かったのかも知れない。
なら、それなりに表示されるが、xhtml 標準モードで でとなると、テンプレート作者を補いながらと言うことになる。
.EntryTitle {
text-align: left;
font-size: 18px;
font-weight: bold;
padding: 30px 0 10px 40px;
background: url(省略.gif) no-repeat center top;
} 「単位を付けろよ」と言うのもいくつかあり、元々のテンプレートは padding-left: 40; とかであった。
最も原因の発見に時間を要したのはサイドバー部分だった。アーカイブなどが団子状態になっていて、いくら margin などを調整しても変わってくれなかった。
結果的には html が大文字の class 名なのに対して、「プラグインの設定」部分ではそれが小文字だったこと。こんなとこに隠遁していたのか ！
<table> 構造だと長短に関係なく、枠画像は表示されるが、表示範囲よりも「大きな」ものを記事部分に入れたりすれば、枠画像がずれてくる。
<table> 構造のものは忍者には極めて少なく、カスタマイズするにしても知識が必要。
<div> 構造で「２コラム左メニュー」でブログタイトルが記事の上にあるものをいくつか拾ってみた。
<table> 構造のテンプレート
]]>