中級ブロガーをめざすブログ初心者ノート。悩んでるとこ一緒かも。

プラグインとかややこしいのなしで、内部リンクも外部リンクもはてな風のカードにしたい

うとうとしているライオン

  • 内部リンク → 自分のサイト内で別記事へのリンク
  • 外部リンク → 他サイトへのリンク

SANGOでつくれるリンクカードはとってもかわいいけど、外部リンクは内容がわかりにくいし、うーん、私ははてなブログのようなカードがいい。

1年はてなブログやってるから見慣れてるのもあるかもだけど。

はてなブログのリンクカードはこんな感じ ↓

内容もわかるしリンク先のサイト名も表示されてる。画像もあっていいよね!
なにより「リンクだ」とわかりやすい。


これ、はてなブログだとデフォルトで普通に使えたのに、WordPressじゃまたプラグインとかいるのかな…。
こんな感じでその都度プラグイン入れてたら中級ブロガーになる頃にはすごい数になってない?
いい方法ないかなーと調べまくりました。

プラグインなしでリンクカードが作成できるサイト発見!

探しても探してもリンクカードのプラグインが出てくるけど、あきらめなくてよかった。

このiframelyというサイトで簡単につくれるよ。↓

ちなみにこれもそのiframelyでつくったリンクカード。
デザイン的にもシンプルでカッコイイよね。
英語サイトだから最初おびえたけど、私も使えたのでみんな使えると思う。

iframelyの簡単な使い方

URLを入力するとリンクカードのコードを生成してくれる仕組み。
なんと無料で会員登録も不要!

iframelyでURLを入力してコードを生成させる

リンクを貼りたいページのURLをコピーしてきて下のボックスにペースト。
右の黄色のボタンを押すだけ!

するとコードが生成されるよ。↓

これでもいいんだけど、ブログに貼ってみたらちょっと大きい。。
はてなブログのカードのように横長にするには、「Make it a small card」にチェックをいれるとできるよ。↓

私はこのチェックボックスに気づかずに(なんせ英語だから)、カスタマイズするには会員登録が必要なんだ…と思い込んで会員登録してしまった。
そしてその後気づき、アカウントがそのままになってるのも気持ち悪いな、と退会したいというメールって英語でどう書けばいいのかと調べまくって1時間くらい。。メール送ってやっと退会した。かなり脱線…。会員登録いらないよっ!

「Make it a small card」にチェックを入れると横長カードがプレビューされるのでコードをコピーしよう。

これよりもっとカスタマイズしたいという場合には会員登録が必要。
いや、私これで充分っす!

ブログに貼付ける

コピーしたコードをブログに貼付けするんだけど、エディタをSANGOのGutenbergを使ってて、さあどこに貼るのかわからない…。

「カスタムHTML」を選んでコピーしよう。

ショートコードじゃないのはまあわかるんだけど、じゃあその上のコードってなんなのさ…。

また調べる。。

完成!↓

外部リンクも内部リンクと同じようにカードにできるよ!↓

おまけ

まだしっかり理解できてなくてうまく説明できないときは、代わりに詳しくてわかりやすい記事のリンクを貼りたい。
あとSANGOなどの公式サイトでもう全部丁寧に書いてあるとかもそのリンク貼りたい。

そんな私にはリンクカードが必須だったので先に調べました。

早く中級ブロガーになって、なんでもさらーっと説明できるようになるよ…。

コメントを残す