はてなブログの手入れまとめメモ

既存状態からの変更点のまとめ

1. カテゴリをタグっぽくする
2. pre記法のバックカラー＆透過度の変更
3. コード記述欄(スーパーpre記法)にバックカラー＆透過度の変更

コードALL

css

/* <system section="theme" selected="12921228815713435655"> */
@import "http://hatenablog.com/theme/12921228815713435655.css";
/* </system> */

/* <system section="background" selected="bg11"> */
body{ background-color:#fff; background-image:url('/images/theme/backgrounds/theme11.png'); background-repeat:repeat; background-attachment:scroll; }
/* </system> */

/*カテゴリをタグ化するためにリスト形式をやめる*/
div.hatena-module-category div.hatena-module-body ul li {
    display: inline;
    margin: 0 0.3em; 
　　}
    

/*pre記述のカラー変更更*/
.entry-content pre {
    background-color:rgba(255, 204, 204, 0.2);
    color: #000033;

    /*(IE7,IE8用のフィルタ設置)*/
　　filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fffffff,endcolorstr=#7fffffff,gradienttype=0);
     　 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff,endColorstr=#7fffffff)";
     　 zoom:1;
    　  }
/*スーパーpre記述のカラー変更*/
.entry-content pre.code {
    background-color:rgba(0, 51, 102, 0.2);
    color: #000033;
    }

カテゴリをクラウドタグっぽくする

参考にしたページ
【改訂版】はてなブログ サイドバーのカテゴリ表示をタグクラウドにする！ - TMD45INC!!!

css

div.hatena-module-category div.hatena-module-body ul li {
    display: inline;
    margin: 0 0.3em; }

htmlモジュール

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// タグクラウドもどき
$(function() {
  var categories = $(".hatena-module-category ul li a");
  $.each(
    categories,
    function(index, domEle) {
      var ele = $(domEle);
      var texts = $.trim(ele.text());
      // リンクテキストから記事件数を取得
      var count1 = texts.match(/\([^\(\s +]+\)/);
      var count2 = count1[0].match(/\d+/);
      // 大きさ指定 Start
      if(count2 >= 10) ele.css("font-size", "250%");
      else if(count2 >= 5) ele.css("font-size", "200%");
      else if(count2 >= 3) ele.css("font-size", "150%");
      else if(count2 >= 2) ele.css("font-size", "120%");
      else ele.css("font-size", "90%");
      // 大きさ指定 End
      // リンクテキストから記事件数を除去
      ele.text($.trim(texts.replace(/\([^\(\s +]+\)/, '')));
      // ツールチップに記事件数含めて表示する（title要素）
      ele.attr("title", texts);
    }
  );
});
</script>

ごっそりパクらせて頂きました。ありがとうございます。

pre記法のバックカラー透過度の変更

css

/*pre記述のカラー変更更*/
.entry-content pre {
    background-color:rgba(255, 204, 204, 0.2);
    color: #000033;
    /*(IE7,IE8用のフィルタ設置)*/
     　 filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fffffff,endcolorstr=#7fffffff,gradienttype=0);
     　 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff,endColorstr=#7fffffff)";
     　 zoom:1;
    　  }

RGB値で色を指定するのに慣れない...。

こんなかんじでピンクっぽいやつにしてみた

スーパーpre記法のバックカラー透過度の変更

css

/*pre記述のカラー変更更*/
/*スーパーpre記述のカラー変更*/
.entry-content pre.code {
    background-color:rgba(0, 51, 102, 0.2);
    color: #000033;
    }

コードの色ははてな記法のままでいいかな。
色彩のセンス皆無だからね←
スーパープレ記法ってpre記法の子要素(.entry-content pre.code)で作ってありました。
親要素のところでIE対策しておけば平気かな？
IE環境持ってないから分からないよー