ブログカードが使いたくなったので調べてみました

他の人のブログを見ていて思った。外部リンクの貼り方がカッコいい…と。なにより文字に貼るだけのリンクよりも全体的に記事を読みやすくなる気がする。

ということで、さっそく調べてみました。ものはブログカードという名称らしいです。簡単に使えるものと思っていましたがなかなかに難しい。下記のサイトでBLOGGERで使えるブログカードがいくつか紹介されていました。

上のリンクの貼り方で気づく方もいるでしょうが、僕が選択したのはEmbedlyです。

一番簡単で見栄えがいいのははてなブログのブログカードだと思います。コードを貼り付けるだけなので本当に簡単です。ただ裏技的使用ということではてなブログさんが外部のサイトで使えないように仕様変更する可能性もあります。ということで候補から除外しました。みんなで使えば怖くない！とう考えもありますが、なんとなくモヤモヤしますし。

次に使用を検討したのが下記のサイトのブログカードです。

Akiraさんという方が自作されたブログカードのコードが紹介されています。分からないことにも質問すれば答えていただけるアフターサービスも万全のサイトのようです。多くの人にコードが使われています。

実際にコードを使用してみると良い感じでした。ただ引用タグの<blockquote>を説明文だけじゃなく全体にかかるように書き換えたら問題がでてきました。引用タグを使うと自動で字下げされるのですが、その字下げを取り消す方法が分からなかった…。marginやpaddingでは空いた隙間を詰めることができませんでした。方法はあるのかもしれませんが知識のない僕には見つけられませんでした。

隙間を詰められないため引用タグでブログカード全体を囲むとスマホで横幅いっぱいに表示できないのが気になったのです。まぁそこは妥協してこのブログカードに決めようか…と思ったのですが他にも気になるところが。

このブログカードでは外部サイトの画像URLを直接リンクしているようでした。OGPで設定された画像なのでいいのかな？とも思いましたがなんとなく怖い気が。ブログを始める前に調べたとき直接リンクは相手のサーバーに負担がかかるからダメだ！と書いてあるサイトがありました。逆の事を書いてあるサイトもありましたけれど。ルールが曖昧なので鬱々してきます。

そこで今度は画像を直リンクしておらず<blockquote>を使っても字下げされずに表示されるようなブログカードを探しました。見つけたのが下記のサイト。

A.matsumotoさんが作成されたブログカードです。良い感じのブログカードです。引用タグに対して疑似要素::beforeでdisplay:noneを設定すると字下げも詰めてくれました。問題があるとすればタグの中にCSSが全部入っているのでゴチャゴチャした感じになるくらいです。これを先に見つけていたらこのブログカードを使っていたかもしれません。が、僕が先に試したのはEmbedlyの方でした。

Embedlyのブログカードの使い方については上記のサイトにわかりやすくかかれていました。特にChrome拡張機能のCleate Linkは便利です。設定しておけば毎回コードを書き足したりしなくてもクリック一つでコードがコピペできます。僕はフォーマットに下記のコードを入力しておきました。

<div class="blogcard2"><blockquote class="embedly-card" data-card-type="article" data-card-controls="0" data-card-description="0"><h4><a href="%url%">%text%</a></h4></blockquote></div>

シェアボタンと概要を省略して画像を上から左へ移動しています。script部分は毎回書き込むのもなんなのでテンプレートに書き込みました。blogcard2は見た目のデコレーションのクラス設定です。そのままだと味気なかったので。下記のコードをテンプレートに書き込んでおきました。

.blogcard2{max-width:630px;text-align: center;background:rgb(255, 255, 255);margin:0 auto;padding:5px 5px 5px 5px;border-style:ridge;border: 1px solid rgba(173, 171, 171,0.5);border-radius:5px;box-shadow:3px 3px 4px rgb(153, 153, 153);}

上記コードは下記のサイトからコードをコピペさせてもらいました。色々なパターンのCSSが用意されています。

とりあえずEmbedlyを使用することにしました。使用してみて表示が遅いなど不具合があったら他のブログカードにしようと思っています。いまのところ自サイトのブログカード用と外部サイトのブログカード用で使い分けしようかな？と考えています。

いくつかブログカードを試してみて思ったこと

• 綺麗に表示されればなんでもいい。みんなで使用すれば怖くない！という考えの方ははてなブログのブログカードで良し。まぁ他のブログカードもサービス終了すれば使えなくなるものがほとんどですし。

• CSSで色々いじりたい。綺麗に表示されれば直リンクとか気にしない！という考えの方はAkiraさんという方が作成されたブログカードが一番良いのではないかと。

• CSSで色々いじりたいし直リンクもいやだ！コードがごちゃごちゃするのは気にならない。という方はA.matsumotoさんのブログカードで良いかと。

• CSSでいじれなくてもいいけど直リンクはいやだ！コードもスッキリした方がいい。という方はEmbedlyで良いかと。サービスが終了しても通常リンクは残るようですし。

まぁ基本ははてなブログのブログカードでいい気がします。多くの人が使っているみたいですし。それを避けたい人が自分の好みで選ぶことになるのかと。

追記

やっぱりEmbedlyは表示が遅い感じなので変更しました。引用タグを使ったときの空間の詰め方もわかりました。続きは下記の記事で。

長期ひきこもりの雑ブログ

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

数日前にブログカードが使いたくなって調べた結果をブログに書きました。 そのときは Embedly を使うことにしたのですが、記事の投稿後すぐに表示の遅さが気になりだす。他のブログカードに変えようか…そう思っていたときに何度もお世話になっている ふじやん。さん から 有益な情報が...

hikikomorisos.blogspot.com