はてなのブログカードに、背景色をつけたいと思って、いろいろいじくってみたんですが、どうしてもできません。

地の部分が真っ白なので、少し色があったほうが、見やすいし、自分のブログにも合うと思うので、できれば、つけたいんですが。
どなたかやりかたをご存知の方、教えていただけると助かります。よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2015/12/29 13:04:52

ベストアンサー

id:meefla No.1

回答回数997ベストアンサー獲得回数472

CSS で行けるんじゃないかと思います。

CSS では背景色は変更できなかったので、JavaScript による回答に修正しました。
コメント欄で述べたように、自ブログの過去記事限定で、他のはてなブログの記事を引用したブログカードには適用されません。

 <script type="text/javascript">
  var blogCardBgColor = "#E6E6FA"; //背景色
  var blogCardBorderColor = "black"; //枠色
  window.onload = function() {
    var article = document.getElementById("main");
    var blogCard = article.getElementsByTagName("iframe");
    for (var i = 0; i < blogCard.length; i++) {
      blogCard[i].style.backgroundColor = blogCardBorderColor;
      try {
        var blogbody = new Array;
        blogbody[i] = blogCard[i].contentWindow.document;
      } catch(e) {return;}
      var wrapper = new Array;
      wrapper = blogbody[i].getElementsByTagName("div");
      wrapper[0].style.backgroundColor = blogCardBgColor;
    }
  }
  </script>

上記をコピーして、管理画面の [デザイン]→[カスタマイズ] から、フッタの「HTMLを記述できます」の欄に貼り付けてください。
最初の2行が色の設定ですので、お好みで。

1記事に複数のカードがある場合でも有効なようにしたつもりです。
テスト環境でのスクリーンショット。

f:id:meefla:20151227100643j:image
(テストに使用したはてなブログは非公開です)

最初の読み込みで適用されない時は、ページをリロードしてみてると適用されるかもです。
お試しください。

なお、私は基本的にプログラムの人ではないので、そもそも動作しないとか、もっとエレガントな方法があるという可能性もあります。
誰とは言いませんが a-kuma3 さんのような人が赤ペン先生になってくれると期待しています。



追記です。(2015年12月27日 午後11時10分)

コメント欄で a-kuma3 さんから頂いたご助言を反映した修正版です。

 <script type="text/javascript">
  // see http://q.hatena.ne.jp/1450950546
  var blogCardBgColor = "#f8f4e6"; //背景色
  var blogCardBdColor = "#b3b3b3"; //枠色
  window.onload = function() {
    var article = document.getElementById("main");
    var blogCard = article.getElementsByTagName("iframe");
    for (var i = 0; i < blogCard.length; i++) {
      try {
        var blogBody = blogCard[i].contentWindow.document;
        var wrapper = blogBody.getElementsByTagName("div");
        wrapper[0].style.backgroundColor = blogCardBgColor;
        blogCard[i].style.backgroundColor = blogCardBdColor;
      } catch(e) {
        // NOP
      }
    }
  }
  </script>

修正のついでに、この質問の URL をコメントに入れておきました。
色の指定もお使いの色使いに変えてあります。
ブラウザ上の動作は変わりないと思いますけど、こちらのほうがエレガントですので、お手数ですが差し替えていただければ幸いです。

他13件のコメントを見る
id:Michiko_70554148

修正版をフッタに入れました。
このカスタマイズは、けっこう重宝すると思うので、知らない人は、早く気がついてもらえるといいと、思います。
jqueryのロードも要らないし、自分の好きな色を決めて、そこだけ変えて、フッタに入れればいいだけなら、慣れない人でも、すぐにできそうな気がします。
はてなブログを使っていると、もともとがシンプルなので、もっとこうしたいとかああしたいと思っている人は、けっこういるのかもしれませんが、自分自身が詳しくないとか、難しそうだと思って、最初から諦めている人が、多いかもしれませんですね。
それにしても、これはいいと思います。
この前の、a-kumaさんの、記事の文字数も、すごく重宝しているんですが、あれなんかも、「できる」とわかれば、やる人はけっこういそうな気がするんですが、知らないからやらないだけということが、多いかもしれません。もったいないですね。

2015/12/28 00:22:18
id:Michiko_70554148

なお、ほかのユーザーさんからの「喜びの声」などが寄せられるかもしれませんので、あと少しは、このスレッドを開けておきます。

2015/12/28 01:03:13

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません