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

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

角を丸くする (lightframeシリーズ)

当サイトの共有テンプレート、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;

}

/* ▲ 記事 ▲ */




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

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

.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;

}

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

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

.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: 8
px;
}

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

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

.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;

}

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




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

/* ▼ コメント ▼ */

.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;

}

/* ▲ フッター ▲ */

関連記事
[ 8064 ] THANX!!
とても役に立ちました。
ありがとうございました。
[ 2010/01/27 18:19 ] [ 編集 ]
[ 8074 ] > Wingさん
お役に立てて良かったです^^
[ 2010/01/27 23:26 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
ユーザータグ


△ ページトップへ戻る