FC2ブログのテンプレート工房

当サイトの共有テンプレート、lightframeシリーズの角を丸くするカスタマイズを紹介します。

ただし、FirefoxやSafariでは表示されますが、IEでは丸く表示されません。
それでも構わない方はカスタマイズしてください。

W3Cが草案中であるCSS3が正式勧告されれば、いずれIEでも可能になるかもしれません。

スタイルシートの次の箇所に赤い行を加えてください。

【記事の角を丸くする】

/* ▼ 記事 ▼ */

.ently_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.ently_title {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

.ently_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ 記事 ▲ */

【各プラグインの角を丸くする】

/* ▼ 左側メニュー(プラグイン１) ▼ */

.plugin1_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.plugin1_title {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

.plugin1_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ 左側メニュー(プラグイン１) ▲ */

/* ▼ 右側メニュー(プラグイン２) ▼ */

.plugin2_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.plugin2_title {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

.plugin2_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ 右側メニュー(プラグイン２) ▲ */

/* ▼ 上部メニュー(プラグイン３) ▼ */

.plugin3_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.plugin3_title {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

.plugin3_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ 上部メニュー(プラグイン３) ▲ */

【コメント、トラバの角を丸くする】

/* ▼ コメント ▼ */

.comment_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.comment_title {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

.comment_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ コメント ▲ */

/* ▼ トラックバック ▼ */

.trackback_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.trackback_block_title {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

.trackback_block_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ トラックバック ▲ */

【タイトル枠の角を丸くする】
※whiteにはタイトル枠がありません

/* ▼ ヘッダー ▼ */

#header_outline {
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}

#header_body {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}

/* ▲ ヘッダー ▲ */

【フッターの角を丸くする】

/* ▼ フッター ▼ */

#footer_outline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

#footer_body {
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
}

/* ▲ フッター ▲ */

関連記事

• 一行空けて追記を表示 (2009/05/01)
• コメント投稿・編集欄のレイアウト (2009/04/29)
• コメントとコメントの間隔を調整する (2009/04/09)
• 角を丸くする (lightframeシリーズ) (2009/03/27)
• lightframeの左右カラム幅を固定、記事カラム幅を可変にする (2007/05/05)
• 『最新の記事』の便利ナビを設置する (lightframe) (2007/05/03)
• lightframeの表示順序を変える。 (2007/02/02)