• このエントリーをはてなブックマークに追加

枠線付きのカードリンクの作り方

葉(よう)葉(よう)

どうも。葉です。今日は、下にあるようにブログ内に枠やアイキャッチ画像付きのカードリンクを作成する方法を紹介するよ。

枠線・アイキャッチ画像付きのカードリンク

Pz-LinkCardーカードリンク

にゃんこにゃんこ

おお~!いいにゃん!かっこいいにゃん!

とはいっても、カードリンクを使うメリットがわからないと
使う気にもならないですよね。

カードリンクを使うことのメリットは主に以下の3つ。

  • ブログデザインが鮮やかになる
  • リンク先の記事内容がわかりやすく、目立つ
  • 複数記事読んでもらえる可能性が上がる

特に3つ目の『複数記事読んでもらえる可能性が上がる』は、
アクセス数を伸ばしたいアフィリエイターやブロガーには、ありがたい効果です。

では早速、カードリンクを作成する方法を解説していきます。

 

1.WordPressプラグインPz-LinkCardをインストール

今回紹介するのは、WordPressのプラグインPz-LinkCardを使う方法です。

葉(よう)葉(よう)

初心者の方やphpやCSSなどのプログラムがわからない人でも簡単にカードリンクを作れますよ。

まずは、WordPress管理画面の左メニューより、『プラグイン→新規追加』をクリックしてください。

Pz-LinkCardインストール1

プラグインの検索窓に『Pz-LinkCard』を入力し、エンターを押します。

Pz-LinkCardインストール2

Pz-LinkCardの『今すぐインストール』をクリックします。

Pz-LinkCardインストール3

『プラグインを有効化』をクリックします。

Pz-LinkCardインストール4

以上で、カードリンクを作成するプラグイン『Pz-LinkCard』のインストールは完了です。

2.アイキャッチ画像や囲み付きのカードリンクを作ってみる!

では、ここからは、実際にカードリンクを作ってみましょう。
といってもやり方はすごく簡単です。

『投稿→新規追加』をクリックし、記事投稿画面に移動します。

カードリンク作成方法

記事投稿部分に次のコードを貼り付けてください。

[blogcard url="リンク先のURL"]

※『”リンク先URL”』の『””』の部分は消さないように注意してください。

カードリンク作成方法2

公開した記事を確認してみると次のようにブログカードが作成されています。

カードリンク作成方法3

簡単に、アイキャッチ画像付きのカードリンクを作成することができました。

Create linkを使うとたったの2クリックで。。。

にゃんこにゃんこ

でも。。。毎回コードをコピーして貼り付けるのは面倒にゃん!

そうですね。毎回コードをコピーして貼り付けるのは確かに面倒です。

そこで今回、カードリンクをより簡単に設置するために

Chromeの拡張機能『Create Link』を活用しましょう。

葉(よう)葉(よう)

Create Linkを使えばたったの2クリックでリンクカードコードをコピーできますよ!

まずは、こちらよりCreate Linkをインストールしてください。

Create Link – Chrome ウェブストア

インストールが完了すると、Chromeの右上に次のCreate Linkのマークができているはずです。

Createlindでカードリンク作成1

『Create Linkマーク→Configure…』をクリックします。

Createlindでカードリンク作成2

コード生成フォーマットを作るために『+』をクリックします。

Createlindでカードリンク作成3

『Name』『Format』の部分に以下の内容を入力してください。

『Name』:任意の名前(※今回は、『Link Card』と入力しました。)

『Format』:次のコード

[blogcard url="%url%"]

Createlindでカードリンク作成4

ブログ記事内でリンクをさせたいページに移動し、

『Create Linkマーク→Link Card』の順でクリックします。

Createlindでカードリンク作成5

WordPressブログの記事投稿画面に移動し、右クリックで『貼り付け』を行うと。。。

カードリンク作成方法

Createlindでカードリンク作成6

次のように、リンクカードを生成するショートコードが貼り付けられます。

Createlindでカードリンク作成7

記事公開後に記事を確認してみると次のように

アイキャッチ画像や囲み枠つきのカードリンクが生成されています。

sc20160430141644

にゃんこにゃんこ

これで、簡単かつ素早くカードリンクを作れるにゃん!

3.囲み枠線のデザインも簡単に変更!

これだけでも十分に便利なPz-LinkCardですが、嬉しいことにデザインの変更も簡単にできます。

葉(よう)葉(よう)

カードリンクのデザイン変更手順を紹介していきます。

WordPressのカードリンクより『設定→Pzカード設定』をクリックします。

カードリンクの囲み枠線のデザイン変更1

『定型書式』をクリックすると次のようにカードリンクのデザインを選択できます。

カードリンクの囲み枠線のデザイン変更2

それぞれのデザインの表示をまとめました。好きなデザインを選択してください。

Pzリンクカード標準書式

sc20160430141644

セロハンテープ(中央)

sc20160430141845

セロハンテープ(左上と右上)

sc20160430141945

セロハンテープ(長め)

sc20160430142050

斜め

sc20160430142139

3D回転

sc20160430142320

紙がめくれた効果(テーマとの相性があります)

sc20160430142450

テープと紙めくれ(テーマとの相性があります)

sc20160430142632

ブルーグリーン(黒背景奨励)

sc20160430142801

オレンジ(黒背景奨励)

sc20160430142909

グリーン(黒背景奨励)

sc20160430143049

ブルー(黒背景奨励)

sc20160430143223

葉(よう)葉(よう)

好きなデザインのカードリンクを選択してください。

4.その他のおすすめデザイン設定!

最後にその他の細かい設定について解説しておきます。

葉(よう)葉(よう)

僕の個人的なおすすめなので、気に入ったら取り入れてください。

表示設定

配置設定

カードリンクの大きさや文字と枠の距離などを設定できます。

おすすめは、カードの横幅を広げることです。

僕は、横幅を650pxに設定しています。

Pz-LinkCardの詳細設定1

カードの横幅を『500→600』に変更すると次の様になります。

500px-カードリンク

600px-カードリンク

その他の表示設定

その他のおすすめの表示設定です。

Pz-LinkCardの詳細設定2

カード全体をリンク

チェックを入れるとカードリンクのどこにマウスカーソルをおいてもリンク先が開きます。

この方が、リンク先のクリック率が上がると思うので、チェックをつけたままでオッケーです。

枠線の太さ

カードリンクの枠線の太さを変更できます。

特に変更は必要ありません。

外観設定

上図の用に設定してください。

■角を丸める

人は、角が丸まっていたほうが柔らかい印象を受けるので、クリック率が上がるらしいです。

■サイト情報

サイト情報は、『下側』に設置することをおすすめします。

リンクを貼る際には、リンク先にどんな記事があるのか?を大一優先に相手に伝えるべきです。

なので、ブログやサイトのタイトルは、下側にしましょう。

■影をつける

本当に好みの問題ですが僕の考えで『シンプルが一番』なので、

影をつけるのチェックは外しています。

シェア数を表示する

WebAPIを使用してソーシャルカウント数を取得しているのでカード表示に時間がかかることがあります。

Facebookのシェア数、はてなブックマーク数を見せるのとカード表示時間のどちらを取るかになりますが、シェア数やはてブが少ないのであれば表示時間を取るべきだと考えました。

ブログの表示時間はSEOにも関連があると言われているので、ソーシャルカウント数のチェックは外しています。

文字設定

カードリンク内の文字の大きさや色の設定です。

タイトルは、リンク先にどんな情報があるのかを示す一番大事な要素なので目立つように赤色に設定します。

Pz-LinkCardの詳細設定6

ここまで設定できたら、『変更を保存』をクリックして、設定完了です。

外部リンク・内部リンクの表示設定

外部リンク・内部リンク・同ページへのリンクなどは、リンク先ごとに表示を変えたい場合のみ設定してください。僕は、外部リンクと内部リンクの表示を変えたいとは思わなかったので特に設定はしていません。

いちよう、設定するのどのような表示になるのかだけ紹介しておきますね。

外部リンクの背景色を薄い青

内部リンクの背景色を薄い赤に設定します。

記事取得方法は、『抜粋文が設定されている投稿はそちらを表示する』をクリックしてください。

Pz-LinkCardの詳細設定7

すると、リンクカードの背景色は下図のようになります。

Pz-LinkCardの詳細設定ー背景デザイン

背景色だけでなく背景画像も設定できるので外部リンクと内部リンクの違いをはっきりと示したいのであれば、設定してください。

5.まとめ

プラグインPz-LinkCardを使ってWordPressブログ内にリンクカードを設置する方法を丁寧に解説しました。

とても簡単に使えるプラグインなので初心者さんにもおすすめです。

こんな便利なプラグインを作ってくれたぽぽろんさんには、感謝しかありませんね。

WordPressでリンクをカード形式で表示する Pz-LinkCard | ぽぽづれ。

カードリンクとテキストリンクを上手に組み合わせて、見やすいサイトを作っていきましょう!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

プラグイン