ブログのデザイン一部変更 2014年02月16日(日)20:20:31

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

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

   記事中の画像も、クラス指定で角丸に 使用例
   コメント投稿欄の各項目も角丸に(H26.8.24)
(3)タグユニットの切替表示(H26.3.15)
  下記の組み合わせで切替表示するように変更
   再度、個別に表示するように戻しました(H27.5.23)
  ・ 「関連記事」と「SNS」
  ・ 「コメント」と「トラックバック」
   参考サイト:表示、非表示を切り替える方法
  問題点 ① コメントの折り畳み・編集が出来なくなった
     ② Facebook を優先表示しないとスクリプトエラーが発生
  [追記]コメントの編集が出来なくなったのはエリア設定のミスが原因でした(H26.11.28.修正)
     <!--comment_edit--> 変数を削除する事で解決
FC2 IE8 で角丸表示する方法
 IEをCSS3に対応させるのにCSS3 PIE使う場合、
 FC2ブログでは、拡張子htcファイルをアップロードする事が出来ない。

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

(1)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

(2)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 には未対応

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

   四つ角に変な色が background で付いた場合の対策
    $(document).ready(
    function(){
     $("IDまたはclass").corner("ここで角丸サイズ指定 cc:ここに背景色を指定する");
     });
【スポンサーリンク】
【拍手確認】 【記事の編集】
【関連タグ】 角丸  当ブログ内の関連記事をタグで検索出来ます。

コメントの投稿 [1件]

非公開コメント

コメント編集欄のテスト

<!--comment_edit--> が <!--comment_area-->から
外れていたのが原因かもしれない。
[注記]
・投稿時に編集パスワードが設定されたコメントにのみ表示するブロック
(パスワードが未設定のコメントでは表示しない)

 商品検索

タグ [上位30件]



カテゴリ&月別一覧
 
最新記事一覧
『選挙の勝ち方教えます』 2017/08/22
『ヴィジット』 2017/08/21
『青空エール』 2017/08/21
『セルフレス/覚醒した記憶』 2017/08/20
『ディアスポリス−DIRTY YELLOW BOYS−』 2017/08/19
最近気になるCM[25](内田有紀) 2017/08/19
『スパイダーマン:ホームカミング』 2017/08/18
『ドント・ブリーズ』 2017/08/17
『メカニック:ワールドミッション』 2017/08/16
『ホワイト・バレット』 2017/08/15
週間人気記事
Trackback
Comment 

コメント、トラックバック大歓迎。
但し、記事と無関係と思われるものは、
削除させて頂きます。

FC2ランキング
[ ジャンルランキング ]

映画:第49位
アクセスランキングを見る>>


[ サブジャンルランキング ]

レビュー:第19位
アクセスランキングを見る>>