いままでとても便利なので、はてなブログのブログカードを使ってきましたが、いくつか問題がありました。
その一つが、
参照元が「hatenablog.com」になってしまうので、リンク先のサイト側からは「どんなサイトからリンクされているか」がわからないことになってしまっていました。
そのため「はてな風ブログカード」をブックマークレットで作成する方法に切り替えました。
「さらさらぶろぐ」さんの記事を参考にしております。 ↑これが「はてな風ブログカード」
↑これがいままでのはてなブログのブログカード
「さらさらぶろぐ」さんの方法に少し変更を加えてあります。
作成方法は
方法 ①
適当なページで仮ブックマークをブックマークバー等に作成する。
次に、下記のコードをコピーして、仮ブックマークの編集でURLに張り付ける。
方法 ②
以下のリンクをブックマークバー等にドラッグすれば作成完了。
こちらの方が簡単！
そのため「はてな風ブログカード」をブックマークレットで作成する方法に切り替えました。
「さらさらぶろぐ」さんの記事を参考にしております。 ↑これが「はてな風ブログカード」
↑これがいままでのはてなブログのブログカード
「さらさらぶろぐ」さんの方法に少し変更を加えてあります。
- リンクをブログカード全体にした。
- ブックマークレットの作成でURL短縮を使ってコード短縮。
- ファビコン取得をGoogleにした。
- 安全のため(念のため)、noopener属性を追加。
- はてなのユーザーを削除。
- CSSの微調整。
※ noopener属性をつけたくない人はお手数ですが下記(方法①)のソースからrel="noopener"を削除してください。
詳しくは、 こちら を読んでみてください。
作成方法は
準備：ブックマークレット「はてな風ブログカード」をブックマークにセット
方法 ①
適当なページで仮ブックマークをブックマークバー等に作成する。
次に、下記のコードをコピーして、仮ブックマークの編集でURLに張り付ける。
javascript:(!function(d,f,s){s=d.createElement("script");s.src="//j.mp/1bPoAXq";s.onload=function(){f(jQuery.noConflict(1))};d.body.appendChild(s)}(document,function($){var%20ogurl=$("meta[property='og:url']").attr("content");var%20ogtitle=$("meta[property='og:title']").attr("content");var%20ogdesc=$("meta[property='og:description']").attr("content");var%20ogimg=$("meta[property='og:image']:last").attr("content");var%20urlhost=location.host;if(ogtitle==null){ogtitle=document.title};if(ogurl==null){ogurl=location.href};if(ogdesc==null){ogdesc=""};if(ogimg==null){ogimg=""};var%20card=' <!--ブログカード--><div%20class="blogcard"><a%20href="'+ogurl+'"rel="noopener"target="_blank"><div%20class="blogcard-thumb"><img%20src="'+ogimg+'"></div><p%20class="blogcard-title">'+ogtitle+'</p><p%20class="blogcard-desc">'+ogdesc+'</p><div%20class="blogcard-footer"><img%20src="https://www.google.com/s2/favicons?domain='+urlhost+'"><span>'+urlhost+'</span></div></a></div><!--ブログカードEND-->';prompt("blogcard",card);}))
方法 ②
以下のリンクをブックマークバー等にドラッグすれば作成完了。
こちらの方が簡単！
「はてな風ブログカード」
はてなブログのブログカードは出力されたコードがシンプルでよかったのですが、「はてな風ブログカード」は少し長くなってしまいます。
でも、これで以上の問題を解決できます。
準備：QooQ本体のHTML編集で最初の方のCSS記載部分にセット
以下のコードを QooQ 本体の HTML編集で最初の方の CSS記載部分にセットする。
/****************************************
はてな風ブログカード
*****************************************/
.blogcard{max-width:680px; margin:0 0 20px 0; background:#fff; border:1px solid #ddd; border-radius:5px; box-shadow: 2px 2px 2px rgba(0,0,0,0.5); transition-duration:0.5s; padding: 10px 10px 5px 15px; line-height: 1.2 !important; }
.blogcard:hover{box-shadow: 6px 6px 6px rgba(0,0,0,0.5);transform: translateY(-6px);transition-duration: 0.5s;opacity: .7;}
.blogcard-thumb img{width:110px;height:110px;float:right;object-fit:cover;margin:0 0 10px 10px; vertical-align:middle;display:inline;text-align:center;}
.blogcard-title {color:#64b;font-weight:bold;font-size:16px; margin:0 0 10px 0;}
.blogcard-desc{margin:0 !important; color:#666; font-size:11px;}
.blogcard-footer{border-bottom:1px solid #eee; clear:both; margin:0 0 1px 0; padding:0;}
.blogcard-footer span{color:#64b;font-size:11px;margin:2px 0 6px 0 !important;}
.blogcard-footer img{margin:0 5px 0 0px !important; padding:0; border:none; display:inline; vertical-align:middle;}
ブックマークレットでコードを作成して記事に貼り付け
あとは、ブログカードを生成したいWEBページで、ブックマークレット「はてな風ブログカード」をクリックして、ポップアップ出力されたHTMLをコピーして記事に貼り付けすればOK
ブックマークレットを使う理由
- 仕様が API の提供側「はてな」に依存してしまうのを防ぐ。
- 参照元が「hatenablog.com」になる（=リンク先のサイト側からは「どんなサイトからリンクされているか」がわからない）。
- 外部からのAPI利用を「はてな」が正式に許可しているわけではない模様。
はてなブログのブログカードは出力されたコードがシンプルでよかったのですが、「はてな風ブログカード」は少し長くなってしまいます。
でも、これで以上の問題を解決できます。
0 件のコメント:
コメントを投稿