no title

こんにちは、赤ペソ先生(@spinf60 )です。

調べ物をした際に参考にしたブログや、見てもらいたいホームページを自分のブログで紹介する時のリンクを 見やすくてキレイに表示したいと思って悩んでいるんです。


SPONSORED LINK


記事紹介には ShareHTML を使ってます

ブログを書く際に参考にさせていただいた記事の紹介に、今まで ShareHTML というブックマークレットを使っていました。

神ブックマークレット ShareHtml , AppHtml の導入&使用方法(作者 @hiro45jp さん) | なまら春友流

↑ こんな感じで、ホームページのスクリーンショット+タイトルを表示する紹介の方法です。ShareHTML についてはこちらの方が詳しく解説されています。


この ShareHTML ものすごく便利なんですが、文章と文章の間に表示した場合、ちょっとわかりづらいですよね?

そう思って私は、スタイルシート(css)で、枠をつける設定をしました。↓こんな感じでね。(あ!しまった。スマホから見てる人ごめんなさい。PCしか表示されないんでした(-_-;) スマホだとわかんないですよね(^_^;))

セリアのモレスキン:セリスキンのA7サイズメモが大好きな話 : 赤ペソ先生の備忘録

ただ、この画像を見てもらったら分かると思うんですけど、リンクと一緒に表示されているサムネイル画像が、スクリーンショットなんですよ(^_^;) せっかくブログで設定した画像があるのにそれが表示されないのは残念。

できることなら設定した画像を表示したいと思ったわけです。

そんなわけで調べてみました。

世の中には『ブログカード』という物があるらしい

私が書いているこのブログはライブドアブログなのですが、他にもブログサービスはたくさんあって、そのなかに はてなブログ という人気のブログサービスがあります。

はてなブログでは他の記事の紹介がシンプルで、すごく見やすいらしいんですよ。使ったこと無いけど(^_^;)

しかもここが重要なのですが、サムネイル画像にはスクリーンショットではなく、自分で設定した画像が表示されるらしいんです。なんとうらやましい………。

ブログカードを作るブックマークレットは無いのか?

ということで、きっとどこかに神様のような人がいて、作ってくれているに違いない!と思って調べたところ、いらっしゃいました!神が!

そんなわけで、こちらのブログにありましたブックマークレットをありがたく利用させていただきまして、上で表示していたセリスキンの記事へのリンクを作ってみました。

その結果がこちら↓

おおぉ。ちゃんとサムネイル画像が設定した画像になってるし、なんかシンプルで見やすくないですか??しかも、スマホでもちゃんと表示されてる!!

パソコンで見ている人は見えていると思いますが、私が作っていた枠がやたら野暮ったく感じませんか?(笑)

まとめ

本当はShareHTML だけでどうにか出来無いのかなと考えてるんですけどわからん。さっぱりわからん。技術力のある人に憧れますね。

あと、最初はこちらの手法で実行しようとしていたので、自分用の備忘録として貼っておきます。

追記(2015/02/11):Chromeを使っている方は、開いてるタブを一気にはてなブログカード化するテンプレート作ったのでこちらもご覧ください。



最後までご覧いただきありがとうございます
そんなわけできょうの備忘録はここまで
またどこかの備忘録で(^_^)/~


追記(2016-05-29):今は内部リンク対策でembedly使ってます(・_・;) GetTabInfoのリンクも作ってります。

ブログの内部リンクにはembedlyを使うことにした話 : 赤ペソ先生の備忘録


読者登録すると、ブログ更新した時にLINEでお知らせします♪


【オススメ】▶赤ペソ先生が利用しているサービスまとめ


SPONSORED LINK


「この記事がいいね!」と
君が言ったから
2月 8 日は
赤ペソ記念日♪

最新情報をお届けします

Twitterで赤ペソ先生をフォローしよう!