はてなブログでよく見るタイトルやらサムネイルやらが一緒になったリンクのことをブログカードと呼ぶらしい． 我がブログでもそれっぽいものを作ってみたいなあ，と思って調べたのだが，あれははてなが提供しているサービスらしく，そのままBloggerでは使えない．外部から利用する方法...
これを作ってからというものの，密かに気になっていたのが画像のアスペクト比．元の画像の上下がややカットされ，少し横長になった印象を受ける．
このカードを作ろうと思ったきっかけははてなブログで見かけたカードなのだが，そちらの画像で横長の印象を受けたことはない．
調べたところ，OGPという観点から言えばBloggerが提供するやや横長の画像が標準．はてなのカードははてなのオリジナルアスペクト比になっているようだ．
このカードの配置ははてなブログのそれを参考にしたのだが，どうも横長の画像との相性が悪いように感じる．
↑の記事でも書いたとおり，画像を直リンクしている都合上他所様のブログにリンクを貼るときには使えない（と思う）ので，自サイトの横長の画像が返ってくることを前提に，吐き出すHTMLコードを書き換えてみた．
はてなブログでよく見るタイトルやらサムネイルやらが一緒になったリンクのことをブログカードと呼ぶらしい． 我がブログでもそれっぽいものを作ってみたいなあ，と思って調べたのだが，あれははてなが提供しているサービスらしく，そのままBloggerでは使えない．外部から利用する方法...
それがこれ．
無駄なスペースも減り，HTMLもシンプルに．一石二鳥．
【CSS】
/*ブログカードver2*/
.Rblogcard2 {
border: 1px solid gray;
display:inline-block;
max-width: 400px;
padding: 5px;
margin-bottom: 10px;
box-shadow:1px 1px 6px 3px #c9c9c9;
-moz-box-shadow:1px 1px 6px 3px #c9c9c9;
-webkit-box-shadow:1px 1px 6px 3px #c9c9c9;
}
.Rblogcard_title2{
font-weight: bold;
}
.Rblogcard_des2{
font-size:70%;
}
.Rblogcard_img2{
max-width:400px;
min-width:200px;
}
.Rblogcard_url2 {
font-size:90%;
}
/*ブログカードver2*/
【javascript】
javascript:(
function(){
var metas = document.getElementsByTagName("meta");
function searchTitle(ms){
for(i=0; i<ms.length; i++){
if(ms[i].getAttribute("property")=="og:title"){
return ms[i].getAttribute("content");
}
}
return "";
}
function searchURL(ms){
for(i=0; i<ms.length; i++){
if(ms[i].getAttribute("property")=="og:url"){
return ms[i].getAttribute("content");
}
}
return "";
}
function searchDescription(ms){
for(i=0; i<ms.length; i++){
if(ms[i].getAttribute("property")=="og:description"){
return ms[i].getAttribute("content");
}
}
return "";
}
function searchImgURL(ms){
for(i=0; i<ms.length; i++){
if(ms[i].getAttribute("property")=="og:image"){
return ms[i].getAttribute("content");
}
}
return "";
}
var title = searchTitle(metas);
var URL = searchURL(metas);
var des = searchDescription(metas);
var img = searchImgURL(metas);
var s = '<div><div class="Rblogcard2"><div><img class="Rblogcard_img2" src="' + img +'"></div><div><span class="Rblogcard_title2"><a href="' + URL +'" target="_blank">' + title +'</a></span></div><div><span class="Rblogcard_des2">' + des + '</span></div><div><a class="Rblogcard_url2" href="' + URL + '" target="_blank">' + URL + '</a></div></div></div>';
if(img==''){
var s = '<div><div class="Rblogcard2"><div><span class="Rblogcard_title2"><a href="' + URL +'" target="_blank">' + title +'</a></span></div><div><span class="Rblogcard_des2">' + des + '</span></div><div><a class="Rblogcard_url2" href="' + URL + '" target="_blank">' + URL + '</a></div></div></div>';
}
var d = window.open().document;
d.writeln('<textarea rows=15 cols=80>'+s+'</textarea>');
d.close();
})();
画像を右にしてーみたいな細かいあれこれがなくなったのでHTMLは大幅にシンプルになった．あの処理苦手，というより未だに理屈がよくわかっていないところもあるのでシンプルにできてよかった．
苦手だったCSSはようやく色々わかってきたけど，HTML5は全然わからないから体系的に勉強してみたいなあと思いつつ，さすがにそこまでの時間がない．
