OGP 未対応のページではてなブログカード風の何かを作る
【2019-04-16 追記】現在では WikiPedia に対応していて普通にブログカードで貼り付けることができる。
はてなブログカード便利ですね。
はてなブログだと。↓こういう風にエントリーを埋め込める。よろしい。
しかし・・・Wikipedia のページを埋め込もうとすると・・・これ↓
カードで埋め込めない、残念な感じになる。
その対策としてこういう記事が。
これに従って記事埋め込むと・・・これ↓
枠が嵌っただけで残念感に変わりなし。
Open Graph protocol というものに対応してないとこの方式でやってもダメなようだ。
なので自力で作ることにした。つまり自力で HTML と CSS を全部書くと、こうなる。
綺麗に整形できているように見える。コードは以下のようになる。単にはてなのやつをパクっているだけ。
<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);})();
こいつを実行すると、タイトル、ドメイン、リンク、まで設定するので、あとは説明と画像を叩きこめばよい
- 作者: 小島アジコ
- 発売日: 2015/08/20
- メディア: Kindle版
- この商品を含むブログ (2件) を見る
- 出版社/メーカー: マガジンボックス
- 発売日: 2016/04/21
- メディア: ムック
- この商品を含むブログを見る