はてなブログカードのカスタマイズ
ブログカードのカスタマイズが出来たので、喜びと共に記事にしてみます。
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】
これでもいけた気がします。(こっちははてなブログだけかも?)
これらの方法でブログカードを作れるので、これ知った時はいっきに作業がはかどりました。
終わりに
以上覚書でした。