バグ取りの日々
ブログカードジェネレータを作ってみた完成品 ブログカードジェネレータ https://www.bugbugnow.net/p/app-blogcard-generator.html 機能 指定URLからOGP情報を取得する 指定の情報からブログカードを作成する サンプル ...https://www.bugbugnow.net/2019/01/Blogcard.html
Embedly を「バグ取りの日々」さんのカードに変えるメリットは
スクリプトを使用せず、外部のサーバーも経由しないので読み込みが軽くなること。カードデータの読み込み作成時にはスクリプトを使用しますが、生成されたカードは単なるHTMLタグですからね。一度作ってしまえばもう余計な通信も発生しません。
他には、Embedly は無料版ではデザインが弄れないのに対して、こちらは(タグを書き換えれば)CSSでデザインも弄り放題なこと。Embedly はたまに意図した画像を拾ってくれなかったりすることがありますけど、このカードなら取得できなかったデータも手動で追記対応できます。
逆にデメリットな点は、リンク切れになったり、リンク先の内容に変更があったりした時に、手動で修正対応しなきゃならないことぐらいですかね。
私的にはデメリットは然程気にならなかったので迷わず乗り換えを決断し、過去記事のカードも全て入れ替えました。
勝手に改造版を…
こちらのジェネレータで生成されたカード、そのままだとタグが blockquote で囲われる仕様のため、ウチでカスタマイズしてる引用スタイルと混ざってしまいちょっと微妙なデザインになってしまいます。ということでデザインも徹底的に自分好みに変えたたくなり・・・スクリプトをちょっと拝借しまして、勝手に色々改造してしまいました(^^;
実は改造版ジェネレータのページも作ったのですが、オリジナルの作者さんには無許可だし、著作権的にもグレーだし、不利益をもたらすことを避ける為にも、とりあえず公開は自粛しておきます。(どうしても使いたいという方にはこっそり教えます)
CSSオプションも次回検討されてるらしいので、本家の方で実装されるのを待ちましょう。(私は待ちきれなかったw)
オリジナルとふじろじっく仕様の比較
まずはバグ取りの日々さんとこのオリジナルのジェネレータで生成したデフォルトのカードがこちら。
オリジナル
ブロガラーとは「ブロガラー」という謎ワード誕生の経緯と解説。
https://fujilogic.blogspot.com/2019/05/what-is-bloggerer.html
生成されたタグ
タグ内にスタイルも含まれています
<blockquote class="blogcard" style="width:auto;border:1px solid #aaa;margin:1em 0;padding:1em;line-height:1.4;text-align:left;background:#fff;"><a href="https://fujilogic.blogspot.com/2019/05/what-is-bloggerer.html" target="_blank" style="display:block;text-decoration:none;"><div style="width:100%;margin-bottom:0.5em;"><span style="font-size:18px;font-weight:700;color:#333">ブロガラーとは</span></div><div style="min-height:150px;"><div style="float:left;width:150px;height:150px;margin:0 1em 0.5em 0;position:relative;"><img src="https://images.weserv.nl/?w=150&url=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ_VjVd1AAHNrpg1gtoTZXkaG-bJEEogbALWpfcV19Vwi9tapiFv8r4B_1h43jz5fCzaVy6llMOtNOMaib6_-BVxYYR-F3S8R6L-2o0bT0q0AX_LoIB0U2o60-4w3XJXSR9W6vi7ugzE8/w1200-h630-p-k-no-nu/what-is-bloggerer.jpg" alt="thumbnail" style="position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);border:none;"/></div><div><span style="font-size:14px;font-weight:400;color:#666">「ブロガラー」という謎ワード誕生の経緯と解説。</span><br/><span style="font-size:12px;font-weight:400;color:#373">https://fujilogic.blogspot.com/2019/05/what-is-bloggerer.html</span></div></div></a></blockquote>blockquote で囲われるためうちの引用スタイルの斜体になって、でっかいダブルクォーテーションも出ちゃってます。レイアウトもこのままだとちょっとシンプルすぎますよね。
ふじろじっくカスタム
ふじろじっく
ブロガラーとは | ふじろじっく「ブロガラー」という謎ワード誕生の経緯と解説。https://fujilogic.blogspot.com/2019/05/what-is-bloggerer.html
タグ
<blockquote class="card"><a class="blogcard" href="https://fujilogic.blogspot.com/2019/05/what-is-bloggerer.html" rel="noopener" target="_blank"><div class="blogcard-site"><img alt="ファビコン" height="20" loading="lazy" src="https://www.google.com/s2/favicons?domain=https://fujilogic.blogspot.com/2019/05/what-is-bloggerer.html" width="20" />ふじろじっく</div><div style="display: block; min-height: 100px;"><div class="blogcard-image-wrap" style="width: 100px; height: 100px;"><img alt="サムネイル" class="blogcard-image" height="100" loading="lazy" src="https://images.weserv.nl/?w=100&url=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKVejZbepvO0vuNhiUBE7ZiMpSrDBz1N-pXdP_V16jd5gKwYqc_INOOQXi7ALijYennqYVe0ecgyrhiqzK6joa3DGYyny4SurWc29plhDk5lHJW9Jp1mywdrFyQH4TCN4kCNpf1s8n9Rk/s100-c/what-is-bloggerer.png" width="100" style="height: 100px; width: 100px;" /></div><div class="blogcard-title">ブロガラーとは | ふじろじっく</div><div class="blogcard-text">「ブロガラー」という謎ワード誕生の経緯と解説。</div><div class="blogcard-url">https://fujilogic.blogspot.com/2019/05/what-is-bloggerer.html</div></div></a></blockquote>改良点と追加機能
- ファビコンの自動取得機能
- サイト名もオリジナルでは表示しない設定になっていたのを表示する仕様に。
- オリジナルは縦長画像がはみ出してしまいますが、img タグ内に style を追記することで改善。
- カード全体がリンクになるようにしてあります。
ちなみに Embedly はタイトルや画像等、一部しかリンクになってません。またバグ取りの日々さんのオリジナルのカードは、縁の部分(1em分くらい)がリンクにっていなかったり、「作成」モードにすると見た目は変わらないものの、リンク範囲が変化してしまうのもちょっと不満でした。
ということで、バグ取りの日々さんの便利なツールに一工夫加えることで、理想的なカードが使えるようになり満足です。
コメントを投稿
別ページに移動します