ブロガー御用達のブックマークレット、ShareHtml。
以前は結構使用していたのですが、いくつかの事情により最近ではほとんど使っていません。
このブログではシンプル（というか目立たない）なテキストリンクを多用しているのはそのためです。
見た目が地味
素のままで使うと見た目が地味です。
もちろんCSSでカスタマイズを頑張れば良い問題ではあるのですが、あくまでも個人ブログ。
そこを頑張るのであれば、記事を書く方に力を入れたいのです。
サムネイル画像がhttpsじゃない
このブログは1ヶ月ほど前からhttpからhttpsに移行しています。
ところがShareHtmlで表示されるページのサムネイル画像はhttpなんですね。
するとどうなるかというと、完全なhttpsサイトとしては認識してくれません。
Chromeの場合は、
「このサイトへの接続はプライベート接続です。ただし、ネットワーク上のユーザーがこのページのデザインを変更できる可能性はあります。」
と表示されます。
この程度は別にセキュリティ上の問題でもなんでも無いのですが、個人的には気になるので使いたくなかったのです。
OGPを取得、表示してくれるShareHtml
そこで代替サービスは何かないかと探していたとこと、「ShareHtmlを、もっと綺麗にしたメーカー」を見つけました。
そう、もっと（簡単に）綺麗にしたいんです！
【作りました】ShareHtmlを、もっと綺麗にしたメーカー【開発方法まとめ】
『ShareHtmlを、もっと綺麗にしたメーカー』という何ともやる気のない名前のサービス(?)を作りました。アイキャッチ画像付きのサイトリンク生成ツールです。ブロガーの方はぜひご利用ください。
開発されたのはManabu Bannaiさんという方。
技術系のブログも運営されているようです。
本当に感謝です！
URLを入力するだけの簡単生成
ブログを始めたばかりの人にとっては、ブックマークレットって何？という壁にまずぶち当たると思います。
しかし「ShareHtmlを、もっと綺麗にしたメーカー」は、リンクを貼りたいページのURLを入力するだけと非常に簡単。
するとこのようにHtmlとCSSが生成されます。
あとはHtmlを貼り付けるだけです。
CSSも忘れずに適用しましょう。
【作りました】ShareHtmlを、もっと綺麗にしたメーカー【開発方法まとめ】
『ShareHtmlを、もっと綺麗にしたメーカー』という何ともやる気のない名前のサービス(?)を作りました。アイキャッチ画像付きのサイトリンク生成ツールです。ブロガーの方はぜひご利用ください。
ちなみに僕はCSSをちょっと改変させて頂きました。
- サムネイルの横幅を少し大きくした
- スマホで見た際に、要素が縦に並ぶようにした
▼PCでの表示
▼スマホでの表示
別に大したことはしていないのですが、CSSをここに置いておきますのでご自由にどうぞ。
[sdm_download id=”5458″ fancy=”0″ new_window=”1″ color=”blue”]
昨今のWebページであれば、まずOGPは設定していると思うので、サムネイル・テキスト共にちゃんと表示されると思います。
開発者様には本当に感謝です！！
というわけで今回は以上！
photo credit: ThoroughlyReviewed Code Developer Programming – Javascript via photopin (license)
▼実はブックマークレットってよくわかってなかったりします…。
