MiscNote

ブログカード周りを整える

サイトのリンクを貼る際、今までは「Iframely」というサービスを利用していました。

Iframely Embeds Platform

Get responsive embed codes for your YouTube, Vimeo or other video players

まさに↑のような『ブログカード』を表示させるためのコードを生成してくれるサービスです。
WordPressでブログを作っていれば簡単に作れるみたいですが、当サイトは静的サイトなので…😅

URLを貼り付けるだけで埋め込みコードを生成してくれるのはとても便利✨というわけでしばらく利用していました。

が、使用頻度が増えるにつれ、「ちょっと表示に時間がかかるし、1000リクエスト/月の表示(※)が気になるから、何とか自前で用意できないかな…?」と考えるように。

※「1000リクエスト/月」はデザインのカスタマイズをしたコードについてのようです。

ブログにあらゆる外部コンテンツを埋め込めるWebサービス「Iframely」の使い方 | Takumon Blog

なにこれSNSのコンテンツ、動画といった外部コンテンツを自分のブログに載せる場合、単純にリンクを張り付けるよりも、以下のようにHTMLの埋め込みコードを張り付けたほうがビジュアル面で効果的です。ただTwitterやYouTubeなどの埋め込...

目次

参考にしたサイト

まずは検索してこちらのサイトにたどり着きました。

ブログカードが使いたい。その2

数日前にブログカードが使いたくなって調べた結果をブログに書きました。 そのときは Embedly を使うことにした

そして↑の記事内で紹介されてるこちら↓のサイト。

ブログカードのブックマークレットを作成しました

SSL化後の悩ましい作業のひとつ ブログカードこれまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`)画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。* 2018年現在ではSSL対応しています。...

この方の作成されたブログカードがめっちゃ良いじゃん!シンプルで使いやすそう!
ということで、早速使用させていただくことに。

使用できる環境か確認

まず、このブログカードが使用できる環境か確認してみました。

記事の途中でなぜブックマークレットを作ったのかが書いてあったのですが、そこに「ブログをSSL化したので 混在コンテンツを避けたい」と書いてありました。

ん?待てよ…
当サイトはSSL非対応なのでは…?😥

当サイトのサーバーにはロリポップのエコノミープランを使っているのですが、SSLに対応してなくて… 対応させるにはお金かかりそう(独自ドメイン取得が必要?)だからとそのままにしていました。
(最近のネット環境的に非対応なのは良くないって知ってはいたのですが…)

使えないわけではないみたいだけど、サイトがSSL非対応ってやっぱりダメだよなぁ…と思ってロリポップサイトを確認していたところ、このような記述が。

共有SSLの利用法
プランのアップデートを行った最新の環境では、ロリポップ!ドメインがSSL化されるため共有SSLは利用できません。
(例:https://ロリポップ!アカウント・ドメイン/)

え!?SSL化が既にされてるの!??
ちょうど先日アップデートしたじゃん!!

ということで慌てて確認したところ、無事できました✨というかできてましたw

いやぁ気付かなかったなぁ… 今はもう独自ドメインを持ってるのが普通で、自分のように借りたままのドメインを使ってる人は少ないのかも… お知らせにも大きくは書いてなかった気がするし…

とにかく、無事サイトもSSLに対応できたので、配布サイトさんと同じ環境にすることができました。

使い始める前の準備

次に一通り使い方から注意点まで目を通していると、『OGP設定』ができていないサイトでは使えないとのこと。
ふむ、とはいえ最近のサイトは大体設定してくれてるし、自分のサイトもバッチリ設定できてる!大丈夫!と思ったら…

自サイト設定できてないじゃん…😱
設定してると思ったらTwitter用の設定のみで、一般のOGP設定はできていませんでした💧

OGPの設定方法について調べたのですが、記入箇所が多いと管理が大変💦ということで、こちらの記事を参考に項目を絞ることに。

OGPで本当に必要なメタタグは? - Qiita

OGP。Facebookなどの投稿時にURLが含まれてたら見栄えの良いリンクにしてくれるアレです。使い方を知りたくていろんな記事を読みましたが、最新の正しい情報を得るには、やはり公式ドキュメントを読むのが一番でした。 OGP公式...

最終的に、
・og:title
・og:description
・og:url
・og:image
・twitter:site
・twitter:image
・twitter:card
を設定することにしました。

今まで作成したページを何とか書き換えて、設定完了!
手打ちだとこういう修正が大変ですね… 最初にちゃんと設定しておけば楽だったんですけども💧

デザインを少しいじる

OGPの設定ができたので、次はブログカードを導入するための設定をしていきます。配布記事の通りスタイルシートを既存のCSSに貼り、ブックマークレットを登録して…

試しにコードを貼り付けてデザインを確認したら結構ずれてる。これは元々使っているCSSが色々な値を設定しているせいですね。干渉していたっぽいです。

さらに、「できればIframelyっぽいシンプルなデザインにしたい!」ということで、↓の余白なしのスタイルシートを適用することに。

弊ブログ提供ブログカードのデザイン提案【随時追加】

デザインカスタマイズについてのご相談がありましたので、いくつか準備してみました。...

値を増やしたり減らしたり、弄って弄って…何とか完成!
このページでも使用していますが、結構いい感じになったのではないでしょうか。密かに気に入っています✨

ブックマークレットを手直し

先程登録したブックマークレットを確認してみると、第三者のサイトの画像URLが直リンクになっているんですね。

OGPに設定してある画像なら直リンクしても良いのかな…?とも考えましたが、先ほど紹介したひき太郎さんのサイトで「Images.weserv.nl」が紹介されていました。

Images.weserv.nl

Image cache & resize service

<img src="//images.weserv.nl/?url=画像のリンク&w=幅&h=高さ">

このように指定してあげると、キャッシュを利用して画像を表示させることができます。

ブックマークレットの画像リンクの前部分に
https://images.weserv.nl/?&url=
を追加するだけでOKなので簡単でいいですね。

このサービスを紹介しているサイトを見かけなくてちょっと不安だったんですが、無料で使えるサービスのようです。

What is images.weserv.nl?
Images.weserv.nl is an image service which is free for use to anyone, and we offer it as-is, it's just basic image resizing, available to anyone, easy to use. We try to keep everyone as happy as we can.

今回の作業によるメリット

今回ブログカード周りを整えたことで、かなりブログカードの管理が楽になりました!

具体的には、
・ブックマークレットを使うことで、以前と同じ様に手軽にブログカードのコードが作成できる。
・画像は他サービスを使っているが、それ以外の部分はHTMLのコードなので描写が軽い。
・デザインの変更がしやすい。
・自サイトのOGP設定ミスに気づいた時、すぐに修正できる。
特に一番下が重要かもw

Iframelyだと作成後に「あ!設定ミスってる!」と気付いて修正しても、なかなか修正が反映されなくて困ったことが多々あったので😅

今の所ブログカードを貼る場合、一番多いのが自サイトのリンクなので、修正しやすいのはとても助かるのです。

最後に

軽い気持ちで始めたのですが、思ってた以上に作業量が多くて丸2日ほどかかってしまいました💦

とはいえこれで気兼ねなくブログカードを使用することができるので一安心。ブログ記事も書きやすくなって満足です✨


記事作成日 2021/01/26 21:54

関連記事
新着記事