ブログのデザイン一部変更

2014/02/16 2015/05/24

【パソコン】【パソコン】［カスタマイズ］ 1 0

角丸

ブログのデザイン一部変更

（１）サイトの背景色変更
　　　薄いグレーから､暖色にイメージチェンジ
（２）記事枠を角丸に変更
　　　参考サイト：記事の画像を角丸にする - fc2
　　　　　　　　　　IEをCSS3に対応させるCSS3 PIEのJavaScript版を使う

　　　記事中の画像も､クラス指定で角丸に　使用例
　　　コメント投稿欄の各項目も角丸に（H26.8.24）
（３）タグユニットの切替表示（H26.3.15）
　　~~下記の組み合わせで切替表示するように変更~~
　　　再度､個別に表示するように戻しました（H27.5.23）
　　・「関連記事」と「ＳＮＳ」
　　・「コメント」と「トラックバック」
　　　参考サイト：表示、非表示を切り替える方法
　　問題点 ① コメントの折り畳み・~~編集が出来なくなった~~
　　　　　② Facebook を優先表示しないとスクリプトエラーが発生
　　［追記］コメントの編集が出来なくなったのはエリア設定のミスが原因でした（H26.11.28.修正）
　　　　　 変数を削除する事で解決

FC2 IE8 で角丸表示する方法
　IEをCSS3に対応させるのにCSS3 PIE使う場合､
　FC2ブログでは､拡張子htcファイルをアップロードする事が出来ない｡

別法を検索した所､下記の方法が紹介されていた｡
jQuery を使い､要素にPIEを適用させる方法

（１）http://css3pie.com/download/ よりDownload PIE 2.0 beta 1 をダウンロード
　「PIE_IE678.js」を自サイトにアップ
　<script type="text/javascript" src="PIE_IE678.js"></script>
　　プラグイン「jQuery.corner」も合わせてアップすると色々なシェイプが表現出来る
　　参考サイト：IE6 7 8でCSS3風の角丸を実現するjQuery.corner

（２）CSSでスタイルを設定する
　　特定部分だけを指定する例
　　　.demo {
　　　　　-webkit-border-top-left-radius: 10px;
　　　　　-webkit-border-top-right-radius: 20px;
　　　　　-webkit-border-bottom-right-radius: 30px;
　　　　　-webkit-border-bottom-left-radius: 40px;
　　　　　-moz-border-radius-topleft: 10px;
　　　　　-moz-border-radius-topright: 20px;
　　　　　-moz-border-radius-bottomright: 30px;
　　　　　-moz-border-radius-bottomleft: 40px;
　　　}
　　参考サイト：CSS3 角丸を表現する border-radius
　　残念､IE8 には未対応

（３）jQuery の記述
　　　　$(function()
　　　　{
　　　　$('ここにIDやclassを連記').each(function()
　　　　{
　　　PIE.attach(this);
　　　　});
　　　　});

　　　四つ角に変な色が background で付いた場合の対策
　　　　$(document).ready(
　　　　function(){
　　　　 $("IDまたはclass").corner("ここで角丸サイズ指定　cc:ここに背景色を指定する");
　　　　 });

【スポンサーリンク】

【パソコン】［カスタマイズ］

関連記事