使い方は、以下の記事を参照してください。
「はてなブログカード」のiframeなしの使い方
あらかじめ、以下のCSSをブログのCSSとして、コピペしておいてください。
対応ブラウザは、Chromeです。また、JavaScriptをオンにしておいてください。
免責事項:このサイトを利用して、不利益を負ったとしても、
当サイト及び管理人はいかなる責任も負わないものとします。ご了承ください。
はてなブログの場合は、「デザインCSS」などにコピペします。
WordPressの場合は、子テーマのCSSにコピペしておきます。
エディタのCSSにもコピーしておくと、エディタでもほぼ公開された見た目通りに表示されます。
CSSコード:
/*はてなブログカードCSS*/
.embed-wrapper {
background-color: #fff;
font-size: 13px;
border: 1px solid rgba(0,0,0,.1);
border-top-right-radius: 3px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-radius: 3px;
background-clip: padding-box;
box-sizing: border-box;
max-width:500px;
}
.embed-wrapper-inner {
padding: 12px;
}
.embed-wrapper * {
word-wrap: break-word;
word-break: break-all;
}
.embed-header {
position: relative;
padding-left: 35px;
height: 30px;
margin-bottom: 5px;
}
.embed-header .blog-icon {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-radius: 30px;
background-clip: padding-box;
}
.embed-logo .embed-logo-img {
vertical-align: middle;
opacity: .6;
width: 100px;
height: 18px;
}
.embed-header .blog-title, .embed-header .blog-user {
font-size: 12px;
line-height: 1.3;
overflow: hidden;
max-height: 15px;
display: -webkit-box;
-webkit-line-clamp: 1;
}
.embed-header .blog-title {
margin: 0;
color: #0e6ace;
margin-right: 110px;
}
a:link, a:visited {
color: #0e6ace;
text-decoration: none;
}
.embed-logo {
position: absolute;
top: 0;
right: 0;
}
.embed-content.with-thumb {
min-height: 100px;
}
.embed-content {
position: relative;
height: 100px;
overflow: hidden;
}
.embed-content .thumb-wrapper {
position: absolute;
top: 0;
right: 0;
}
.embed-content .thumb-wrapper .thumb {
width: 100px;
height: 100px;
}
.embed-content.with-thumb .entry-body {
margin-right: 110px;
}
.embed-content .entry-title {
font-size: 17px;
font-weight:bold;
border-left: 0px;
margin: 0 0 2px;
line-height: 1.4;
max-height: 47px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.embed-content .entry-title a {
font-size: 17px;
color: #3d3f44;
}
.embed-content .entry-title a:link, a:visited {
text-decoration: none;
}
.embed-content .entry-content {
line-height: 1.5;
font-size: 12px;
max-height: 72px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.embed-footer {
margin-top: 8px;
height: 15px;
position: relative;
font-size: 11px;
}
.embed-footer .favicon {
width: 16px;
height: 16px;
}
.embed-footer a {
color: #9aa5ab;
}
.embed-footer a:link, a:visited {
text-decoration: none;
}
.embed-footer .star-count {
padding-bottom: 1px;
}
.embed-footer img {
vertical-align: middle;
}