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://blog.cnobi.jp/v1/blog/user/301761e621b7da31aeaf5263032bfdf2/1237248617"></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 では角丸が描画されませんでした。

自動挿入