はてな風ブログカードのブックマークレットを導入してみた

SHARE

Aug 25 2015hatena blogcard bookmarklet1

みっきぃ(@miki73_m)です。前回「Emdedlyカード」について紹介しました。

↓こんな感じ

「Embedlyカード」がはてなブログカードと違ってまたいい感じ

はてな風ブログカードと差別化しようと思って取り入れたのですが、やっぱりはてな風ブログカードも気になる・・・

なにかいいのないか探していた所、さらさらり(@sarasaralli)さんがはてな風ブログカードのブックマークレットを紹介してくれていたので、導入してみました。こちらも「Embedly」のようにはてなブログを経由しないみたいです。

はてな風ブログカードのブックマークレット導入方法

スタイルシート(style.css)

WordPressの「管理画面」ー「外観」ー「テーマの編集」の「スタイルシート」（style.css)に下記のコードを追加します。小テーマで編集するのをオススメします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/*--------------------------------------*/
/* ブログカード ここから */
/*--------------------------------------*/
.blogcard{
width:100%;
max-width:500px !important;
margin:0 0 20px 0;
background:#fff;
border:1px solid#ccc;
border-radius:5px;
box-sizing:border-box;
padding:12px;
}
.blogcard-thumb{
width:100px;
height:100px;
float:right;
margin:0 0 10px 10px;
padding:0;
position:relative;
overflow:hidden;
}
.blogcard-thumb a{
position:absolute;
width:1000%;
left:50%;
margin:0 0 0 -500%;
text-align:center;
}
.blogcard-thumb img{
width:auto;
height:100px;
margin:0;
vertical-align:middle;
display:inline;
}
 
p.blogcard-title{
margin:0 !important;
}
.blogcard-title a{
color:#333;
font-weight:bold;
text-decoration:none !important;
font-size:17px;
margin:0 0 10px 0;
line-height:1.5;
}
 
p.blogcard-desc{
margin:0 !important;
color:#666;
font-size:11px;
line-height:1.5;
}
 
.blogcard-footer{
border-top:1px solid#eee;
clear:both;
margin:10px 0 0 0;
padding:0;
}
.blogcard-footer p{
margin:3px 0 0 0 !important;
}
.blogcard-footer a{
color:#999;
margin:0px 5px 0 0;
font-size:11px;
text-decoration:none !important;
}
.blogcard-footer img{
margin:0 5px 0 0px !important;
padding:0;
border:none;
display:inline;
vertical-align:middle;
}
/*--------------------------------------*/
/* ブログカード ここまで */
/*--------------------------------------*/

小テーマについてはこちら

wordpress子テーマの作り方！style.css・各テンプレートファイル・function.php の設定手順

viral-community.com

ブックマークレット登録方法

まず以下のコードをコピーします。

1
javascript:(function(){javascript:(function(d,j,b,s){function r(){setTimeout(function(){(typeof jQuery=='undefined')?r():b(jQuery)},99)}(j)?b(jQuery):d.body.appendChild(d.createElement('script')).src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js',r()})(document,this.jQuery,function($){var ogurl=$("meta[property='og:url']").attr("content");var ogtitle=$("meta[property='og:title']").attr("content");var ogdesc=$("meta[property='og:description']").attr("content");var ogimg=$("meta[property='og:image']:last").attr("content");var urlhost=location.host;if(ogtitle==null){ogtitle=document.title};if(ogurl==null){ogurl=location.href};if(ogdesc==null){ogdesc=""};if(ogimg==null){ogimg="http://capture.heartrails.com/100x100/?"+location.href};var card='<!--'+ogtitle+'--><div class="blogcard"><div class="blogcard-thumb"><a href="'+ogurl+'" target="_blank"><img src="'+ogimg+'"></a></div><p class="blogcard-title"><a href="'+ogurl+'" target="_blank">'+ogtitle+'</a></p><p class="blogcard-desc">'+ogdesc+'</p><div class="blogcard-footer"><p ><img src="http://favicon.hatena.ne.jp/?url='+ogurl+'"><a href="http://'+urlhost+'" target="_blank">'+urlhost+'</a><img src="https://b.hatena.ne.jp/entry/image/'+ogurl+'"></p></div></div><!--ブログカード終わり-->';prompt("blogcard",card);});})();
Aug 25 2015hatena blogcard bookmarklet2

次にどこでもいいので好きなページをブックマークします。ブックマークしたページの上で右クリックー「編集」をクリックします。

Aug 25 2015hatena blogcard bookmarklet3

名前を変更し、先ほどコピーしたコードを貼り付けます。あとは、リンクを作成したいページでこのブックマークレットをクリックすると、はてな風ブログカードが作成されます。

あとがき

profile

embedlyカードもはてな風ブログカードもどちらもいい感じですね。好みによって使い分けたいです。

以上、みっきぃ(@miki73_m)でした。

参考にした記事

ピンバックを送れる！はてな風ブログカードを作るブックマークレットを見つけたよ。ちょっと改造してみたよ。

はてなブログカードを使ってみてたのですけど、欠点がありました。 参照先のブログにピンバックが飛ばない SearchConsole（旧ウェブマスターツール）やGoogleAnalyticsなどで、リンク

wpblog.sara2jp.com


【ブログカード風】シンプルに記事をシェアするブックマークレットを作りました

ブログを書くとき、記事へのリンクをどのように貼っていますか？ べた書きですか？ ShareHTMLですか？ GetTabInfoなんて拡張機能を使っている人もいらっしゃるかもしれません。 最近よく見る

sakueji.com

前の記事

「Embedlyカード」がはてなブログカードと違ってまたいい感…

次の記事

Pocketの未読が溜まっている人は「PocketRocket…