読者です 読者をやめる 読者になる 読者になる

気楽に生きよう!

うつ病、野球、エンタメ 色々喋るよ

はてなブログカードのカスタマイズ

スポンサーリンク

この記事はご覧のスポンサーの提供でお送りします

f:id:nuruta:20170312013233j:plain
ブログカードのカスタマイズが出来たので、喜びと共に記事にしてみます。

ブログカードをカスタマイズしたかった。

はてなのブログカード。
こういうのですね
nuruta2.hatenablog.com

色々と検索して、やり方が少し分かったので忘備録。

CSSを弄る

インラインフレームを使ってるので、CSSにちまちま書き込んでも反映されない。
なので、Javascriptを組まないとならない。
でも分からなかったので、検索したら、バッチリなものがありました。

はてなのブログカードに、背景色をつけたいと思って、いろいろい… - 人力検索はてな

人力検索はてなの質問です。
世の中、凄い人ばっかり。

で、僕はグラデーションとかやりたいなと思ったので、少しだけ改造してみました。
基本コードはそのまんま。

  // see http://q.hatena.ne.jp/1450950546
  var blogCardBgColor = "linear-gradient(-90deg, #007EBD, #DFE2F1)"; //背景色グラデ
  var blogCardColor="#ff0000"; //文字色
  var blogCardBdColor = "#b3b3b3"; //枠色
  window.onload = function() {
    var article = document.getElementById("container");
    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.backgroundImage = blogCardBgColor;
        wrapper[0].style.color = blogCardColor;
        wrapper[0].style.a.color = blogCardColor;
        blogCard[i].style.backgroundColor = blogCardBdColor;
      } catch(e) {
        // NOP
      }
    }
  }

ついでに文字色も変えてみたり。
リンクの色も変えたいのですが、そこが分からない。
なんとかしたいものです…。

ブログカードを作る。

javascrioptでブログカードを作る方法って、2通りあるようですので、覚書。

1つは、はてなブログのブログカード。
記事のURL内の「entry」を「embed」に変えてやる。
例えばこんな感じに。

http://nuruta.hatenablog.com/embed/2017/01/26/000000

これで、ブログカードになる。

はてなブログ以外だとこの方法は多分使えないので、以下のようにする。

https://hatenablog-parts.com/embed?url=【記事URL】

もしくは

https://hatenablog.com/embed?url=【記事URL】

これでもいけた気がします。(こっちははてなブログだけかも?)


これらの方法でブログカードを作れるので、これ知った時はいっきに作業がはかどりました。

終わりに

以上覚書でした。