Skip to content

Instantly share code, notes, and snippets.

@3846masa

3846masa/hatenaCardBgChanger.js

Last active August 29, 2015 14:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save 3846masa/bc12ff8a308f2a3e0648 to your computer and use it in GitHub Desktop.
Save 3846masa/bc12ff8a308f2a3e0648 to your computer and use it in GitHub Desktop.
Download ZIP
はてなのブログカードの背景を無理やり変えるjavascript（クリックできると思う）
Raw
hatenaCardBgChanger.js
/*
hatenaCardBackgroundChanger
@3846masa
iframeの属性にbackgroundを追加してcss方式で書くとなる（多分）。
*/
window.addEventListener('load',function(){
var list = document.querySelectorAll('iframe[src*="hatenablog.com/embed"][background]');
Array.prototype.forEach.call(list, function(node){
var div = document.createElement('div');
div.classList.add('hatenacard-wrap');
div.style.position = 'relative';
var innerDiv = document.createElement('div');
innerDiv.style.cssText = node.style.cssText;
innerDiv.style.cssText += 'position: absolute; top: 0; left: 0; border-radius: 7px;';
innerDiv.style.background = node.getAttribute('background');
div.insertBefore(innerDiv, null);
node.style.opacity = 0.9;
node.parentNode.insertBefore(div, node);
div.insertBefore(node, null);
});
});
Raw
sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>HelloWorld</title>
<script src='./hatenaCardBackgroundChanger.js'></script>
</head>
<body>
<iframe style="width:100%;height:155px;max-width:100%;margin:0 0 1.7rem;display:block;" background="black" src="http://hatenablog.com/embed?url=http://example.com/" width="300" height="150" frameborder="0" scrolling="no"></iframe>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment