WordPress

WordPressに貼れるブログカードを簡単に作る方法


リンクをテキストではなくカード形式で表示したい


ブログを書いていると参考情報として別のページのリンクを貼ることがある。

通常は以下のようにテキスト、またはURLでのリンクとなるだろう。

しかしテキストリンクだけだと文字ばかりで味気ない感じがしてしまう。

とはいえリンク用にいちいち画像を用意するのも面倒。


ブログを見ていると、ときどきカード形式のリンクを見かけることがある。

ブログのアフィリエイトはどこのASPに登録しているのか

こんなリンクを簡単に作る方法は無いだろうか。

そこで今回はWordPressに貼れるブログカードを簡単に作る方法について解説する。

この記事を書いている人


システムエンジニア、AIエンジニアと、IT業界で10年以上働いている中堅。PythonとSQLが得意。エンジニアらしく「ITを使って楽する方法」を常に探している。

記事を読むメリット

WordPressに貼れるブログカードを簡単に作る方法がわかる


「ブログカード 作り方」で出てくる方法は簡単じゃない


ブログカードを作ろうとする際、まずは検索して方法を探すだろう。

しかし「ブログカード 作り方」で出てくる方法は簡単じゃない


簡単なものも無くはないが、まず出てくるのはWordPressブログテーマの function.php を編集する方法。

phpソースを編集する時点で危険

ソースが動かなくなって詰む人も出てくるだろう。

そのような方法ではなく、あくまで簡単な方法を利用する。



WordPressに貼れるブログカードを簡単に作る方法


WordPressに貼れるブログカードを簡単に作る方法はいくつかある。

ブログカードの簡単な作り方

  • Pz-LinkCardプラグインを使う
  • テーマの機能を使う
  • はてなを利用する
  • iframelyを利用する
  • Pz-LinkCardプラグインを使う


    ブログカードを簡単に作る方法のひとつはPz-LinkCardプラグインを使うだ。

    WordPressのプラグインをインストールすることで、ブログカードを作れるようになる。

    ただしデメリットとしてサイトが重くなるとも言われている。



    テーマの機能を使う


    テーマにブログカードの機能があれば、そっちを使う手もある。


    例えば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の拡張機能を使うと2クリックで作成できる。


    この機能を導入して、はてなブログカード用のフォーマットを追加して以下を入力する。

    <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に貼れるブログカードを簡単に作る方法について紹介した。

    ブログカードを簡単に作る方法は主に4つ。

    ブログカードの簡単な作り方

  • Pz-LinkCardプラグインを使う
  • テーマの機能を使う
  • はてなを利用する
  • iframelyを利用する

  • 内部ページであればテーマの機能を使えばいい。

    外部ページのブログカードを場合は、はてなの機能を使うのが良いだろう。

    キレイなカードを作りたいときはiframelyもオススメである。




    ITipsと同じようなブログを作る方法

    ブログに興味がありますか?

    もしブログに興味がある場合は↓このページ↓を参考にすれば、ITipsと同じ構成でブログを作ることができます

    サーバー、ドメイン、ASPと【ブログに必要なものは全て】このページに書きました。
    同じ構成でブログ作るのはいいけど、記事はマネしないでネ (TДT;)

    ランキング参加中

    にほんブログ村 IT技術ブログへ

    他にもブログやSNSで紹介してくれると励みになります。

    はてブのコメントで酷評されると泣きます(´;ω;`)

    -WordPress
    -,

    Translate »

    © 2021 ITips