シンプルで使いやすい ブログカードジェネレーター5選

シンプルで使いやすい ブログカードジェネレーター5選

リンク表示にブログカードを使うことにしました。

自分で一からつくるのは無理だったので、無料で提供されているブログカードジェネレーターの中から使いたいものを選び、導入しました。とってもありがたい。

今回は、当ブログで使用することにしたものも含めて、調べた中から5つのブログカードジェネレーターを紹介しようと思います。

いずれも、ブログカードを HTML で出力してくれる形式のツールです。

目次

ブログカードとは

外部サイトや内部サイトへのリンクを、画像や説明文含めて良い感じで表示してくれるカード形式のリンクです。

▼こういうやつですね。

リモスキブログ

リモスキブログ

リモナーダ好きの雑記ブログ。スペイン語学習、Blogger、中南米遺跡など。

はてなブログでは確か投稿画面から URL を入力するだけでリンクが自動でカード形式になるし、ワードプレスだとテンプレートに組み込まれていたり、プラグインで表示できたりするようです。

Blogger の場合は残念ながらそういう機能はないので、どなたかが作成して公開してくださっているツール(ブログカードジェネレーター)を使用することにしました。

① ブログカードのブックマークレットを作成しました - The other way round

ブックマークに登録しておくタイプのツールです。

以下リンクで最新版が紹介されています。
ブログカード作成ブックマークレットをアップデートしました | The other way round

今回、私がツールに希望していた点として以下があるのですが、

  • 軽い
  • デザインがシンプル
  • デザインに多少のカスタマイズ性がある(ツール上で設定できる、もしくはCSSを別で取り出す形式である)
  • URL(ドメイン)表示がある

これらを満たしてくれるツール。こんな感じで表示されます ▼

スペイン語学習 おすすめ教材(自習用)

スペイン語学習 おすすめ教材(自習用)

スペイン語初学者〜上級者入口までのおすすめ教材を紹介します。

上のサンプルは、CSS に若干のカスタマイズを加えたものです。

CSS は別途指定して使用するスタイルです。

いくつかのデザインパターンが提供されていますし、自由にカスタマイズできます。解説も親切に書かれていてわかりやすい。当ブログで使うことにしたのもこちらのツールです。

② リッチリンクを手軽に作成! ブログカードジェネレーター - Cottpic

リッチリンクを手軽に作成! ブログカードジェネレーター - Cottpic

  • CSS 別
  • URL 表示あり
  • ブログタイトルの表示あり
  • アイキャッチ画像、Favicon の取得有無を選択可

こちらはブログタイトルの表示もあり、アイキャッチ画像と Favicon 画像の有無を選択できるのが良いところ。デザインもシンプル、CSS 別で使いやすそうです。

URL を入力してタグを作成するタイプのツールで、個人的にはブックマックレートタイプよりこっちの方が好き。

▼サンプル

DMM英会話でスペイン語オンラインレッスンを受けるときのおすすめ講師を紹介します。

最初に紹介した①のツールとの違いは ブログタイトルが表示される点と、ドメインだけではなくページ URL が表示される点、URL の表示位置でしょうか。お好みかなーと思いますが、ブログタイトルを表示したい場合はこちらの方がおすすめ。

デフォルトでは、リンクが付与されている部分が文字と画像のみなので、カード全体をリンクにしたい場合は HTML と CSS をちょっと調整する必要があります。

③ ブログカード風の紹介リンクタグ作成

ブログカード風の紹介リンクタグ作成

  • CSS 一体型
  • URL(ドメイン)表示なし
  • 設定画面で背景色・枠色・画像サイズを個別に設定可

こちらは、URL は表示されないタイプ。内部リンク用のカードとして使うのに適しているかなと思います。

CSS は一体型(HTML の style 属性として組み込まれている)ですが、設定画面で基本的な色や画像サイズを選べるのが良いところ。

リンク先を別タブで開くかどうかも選択できるのが大変便利です。デザインもシンプルで良い。

▼サンプル

④ ブログカードジェネレータ - バグ取りの日々

ブログカードジェネレータ - バグ取りの日々

  • CSS 一体型
  • URL 表示あり
  • 設定画面で画像サイズを個別に設定可

こちらのツールは、URL 読み込み後にタイトルや説明文がツール上に出力されるので、編集・確認した上でカードを生成できます。

CSS 一体型でカスタマイズする場合は手間がかかってしまいそうなんですが、タイトルが画像・説明文よりも一段上に大きく出てくるデザインが好き。

▼サンプル

【Blogger】Markdown で快適・効率的に記事作成する方法
thumbnail
Blogger で、Markdown を使って快適に記事を書く方法をまとめました。
https://www.limosuki.com/2020/01/blogger-markdown_17.html

⑤ ShareHtmlを、もっと綺麗にしたメーカー

ShareHtmlを、もっと綺麗にしたメーカー

  • CSS 別
  • URL(ドメイン)表示なし

こちらも、とってもシンプルなツール。生成画面のシンプルさも良い。カードには URL 表示がないので、内部リンク向けでしょうか。

▼サンプル

まとめ

どれも、シンプルなデザインで使いやすそうなツールでした。純粋な HTML で構成されているのがやっぱり軽くて良いですね。

いずれのツールも、自分のブログに導入する場合はCSSの多少のカスタマイズは必要になるかなと思います。

内部リンク用、外部リンク用で目的に合わせて使い分けても良いかもしれません。


▼ こちらの記事もよろしければどうぞ。

ブログのロゴを SVG 形式でつくる。簡単なロゴの作成手順と Blogger での設定方法

ブログのロゴを SVG 形式でつくる。簡単なロゴの作成手順と Blogger での設定方法

ブログのロゴって設定していますか? 今回はフリーソフトを使って、拡大・縮小しても画像がぼやけない SVG という形式のロゴ作成方法をご紹介します。Blogger(QooQ)での設定方法もまとめました。

【Blogger】Markdown で快適・効率的に記事作成する方法

【Blogger】Markdown で快適・効率的に記事作成する方法

Blogger で、Markdown を使って快適に記事を書く方法をまとめました。

次の記事 前の記事