スポンサードリンク

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
拍手する

FC2ブログの共有テンプレート【lightframe】シリーズに角丸を適用する方法

 主に使うPCのOSをWindowsXPからWindows7に移行して既に半年も経ってしまいましたが、特におかしな事になることも無い感じで過ごしてきています。Internet Explorer(以降IE)のバージョンも11にしましたが、メインでは使っていないので普通に使えてるようです。


ただ、メインで使用するブラウザーをSleipnir4にしようとしましたが、BLINKダウン(フリーズ)と個人的に呼んでいる現象やJavaScriptが新しくタブを開くときに無効になったり、Chromeの拡張機能の動作が不安定だったり、IE11にしたことで一部のメニューを開くと頻繁に警告メッセージが出るしで結局メインで使用しているブラウザーはGoogle Chromeのままです。


なので、現在PCにインストールしてあるブラウザーは、Google Chrome30、Firefox25.0、Sleipnir4.3、IE11となっています

【lightframe】のカスタマイズで角を丸くしたいのに反映されないのは

このブログでは、角を丸くするカスタマイズとかはしていませんが、Twitterのウィジェットとかは角を丸くしていますね。FC2拍手のボタン等は画像なのでIE8でも角が丸く見えますが、TwitterのウィジェットはCSSで角を丸くしているのでIE8では対応していないために普通に四角に見えます。


Yahoo!知恵袋の質問で記事通りにカスタマイズしても反映しないのはなぜ?(意訳)というのがありました。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12116344652 (Yahoo!知恵袋)


上記の質問の中で提示されている記事(http://10plate.blog44.fc2.com/blog-entry-174.html)は2009年の3月に書かれたものですし、当時のブラウザーはFirefox3.0とGoogle Chrome1.0とIE8とかの頃ですし、記事の中でもベンダープレフィックスとして -moz- や -webkit -が付加されています。

ベンダープレフィックス

ベンダープレフィックス(接頭辞)とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。

そこで記事に書かれているカスタマイズを【lightframe】のテンプレートで試すとGoogle Chromeでは角丸になりましたが、FirefoxやIEでは角丸にはなりませんでした。


CSS3での border-radiusプロパティの書き方が -webkit- 側のものになっているので、書き方を直したところFirefoxでも角が丸く見えるようになりました。追記にCSS3対応版のカスタマイズを載せました。


FC2ブログのテンプレート工房 さんの 角を丸くする (lightframeシリーズ) に記載されている内容を変更。

角を丸くする (lightframeシリーズ) CSS3 対応版(2013年)

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


【記事の角を丸くする】

/* ▼ 記事 ▼ */


.ently_outline {
border-radius: 10px;
}


.ently_title {
border-top-right-radius: 8px;
border-top-left-radius: 8px;

}


.ently_body {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;

}


/* ▲ 記事 ▲ */


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

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


.plugin1_outline {
border-radius: 10px;
}


.plugin1_title {
border-top-right-radius: 8px;
border-top-left-radius: 8px;

}


.plugin1_body {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;

}


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


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


.plugin2_outline {
border-radius: 10px;
}


.plugin2_title {
border-top-right-radius: 8px;
border-top-left-radius: 8px;

}


.plugin2_body {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;

}


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


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


.plugin3_outline {
border-radius: 10px;
}


.plugin3_title {
border-top-right-radius: 8px;
border-top-left-radius: 8px;

}


.plugin3_body {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;

}


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


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

/* ▼ コメント ▼ */


.comment_outline {
border-radius: 10px;
}


.comment_title {
border-top-right-radius: 8px;
border-top-left-radius: 8px;

}


.comment_body {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;

}


/* ▲ コメント ▲ */


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


.trackback_outline {
border-radius: 10px;
}


.trackback_block_title {
border-top-right-radius: 8px;
border-top-left-radius: 8px;

}


.trackback_block_body {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;

}


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


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

/* ▼ ヘッダー ▼ */


#header_outline {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

}


#header_body {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;

}


/* ▲ ヘッダー ▲ */


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

/* ▼ フッター ▼ */


#footer_outline {
border-radius: 10px;
}


#footer_body {
border-top-right-radius: 8px;
border-top-left-radius: 8px;

}


/* ▲ フッター ▲ */


【ナビゲーションの角を丸くする】
※ナビゲーションに枠が無ければ下の二つは不要です

/* ▼ カテゴリ・検索・月別ナビゲーション ▼ */


.various_outline {
border-radius: 10px;
}


.various_body {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;

}


/* ▲ カテゴリ・検索・月別ナビゲーション ▲ */

FC2ブログの強制IE互換表示を回避するための方法

FC2ブログはサーバー側から強制的に、ドキュメントモードをIE7相当にするための互換表示にしていますので、これを回避すればIE9以降でも角を丸くすることが出来ます。


【IE9以降でCSS3を反映させる】

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

HTMLの上記の位置に赤い文字列を追加して下さい。

角を丸くするカスタマイズの完成サンプル(lightframe_skyblue)

http://yosoilue.blog74.fc2.com/?template=lf_skyblue_k&no=1392

○追記◯

(追記:2015/2/7) FC2ブログの強制的なIE閲覧時の強制的互換表示は中止された。


スポンサーサイト

タグ : FC2ブログ_カスタマイズ Yahoo!知恵袋 

拍手する

スポンサードリンク

【関連する記事(zenback)】

コメント

コメントの投稿

非公開コメント

【広告看板】 
UUカウンター
+6500以上?
現在の閲覧者数:
PVカウンター
次のキリ番は90万です
Twitter
Twitterの過去の
まとめはtwilogバナー
記事のランキング

ブログパーツ

リンク集:ブログ
リンク
アクセスのランキング

アクセスランキング

CG使用許可番号
CG使用許可番号0166
プロフィール
記事に関連しないコメント等は
ゲストブックにお願い致します

ロギラキ

Author:ロギラキ
level:52/150
プロフへのリンク
 ブクログ

【商品リンク】

VF-19 ADVANCE
超時空要塞マクロス
VF-1J アーマードバルキリー
超時空世紀オーガス
オーガス
鋼鉄ジーグ
宇宙円盤大戦争
UFOロボグレンダイザー
銀河旋風 ブライガー
電人ザボーガー
ストロングザボーガー お売りください。駿河屋です。
FC2拍手数(ロギラキ遷紀)
公開したのは【1529】記事
拍手が貰えたのは【1338】記事
応援バナー
応援しています♪
萌えゲーアワード2015 バナー ユニゾンシフト:ブロッサム新作応援中
ブログランキング
FC2ブログランキングへ 人気ブログランキングへ ブログランキング・にほんブログ村へ blogram投票ボタン このBlogのはてなブックマーク数
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。