せっかく見つけたiframeなしのブックマークレット用スクリプトでしたが、結構な頻度で稼働しないサイトが多いので、ちょっと実用的には難しいかなと思っていたところ、似たようにiframeを使わずに実装できるブックマークレットを公開されている方のサイトを見つけました。

www.granfairs.com

はてな風のブログカードをブックマークレットから作ってみよう！ | 株式会社グランフェアズ

こんにちは、めぐたんです。ブログを書いていると、参考記事や過去に書いた記事など別ページへのリンクを貼る機会が何かと多……

| undefined

1. // ブックマークレット:ショートコード出力用
2.   javascript: (function() {
3.                 (function(d, f, s) {
4.         s = d.createElement(“script”);
5.         s.src = ‘//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js’;
6.         s.onload = function() {
7.             f(jQuery.noConflict(!0))
8.         };
9.         d.body.appendChild(s)
10.     })(document, function($) {
11.       var obj = [];
12.     // obj.title = $(‘title’).text(); //タイトル
13.     obj.title = $(‘meta[property=”og:title”]’).attr(‘content’); //タイトル
15.     obj.img = $(‘meta[property=”og:image”]’).attr(‘content’); //アイキャッチ画像
16.     // 上記タグで取得できない場合
17.     if(obj.img == undefined){
18.   obj.img = ‘https://picsum.photos/160/120/?random’; //ランダム画像を表示
19.   }
20.     obj.desc = $(‘meta[name=”description”]’).attr(‘content’); //サイト概要
21.     // 上記タグで取得できない場合
22.     if(obj.desc == undefined){
23.   obj.desc = $(‘meta[property=”og:description”]’).attr(‘content’); //サイト概要
24.   }
25.     obj.sitename = $(‘meta[property=”og:site_name”]’).attr(‘content’); //サイト名
26.     // obj.key = $(‘meta[name=”keywords”]’).attr(‘content’); //キーワード
27.     obj.url = document.URL; //URL
28.     obj.dsurl = $(‘meta[property=”og:url”]’).attr(‘content’); //表示用URL
29.     obj.domain = location.host; //ドメイン名
30.     // —————————————————–
31.     let strdesc; //obj.descを文字列型とする変数
32.     strdesc = new String(obj.desc); //obj.descを文字列型に変換
33.     var objdescSt = strdesc.substr( 0, 60 ); //文字数を制限して取得
34.     // —————————————————–
35.     const classArray = Array.from(document.body.classList); // WordPressの投稿IDとページIDを取得
36.     const postId = classArray.filter((c) => c.startsWith(‘postid-‘)).toString().slice(7);
37.     const pageId = classArray.filter((c) => c.startsWith(‘page-id-‘)).toString().slice(8);
38.     // ショートコードの出力
39.         var Stcard = ‘[sc_blogcardJS url="' + obj.url + '" title="' + obj.title + '" excerpt="' + objdescSt + '…' +
40.                       '" sitename="' + obj.sitename + '" img="' + obj.img + '" domain="' + obj.domain + '" dsurl="' + obj.dsurl +
41.                       '" postId="' + postId + '" pageId="' + pageId + '"]‘;
42.         prompt(‘ブログカードのShortCodeを生成しました。’, Stcard);})})();

• javascript:(function(){(function(d,f,s){s=d.createElement(“script”);s.src=‘//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js’;s.onload=function(){f(jQuery.noConflict(!0))};d.body.appendChild(s)})(document,function($){var obj=[];obj.title=$(‘meta[property=”og:title”]’).attr(‘content’);obj.img=$(‘meta[property=”og:image”]’).attr(‘content’);if(obj.img==undefined){obj.img=‘https://picsum.photos/160/120/?random’;}obj.desc=$(‘meta[name=”description”]’).attr(‘content’);if(obj.desc==undefined){obj.desc=$(‘meta[property=”og:description”]’).attr(‘content’);}obj.sitename=$(‘meta[property=”og:site_name”]’).attr(‘content’);obj.url=document.URL;obj.dsurl=$(‘meta[property=”og:url”]’).attr(‘content’);obj.domain=location.host;let strdesc;strdesc=new String(obj.desc);var objdescSt=strdesc.substr(0,60);const classArray=Array.from(document.body.classList);const postId=classArray.filter((c)=>c.startsWith(‘postid-‘)).toString().slice(7);const pageId=classArray.filter((c)=>c.startsWith(‘page-id-‘)).toString().slice(8);var Stcard=‘[sc_blogcardJS url="'+obj.url+'" title="'+obj.title+'" excerpt="'+objdescSt+'…'+'" sitename="'+obj.sitename+'" img="'+obj.img+'" domain="'+obj.domain+'" dsurl="'+obj.dsurl+'" postId="'+postId+'" pageId="'+pageId+'"]‘;prompt(‘ブログカードのShortCodeを生成しました。’,Stcard);})})();

1. // ———————————————
2.   // ブックマークレットで取得したショートコードからブログカードを作成
3.   // ———————————————-
4.   function show_blogcardJS($atts) {
5.   extract(shortcode_atts(array(
6.   ‘url’=>“”,
7.   ‘title’=>“”,
8.   ‘excerpt’=>“”,
9.       ‘sitename’=>“”,
10.       ‘img’=>“”,
11.       ‘domain’=>“”,
12.       ‘dsurl’=>“”
13.       // ‘postId’=>””,
14.       // ‘pageID’=>””
15.   ),$atts));
16.     // 内部リンクか外部リンクの判定
17.     $homedmain = wp_parse_url( home_url(), PHP_URL_HOST );
18.     // 内部リンクの場合
19.     if($domain == $homedmain){
20.       $cssjdge = “inblg”; //内部リンククラス追加
21.       $dmbudge = “関連する記事”; //バッジ表示
22.       $tempurl = get_template_directory_uri();
23.       $favicon = $tempurl.‘/images/favicon.ico”‘; //ファビコン取得
24.       $id = url_to_postid($url); // URLから投稿IDを取得
25.       $siteinfo = get_bloginfo( ‘name’ ); // サイト情報
26.       // $postcat = get_the_category($id); //カテゴリ取得
27.       // $catname = $postcat[0]->name; //カテゴリ表示
28.       // $sitename = get_bloginfo( ‘name’ ); // サイト名
29.       // $postview = getPostViews($id); // アクセス数
30.       // $postdate = get_the_date(‘Y年n月j日’, $id); // 投稿日
31.       // $siteinfo = $sitename.'<span class=”article-date”><i class=”far fa-clock”></i><time>’. $postdate .'</time></span>
32.       // <span class=”view-count”>’. $postview .'</span>’;
33.     // 外部リンクの場合
34.     } else {
35.       $cssjdge = “ex”; //外部リンククラス追加
36.       $dmbudge = $domain; //バッジ表示
37.       $favicon = ‘https://www.google.com/s2/favicons?domain=’.$url; //ファビコン取得
38.       $siteinfo = $dsurl .‘ | ‘. $sitename; // サイト情報
39.     }
40.     // var_dump($catname); // デバッグ用
41.     // ブログカードタグ出力
42.   $sc_Linkcard .=‘
43.     <div id=”blogcard” class=”blogcard ‘. $cssjdge .‘”>
44.       <a href=”‘. $url .‘” target=”_blank”>
45.           <div class=”blogcard_thumbnail”><img src=”‘. $img .‘” alt=””><span class=”cat-data”>’. $catname .‘</span></div>
46.           <div class=”blogcard_domain”>’. $dmbudge .‘</div>
47.           <div class=”blogcard_content”>
48.             <div class=”blogcard_title”>’. $title .‘</div><div class=”blogcard_excerpt”>’. $excerpt .‘…</div>
49.             <div class=”blogcard_link”><img class=”favicon” src=”‘. $favicon .‘” alt=””>’. $siteinfo .‘</div>
50.           </div>
51.         <div class=”clear”></div>
52.       </a>
53.     </div>’;
54.   return $sc_Linkcard;
55.   }
56.   //ショートコードに追加
57.   add_shortcode(“sc_blogcardJS”, “show_blogcardJS”);

1. /* ========================================================================================= */
2. /* ブログカード*/
3. /* ========================================================================================= */
4. /* ブログカード（内部リンク用）*/
5. div#blogcard {
6.   position: relative;
7.   border-radius: 5px;
8.   border: 1px solid #eeeeee;
9.   word-wrap: break-word;
10.   margin: 30px 40px;
11.   box-shadow: 0 0 10px 6px rgba(0,0,0,.025);
12.   display: block;
13.   min-height: 8rem;
14. }
15. /* ブログカード（外部URL用）*/
16. div#blogcard.ex {
17.   background-color: #f7f7f7;
18. }
19. /* ブログカード（内部リンク用）*/
20. div#blogcard.inblg {
21.   background-color: #F4F9FD;
22. }
23. /* ブログカード（Booking.com-URL用）*/
24. div#blogcard.bkg {
25.   background-color: rgba(0,53,128,0.85);
26. }
27. /* ブログカード：概要説明 */
28. div#blogcard > a > div.blogcard_content {
29.   line-height: 0;
30.   font-size:inherit;
31.   letter-spacing: 0;
32. }
33. /* ブログカード背景色：内部リンク */
34. div#blogcard div.blogcard.inblg {
35.   background-color: #F4F9FD;
36. }
37. div#blogcard a,
38. div#blogcard a a:visited {
39.   color:inherit;
40.   text-decoration: none;
41.   opacity: 1;
42.   transition: all 0.2s ease;
43. }
44. div#blogcard a:hover {
45.   opacity: 0.6;
46.   color: #0270BE;
47. }
48. /* サムネイル画像 */
49. div#blogcard div.blogcard_thumbnail {
50.   float: left;
51.   padding: 15px;
52. }
53. /* タイトル */
54. div#blogcard div.blogcard_title {
55.   font-size: 1em;
56.   font-weight: bold;
57.   line-height: 1.4;
58.   padding: 15px 20px 5px;
59.   min-height: 3.5rem;
60. }
61. /* ブログカード（Booking.com-URL用）*/
62. div#blogcard.bkg div.blogcard_title {
63.   color: #fff;
64.   padding: 17px 20px 5px 0;
65.   min-height: 4.5rem;
66. }
67. /* 概要文 */
68. div#blogcard div.blogcard_excerpt {
69.   font-size: 0.75em;
70.   line-height: 1.4;
71.   padding: 0 17px 5px 20px;
72.   min-height: 2.5rem;
73. }
74. /* ブログカード（Booking.com-URL用）*/
75. div#blogcard.bkg div.blogcard_excerpt {
76.     font-size: 0.8em;
77.     line-height: 1.1;
78.     padding: 0 17px 5px 20px;
79.     color: #ccc;
80.     min-height: 2.5rem;
81. }
82. div#blogcard div.blogcard_link {
83.   font-size:0.65em;
84.   padding:0 17px 15px 20px;
85.   text-align: left;
86.   height: auto;
87. }
88. /* ブログカード（Booking.com-URL用）*/
89. div#blogcard.bkg div.blogcard_link {
90.   background-color: #fff;
91.   font-size: 1rem;
92.   padding: 0 10px 0 0;
93.   text-align: right;
94.   min-height: 3rem;
95. }
96. div#blogcard.bkg div.blogcard_link > img {
97.   padding: 10px 0 0 0;
98. }
99. div#blogcard div.blogcard_link .favicon {
100.   margin-bottom: -4px;
101.   margin-right: 5px;
102. }
103. div#blogcard div.blogcard_date {
104.   margin-bottom: -4px;
105. }
106. /*サムネイル：外接トリミング*/
107. div#blogcard div.blogcard_thumbnail img,
108. div#blogcard div.blogcard_content img.thumbnail-in {
109.   width: 170px;/*original 240px;*/
110.   height:110px;/*original 160px*/
111.   object-fit: cover;
112. }
113. /*サムネイル：外接トリミング*/
114. div#blogcard div.blogcard_link > img.favicon-in,
115. div#blogcard.inblg div.blogcard_link .favicon {
116.   width: 18px;/*original 240px;*/
117.   height: 18px;/*original 160px*/
118.   object-fit: cover;
119. }
120. div#blogcard div.blogcard_link .icon-external-link-alt::before {
121.   font-size:0.75em;
122. }
123. span.site_title-in {
124.   font-size: 0.75rem;
125.   font-weight: bold;
126.   position: absolute;
127.   color:#163957;
128.   padding: 0 5px;
129. }
130. div#blogcard.inblg div.blogcard_link {
131.   font-size: 0.75rem;
132.   font-weight: bold;
133.   /* position: absolute; */
134.   color:#163957;
135.   padding: 0 5px;
136. }
137. /* ========================================================================================= */
138. /* ブログカード；ブックマークレット対応バージョンの追加*/
139. /* ========================================================================================= */
140. /*ブログカードのタイトル*/
141. .blogcard .heading a{
142. color:#524742;/*文字カラー*/
143. font-size:20px;
144. margin-left:10px;
145. margin-right:10px;
146. }
147. /*ホバー時のエフェクト*/
148. .blogcard:hover{
149. transition-duration:0.2s;
150. background:#F2F0E9;/*背景色*/
151. -webkit-transform: translateY(-3px); /*浮かす*/
152. -ms-transform: translateY(-3px); /*浮かす*/
153. transform: translateY(-3px); /*浮かす*/
154. box-shadow: 5px 5px 13px 2px rgb(0 0 0 / 10%);/*浮いた時の影*/
155. }
156. /*ドメインバッジ*/
157. div#blogcard .blogcard_domain{
158. position: absolute;
159. font-size: 0.7rem;
160. padding: 0 0.5em;
161. background-color:#3e62ad;/*背景色*/
162. transform: translateY(-50%) translateX(2.3em);
163. color:#fff;/*文字カラー*/
164. border-radius: 0px ;
165. }
166. div#blogcard.ex .blogcard_domain{
167.   background-color:#464646;/*背景色*/
168. }
169. div#blogcard.inblg .blogcard_domain{
170.   background-color:#3e62ad;/*背景色*/
171. }
172. /*ドメインバッジのアイコン：外部リンク用*/
173. div#blogcard.ex .blogcard_domain::before{
174.   font-family: ‘Font Awesome 5 Free’;
175.   font-weight: 900;
176.   content: ‘\f0c1’;
177.   margin-right: 2px;
178. }
179. /*ドメインバッジのアイコン：内部リンク用*/
180. div#blogcard.inblg .blogcard_domain::before{
181.   font-family: ‘Font Awesome 5 Free’;
182.   font-weight: 900;
183.   content: ‘\f00c’;
184.   margin-right: 2px;
185. }
186. /* 内部リンク：カテゴリ表示 */
187. div#blogcard.inblg .cat-data {
188.     font-size: .6rem;
189.     position: absolute;
190.     bottom: 1px;
191.     left: 15px;
192.     padding: 0.2rem 0.3rem;
193.     color: #fff;
194.     background-color: rgb(88,122,160,.6);
195. }
196. /* 内部リンク；投稿日表示 */
197. #blogcard.inblg span.article-date {
198.     font-size: .75rem;
199.     color: #888888;
200.     margin-left: 3px;
201.     font-weight: normal;
202. }
203. /* 内部リンク：投稿日時表示 */
204. #blogcard.inblg div.blogcard_link time {
205.     margin-left: 2px;
206. }
207. /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
208.     /* スマホ表示用：画面幅599pxには全て適用 */
209. /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
210. @media(max-width: 599px) {
211.   html {
212.     font-size: 15px;
213.   }
214.   .header-inner,
215.   .container,
216.   .footer-inner {
217.     padding: .8rem;
218.   }
219. header#masthead hgroup{
220.   height: 80px;
221. }
222.   .contents {
223.     margin-bottom: 1rem;
224.   }
225. .article-list .datetime{
226.   display: none;
227. }
228.   /* ——————————————————— */
229.   /* ブログカード */
230.   /* ——————————————————— */
231.   div#blogcard {
232.     margin: 10px 0;
233.   }
234.   div#blogcard .blogcard_thumbnail img,
235.   div#blogcard .blogcard img.thumbnail-in {
236.     width: 90px;
237.     height: auto;
238.   }
239.   div#blogcard .blogcard_title {
240.     font-size: 0.95em;
241.     padding-bottom: 17px;
242.   }
243.   div#blogcard .blogcard_excerpt {
244.     display: none;
245.   }
246.   div#blogcard div.blogcard_thumbnail img {
247.     width: 105px;
248.     height: 70px;
249.   }
250.   div#blogcard.inblg .cat-data {
251.     bottom:auto;
252.   }
253.   div#blogcard div.blogcard_title {
254.     font-size: 0.9em;
255.   }
256.   div#blogcard div.blogcard_link {
257.     display: none;
258.   }
259. } /*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝スマホ表示用終わり