プラグイン

Twitterブログ埋め込みと外部リンクカードに使うプラグイン

本と木

この記事では、Twitterブログ埋め込みと外部リンクカードに使うプラグイン、「Pz-LinkCard」についてご紹介します。

Twitterの「サイトに埋め込む」をしたのに、

あれ、Twitterと同じカード表示にならない・・

ってなったりしますよね。

その悩みはプラグイン「Pz-LinkCard」で簡単に解決します^o^

「Pz-LinkCard」を入れると、Twitterのカード表示だけでなく、ブログで外部リンクを貼るときにも、カードで表示することが可能になります♡

Twitterをブログに埋め込む

ツイートの埋め込み方は

  1. 気になるツイートの右上をクリック
  2. 上から3つめの「ツイートをサイトに埋め込む」をクリック
  3. 表示されるコードをコピー
  4. 自分の編集画面が今「ビジュアル」になってるかと思います。「テキスト」の方に切り替えて貼り付け!


こんな感じになります

これが、カードを表示するためのプラグイン「Pz-LinkCard」を入れてないと、引用テキストみたいな感じでしか表示されないんです。

やっぱりTwitterのカードタイプで見れた方が、見栄えもよくて楽しいですよね!

カード表示させるプラグインは「Pz-LinkCard」

メッセージカードrawpixel / Pixabay

プラグイン「Pz-LinkCard」をダウンロードして、有効化しましょう☆

外部リンクカードを作成しよう

JINにもともと設定してあるのは

赤い猫
プロフィール【プロフィール】初めまして、「アカイネコ」の中にいるアカネです 今日は初めまして プロフィールのお届けです☆ 待った?...

こういうカードデザイン。

かわいいですよね!

見やすくて、かわいい!

内部リンクはカードタイプで表示されるように、JINでは最初から設定してあります。

外部リンクは設定されていないので、設定が要ります。

 

WordPressテーマJINの場合の設定

を参考に設定しました。

私が使っているのはWordPressテーマJINなので、JINのカード表示に寄せる感じですね。

設定しないとだいぶシンプルみたい。

CSSの設定を触る辺りがちょっとドキドキでしたね。

シロネ
シロネ
がんばって!

カード表示させるためのショートコード

ショートコードは公式ページをご覧ください。
(表示が上手くいかなかったのですみません・・)

私はショートコードなるものを知らなかったので、最初はリンクカード表示させられませんでした^o^;

Twitterをカード表示させたいと思い、「Pz-LinkCard」を入れたところ、外部リンクがエラー表示になり、ようやく問題と向き合いました(爆)

それまでは外部リンク先のタイトル名を書いて、「リンクを挿入」で乗り切っていたんですが・・・

結果として外部リンクもかっこよく表示できるようになったし、まいっか♪(*´-`)

ショートカット登録は「AddQuicktag」

自分の画面ではショートコード挿入ボタンが見当たらないので、ショートカット登録をしました。

ショートカット登録はプラグイン「AddQuicktag」でできます。便利です!

設定の仕方は下の記事をご覧ください。

カラフルな観覧車
初心者がアフィリエイトASPを検討した結果、アドセンス様々だった今日は私が取り組んだことをご紹介 まだまだ初心者なので、 「AddQuicktag」というプラグインを使った ショートカッ...

 

私の場合のリンクカード設定

ちなみに私は

  • 「かんたん書式設定」→「なし」

 

そして表示の設定のところ(外観設定)は上のサイトを参考にし、違ったところが2点。

  • サイト情報は「なし」を選択(「サイト名称を使用」にはチェック入れたまま)
  • 角を丸めるは「4px」を選択(※適当なので、お好みでどうぞ)

 

サイト情報を「なし」にした理由は、最初は「上側」にしていたんですが、なんか表示がおかしくなっていたので、「なし」にしてみたら綺麗に表示されました。

もし私と同じように、

なんか表示変・・

ってなった方は、試してみてください☆

おわりに

クレヨンで書いた♡kaboompics / Pixabay

この記事ではTwitterブログ埋め込みと外部リンクカードに使うプラグイン、「Pz-LinkCard」のご紹介と、JINのデザインに対応した設定方法についてご説明しました。

私は「Pz-LinkCard」、ずっと使い方がわからなかったんです。

外部リンクカードを使いたいと思ってから4か月くらい経って成功しました^^;

きっかけはTwitterをカード表示させたかったからですね(笑)

さすがにTwitterはカードの表示にならないと、文字だけで引用の表示になるので、絵図らが寂しいですよね。

私の成長記録が、ブログを始めたばかりのあなたのお役に立てていたら幸いです(‘ヮ’*)