忍者ブログ
2007/08/17
[53]  [52]  [44]  [43]  [42]  [41]  [40]  [39]  [46]  [38
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

自動挿入

「角丸枠線」については 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 環境はありませんが、次のようなブラウザで動作が確認済みです。

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

PR

自動挿入

この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
secret (管理人しか読むことができません)
ブログ内検索
アーカイブ
最新記事
(04/24)
(04/24)
(01/03)
(01/02)
(01/02)
最新コメント
[03/20 あ]
プロフィール
Handle: sever
性別:
非公開
自己紹介:
'sever' とは英語の 'severe' のミスタイプではありません。
チェコ語で「北」を意味します。
liens
フリーエリア
フリーエリア4
puraguinn4 contents
Copyright (c)sever All Rights Reserved.
Powered by NinjaBlog  Material by Pearl Box  Template by tsukika
忍者ブログ [PR]