リンクをテキストではなくカード形式で表示したい。
ブログを書いていると参考情報として別のページのリンクを貼ることがある。
通常は以下のようにテキスト、またはURLでのリンクとなるだろう。
しかしテキストリンクだけだと文字ばかりで味気ない感じがしてしまう。
とはいえリンク用にいちいち画像を用意するのも面倒。
ブログを見ていると、ときどきカード形式のリンクを見かけることがある。
-
-
ブログのアフィリエイトはどこのASPに登録すればいいのか
こんなリンクを簡単に作る方法は無いだろうか。
そこで今回はWordPressに貼れるブログカードを簡単に作る方法について解説する。
この記事を書いている人
記事を読むメリット
WordPressに貼れるブログカードを簡単に作る方法がわかる
「ブログカード 作り方」で出てくる方法は簡単じゃない
ブログカードを作ろうとする際、まずは検索して方法を探すだろう。
しかし「ブログカード 作り方」で出てくる方法は簡単じゃない。
簡単なものも無くはないが、まず出てくるのはWordPressブログテーマの function.php を編集する方法。
phpソースを編集する時点で危険。
ソースが動かなくなって詰む人も出てくるだろう。
そのような方法ではなく、あくまで簡単な方法を利用する。
WordPressに貼れるブログカードを簡単に作る方法
WordPressに貼れるブログカードを簡単に作る方法はいくつかある。
ブログカードの簡単な作り方
Pz-LinkCardプラグインを使う
ブログカードを簡単に作る方法のひとつはPz-LinkCardプラグインを使うだ。
WordPressのプラグインをインストールすることで、ブログカードを作れるようになる。
ただしデメリットとしてサイトが重くなるとも言われている。
サイトが重い原因がわかりました
Pz-LinkCard
この超有能プラグインが原因でした…
このプラグインなしで生きていかなきゃいけないなんて😱
アフィンガー使ってる人はどうやって外部リンクのカードを作ってるのかな…？#ブログ初心者#ブログ書け#ブログ仲間募集中
— パチブロ パチ屋店員からエンジニアに (@patiyablog) March 5, 2020
テーマの機能を使う
テーマにブログカードの機能があれば、そっちを使う手もある。
例えばWING（AFFINGER5）の場合、以下のようなショートコードを書くと
[st-card id=3257]
このようにブログカードが表示される。
他にもdivタグで括ると、
<div class="st-cardstyle"> [st-card id=3257] </div>
このように縦方向にブログカードが表示される。
これはテーマにあらかじめ実装されている機能なので、追加のプラグインやjavascriptを必要としない為、処理は軽い。
しかしidで指定してることからわかるように、サイト内限定となる。
また画像はサムネイル用の画像を使っているので軽いが粗い。
はてなを利用する
はてなの機能を利用してブログカードを作る方法もある。
以下のようにiframeではてなブログのパーツとして呼び出すことが可能。
<iframe class="hatenablogcard" style="width:100%;height:155px;max-width:680px;" title="ブログのアフィリエイトはどこのASPに登録しているのか" src="https://hatenablog-parts.com/embed?url=https://itips.krsw.biz/which-asp-should-affiliate-blogger-register/" width="300" height="150" frameborder="0" scrolling="no"></iframe>
↑のHTMLを記述すると結果は以下のようなブログカードになる。
これは検索にも結構出てくる王道なブログカード作成方法だろう。
iframeのHTMLコードを作成するのが面倒そうに見えるが、CreateLinkというChromeの拡張機能を使うと２クリックで作成できる。
この機能を導入して、はてなブログカード用のフォーマットを追加して以下を入力する。
<iframe class="hatenablogcard" style="width:100%;height:155px;max-width:680px;" title="%text%" src="https://hatenablog-parts.com/embed?url=%url%" width="300" height="150" frameborder="0" scrolling="no"></iframe>
するとブログカード化したいページの上で、右クリックメニューを開いて CreateLink→はてな とクリックするとクリップボードにブログカード用のコードがコピーされる。
あとはブログにペーストしてやればよい。
iframelyを利用する
最後に紹介する方法としてiframelyを利用するというものがある。
iframelyの書き方は以下の通り。
<div class="iframely-embed"><div class="iframely-responsive" style="padding-bottom: 56.25%; padding-top: 120px;"><a href="https://itips.krsw.biz/which-asp-should-affiliate-blogger-register/" data-iframely-url="//cdn.iframe.ly/KTJQx2s"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>
実行結果はこんな感じのブログカードになる。
レスポンシブ対応していて見た目もキレイなカードとなるので、オススメである。
しかし注意点として href で指定しているURLを書き換えるだけでは動作しない。
データを簡易URL化された cdn.iframe.ly/KTJQx2s から取得しているので、別のページのカードを作る場合は一度iframelyのサイトでカード用のHTMLコードを取得する必要がある。
まとめ
今回はWordPressに貼れるブログカードを簡単に作る方法について紹介した。
ブログカードを簡単に作る方法は主に４つ。
ブログカードの簡単な作り方
内部ページであればテーマの機能を使えばいい。
外部ページのブログカードを場合は、はてなの機能を使うのが良いだろう。
キレイなカードを作りたいときはiframelyもオススメである。
