ブログのデザイン一部変更 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:ここに背景色を指定する");
     });
【スポンサーリンク】
【拍手確認】 【記事の編集】
【関連タグ】 角丸  当ブログ内の関連記事をタグで検索出来ます。
最終更新日時: 2015年05月24日(日)13:31:23ブログパーツ このページのトップへ

コメントの投稿 [1件]

非公開コメント

コメント編集欄のテスト

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

 商品検索

タグ [上位30件]



 カテゴリ&月別一覧
 
 最新記事紹介
『破門 ふたりのヤクビョーガミ』 2017/10/22
視察研修2017年 2017/10/20
『刑事ゆがみ』 第二話 2017/10/19
『スタンドオフ(2016) 』 2017/10/19
『金メダル男』 2017/10/15
「ブラック星博士の東海征服計画2017」 2017/10/15
『ブラック・ファイル 野心の代償』 2017/10/14
『探偵ミタライの事件簿 星籠の海』 2017/10/13
ペイントで丸枠写真を移し替える方法 2017/10/12
博物館 明治村 (2017年) 2017/10/09
 週間人気記事
 Trackback
 Comment 

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

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

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


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

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