sever

無題

سال نو مبارک

こんな記事タイトルを付けられるブログは少ない。
FC2 や jugem は EUC-JP であるし、yaplog は Shift_JIS であり、無料ブログ・サービスで文字コードが UTF-8 なのはこの忍者と Ameblo くらいか。

とは言えど、イーラーンではまだ旧年の 1388 年だから。

イーラーンの新年は NoRuz, Persian New Year にカウントダウンが載っているように 3 月 21 日午前 3 時 32 分に始まる。

【緑・白・赤】の色はイーラーンの国旗を模している。「日の丸」はこういう用途には使えないなぁ。

因みに 19 時にキャプチャしたもの。

タイトルのペルシア文字は sale no mobarak サーレ・ノ・モバーラクと読みます。

ラジオ「サヘル・ガーデン」の受け売りを含めました。

CurvyCorners (2)

普段は殆ど Ubuntu で作業しますが、さっき windows に行って、このブログを見ると、角丸は描画されてはいるが、予期せぬカタチになっていて驚いた。

問題のブラウザは Safari 4.04 と Google Chrome 3.0.195.38 のいずれも Webkit エンジンのブラウザだった。

は再起動時に消えていたので問題ナシとし、の Webkit エンジンでも正常だった。

よ～く見りゃ、背景画像や背景色の指定のある他の部分には問題が無い。

CSS を振り返ると、ナルホド。
.EntryInnerBlock には背景色の指定が無かった。

これは盲点だったわい。
案の定、背景色「シロ」を加えると、他のブラウザと揃った。

ということで、CurvyCorners を用いたページをで見たとき、閲覧者に妙な思いをされなくて済みます。

CurvyCorners

「角丸枠線」については CSS3 でサポート（border-radius）されているものの、使用者の多い Microsoft Internet Explorer が対応していなかったりでいくつかの javascript が公開されています。

ここでは 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 では角丸が描画されませんでした。

広告消し更新

とりあえず長期未更新による広告を表示しないように。

往生した・・・

テンプレートを変更したものの html 4.01 → xhtml 1.0 に換えるのにすごく往生した。

最初から 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 名なのに対して、「プラグインの設定」部分ではそれが小文字だったこと。こんなとこに隠遁していたのか！

つづきはこちら

テンプレート変更

諸々の実験のためテンプレートを変更し html 4.01 互換モードから xhtml 1.0 標準モードに書き替えます。
古い記事は折を見てと言うことになるでしょう。

album1

jugem・flat 風のテンプレート

忍者では特に基本構造が <div> と言うスタイルなので、プラグインブロックに枠画像を付けても、それが記事部分より短い時には途中で切れてしまう。

<table> 構造だと長短に関係なく、枠画像は表示されるが、表示範囲よりも「大きな」ものを記事部分に入れたりすれば、枠画像がずれてくる。

<table> 構造のものは忍者には極めて少なく、カスタマイズするにしても知識が必要。

<div> 構造で「２コラム左メニュー」でブログタイトルが記事の上にあるものをいくつか拾ってみた。

<table> 構造のテンプレート

http://blog.ninja.co.jp/Preview/MASTER/2999/