KSKV

Khong Say Khong Ve. ベトナムの意味なし画像集

OGP 未対応のページではてなブログカード風の何かを作る

【2019-04-16 追記】現在では WikiPedia に対応していて普通にブログカードで貼り付けることができる。

ja.wikipedia.org

はてなブログカード便利ですね。

zamad.hatenablog.com

はてなブログだと。↓こういう風にエントリーを埋め込める。よろしい。

zamad.hatenablog.com

しかし・・・Wikipedia のページを埋め込もうとすると・・・これ↓

オグリキャップ - Wikipedia

カードで埋め込めない、残念な感じになる。

その対策としてこういう記事が。

nelog.jp

これに従って記事埋め込むと・・・これ↓

枠が嵌っただけで残念感に変わりなし。

Open Graph protocol というものに対応してないとこの方式でやってもダメなようだ。

なので自力で作ることにした。つまり自力で HTML と CSS を全部書くと、こうなる。

オグリキャップ - Wikipedia

オグリキャップ(Oguri Cap、1985年3月27日 - 2010年7月3日)は、日本の競走馬、種牡馬である。「平成三強」の一頭。第二次競馬ブーム期に、ハイセイコーに比肩するとも評される[1]高い人気を得た。 1988年度のJRA賞最優秀4歳牡馬、1990年度のJRA賞最優秀5歳以上牡馬および年度代表馬


綺麗に整形できているように見える。コードは以下のようになる。単にはてなのやつをパクっているだけ。

<div class="body-iframe page-embed hatena-web-card">
<div class="embed-wrapper">
<div class="embed-wrapper-inner">
<div class="embed-content with-thumb">
<div class="thumb-wrapper">
<a href="https://ja.wikipedia.org/wiki/%E3%82%AA%E3%82%B0%E3%83%AA%E3%82%AD%E3%83%A3%E3%83%83%E3%83%97" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Oguri_Cap_in_Yushun_Stallion_station.jpg/500px-Oguri_Cap_in_Yushun_Stallion_station.jpg" class="thumb">
</a>
</div>
<div class="entry-body">
<h2 class="entry-title">
<a href="https://ja.wikipedia.org/wiki/%E3%82%AA%E3%82%B0%E3%83%AA%E3%82%AD%E3%83%A3%E3%83%83%E3%83%97" target="_blank">
オグリキャップ - Wikipedia
</a>
</h2>
<div class="entry-content">
オグリキャップ(Oguri Cap、1985年3月27日 - 2010年7月3日)は日本の競走馬、種牡馬である。
「平成三強」の一頭。第二次競馬ブーム期に、ハイセイコーに比肩するとも評される[1]高い人気を得た。
1988年度のJRA賞最優秀4歳牡馬、1990年度のJRA賞最優秀5歳以上牡馬および年度代表馬
</div>
</div>
</div>
<div class="embed-footer">
<a href="https://ja.wikipedia.org/wiki/%E3%82%AA%E3%82%B0%E3%83%AA%E3%82%AD%E3%83%A3%E3%83%83%E3%83%97" target="_blank">
<img src="https://ja.wikipedia.org/static/favicon/wikipedia.ico" alt="" title="Wikipedia" class="favicon">
ja.wikipedia.org
</a>
</div>
</div>
</div>
</div>

↓このCSSはデザインのカスタマイズ部分に入れれば多分動く

.embed-card.embed-blogcard{
    max-width: 100% !important;
}

.embed-card.embed-webcard{
    max-width: 100% !important;
}
div.entry-content img{
    border-radius: 4px;
    border:2px solid #222 !important;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
}

.entry-content p iframe{
    display:block;
    margin-left:auto;
    margin-right: auto;
}

.entry-content img {
  max-width: 100%;
  max-height: 600px;
  box-shadow: 0 0;
  transition: all 0.3s;
}
.entry-content img:hover {
  box-shadow: 0 4px 8px 2px rgba(0,0,0,0.2);
  transform: scale(1.01);
  transition: all 0.3s;
}

div.page-embed.hatena-web-card{
    height: 155px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

div.page-embed.hatena-web-card div.embed-wrapper-inner{
    padding: 12px;
}

div.page-embed.hatena-web-card div.embed-content.with-thumb{
    height: 100px;
    overflow: hidden;
    position: relative;
}

div.page-embed.hatena-web-card div.embed-content.with-thumb .thumb-wrapper{
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    overflow: hidden;
}
div.page-embed.hatena-web-card div.embed-content.with-thumb .thumb-wrapper .thumb{
    width: auto;
    max-width: 200%;
    height: 100px;
    border: none !important;
    display:block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

div.page-embed.hatena-web-card div.embed-content.with-thumb .entry-body{
    margin-right: 110px;
}
div.page-embed.hatena-web-card div.embed-content.with-thumb .entry-body .entry-title{
    font-size: 17px;
    margin: 0 0 2px;
    line-height: 1.4;
    max-height: 47px;
    overflow: hidden;
    border: none;
}

div.page-embed.hatena-web-card div.embed-content.with-thumb .entry-body .entry-content{
    line-height: 1.5;
    font-size: 12px;
    max-height: 72px;
    overflow: hidden;
    border: none;
    padding-bottom:0;
}

div.page-embed.hatena-web-card div.embed-footer{
    margin-top: 8px;
    height: 15px;
    position: relative;
    font-size: 11px;
}

div.page-embed.hatena-web-card div.embed-footer img.favicon{
    width:16px;
    height: 16px;
    display: inline;
    vertical-align: middle;
    border: none !important;
}

自分のページでしか試してないからあとはどうなるか知らん。

おまけとして、ブックマークレットでも作っておく

javascript: (function(){var favicon; var linkList = document.getElementsByTagName('link'); for(var i = 0; i < linkList.length; i++){ console.log(linkList[i]); if(linkList[i].rel === "shortcut icon"){ favicon = linkList[i].href; break; } } var c = [ '<div class="body-iframe page-embed hatena-web-card"><div class="embed-wrapper"><div class="embed-wrapper-inner"><div class="embed-content with-thumb"><div class="thumb-wrapper">', '<a href="' + document.URL + '" target="_blank">', '<img src="aaaaaaaaaaaaaaaaaaaaaaa" class="thumb" />', '</a>', '</div>', '<div class="entry-body">', '<h2 class="entry-title">', '<a href="' + document.URL + '" target="_blank">', document.title, '</a>', '</h2>', '<div class="entry-content">', 'ここに説明が入ります。', '</div>', '</div>', '</div>', '<div class="embed-footer">', '<a href="' + document.URL + '" target="_blank">', '<img src="' + favicon + '" alt="" title="" class="favicon">', document.domain, '</a> </div> </div> </div> </div>']; var area = document.createElement('textarea'); area.value = c.join('\n'); area.style = "position:absolute;z-index:100000;"; document.body.insertBefore(area, document.body.firstChild);})();

こいつを実行すると、タイトル、ドメイン、リンク、まで設定するので、あとは説明と画像を叩きこめばよい

はてな村奇譚下

はてな村奇譚下

懐かしファミコンパーフェクトガイド (M.B.MOOK)

懐かしファミコンパーフェクトガイド (M.B.MOOK)