より美しいShareHtml、「ShareHtmlを、もっと綺麗にしたメーカー」が素晴らしすぎて開発者様に感謝!

29333108784_bfb0c7115f_b

ブロガー御用達のブックマークレット、ShareHtml。

以前は結構使用していたのですが、いくつかの事情により最近ではほとんど使っていません。

このブログではシンプル(というか目立たない)なテキストリンクを多用しているのはそのためです。

 

見た目が地味

素のままで使うと見た目が地味です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-17-11-12-30

もちろんCSSでカスタマイズを頑張れば良い問題ではあるのですが、あくまでも個人ブログ。

そこを頑張るのであれば、記事を書く方に力を入れたいのです。

 

サムネイル画像がhttpsじゃない

このブログは1ヶ月ほど前からhttpからhttpsに移行しています。

ところがShareHtmlで表示されるページのサムネイル画像はhttpなんですね。

するとどうなるかというと、完全なhttpsサイトとしては認識してくれません。

Chromeの場合は、

「このサイトへの接続はプライベート接続です。ただし、ネットワーク上のユーザーがこのページのデザインを変更できる可能性はあります。」

と表示されます。

この程度は別にセキュリティ上の問題でもなんでも無いのですが、個人的には気になるので使いたくなかったのです。

 

 

OGPを取得、表示してくれるShareHtml

そこで代替サービスは何かないかと探していたとこと、「ShareHtmlを、もっと綺麗にしたメーカー」を見つけました。

そう、もっと(簡単に)綺麗にしたいんです!

開発されたのはManabu Bannaiさんという方。

技術系のブログも運営されているようです。

本当に感謝です!

 

URLを入力するだけの簡単生成

ブログを始めたばかりの人にとっては、ブックマークレットって何?という壁にまずぶち当たると思います。

しかし「ShareHtmlを、もっと綺麗にしたメーカー」は、リンクを貼りたいページのURLを入力するだけと非常に簡単。

するとこのようにHtmlとCSSが生成されます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-17-11-21-54

あとはHtmlを貼り付けるだけです。

CSSも忘れずに適用しましょう。

ちなみに僕はCSSをちょっと改変させて頂きました。

  • サムネイルの横幅を少し大きくした
  • スマホで見た際に、要素が縦に並ぶようにした

 

▼PCでの表示

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-17-11-24-21

 

▼スマホでの表示

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-17-11-24-33

 

別に大したことはしていないのですが、CSSをここに置いておきますのでご自由にどうぞ。

[sdm_download id=”5458″ fancy=”0″ new_window=”1″ color=”blue”]

 

昨今のWebページであれば、まずOGPは設定していると思うので、サムネイル・テキスト共にちゃんと表示されると思います。

開発者様には本当に感謝です!!

 

というわけで今回は以上!

 

photo credit: ThoroughlyReviewed Code Developer Programming – Javascript via photopin (license)

 

▼実はブックマークレットってよくわかってなかったりします…。