# ホームページ運営
ブログ・お知らせ

Amebaのリブログ(ブログカード)を
新しいタブで開きたい!
記事公開日:
最終更新日:
こんにちは、新潟のマザーシップウェブ制作事務所です。
※当記事はワードプレス限定の解決法なので、それ以外のツールの方には利用できません。ワードプレス以外のホームページの方はごめんなさい。
Amebaブログを今でも使っている事業者さんは多いと思います。こちらをホームページと連携させる方法として「リブログ」が有名ですよね。
「リブログする」を選択してタグをコピーすると、外部リンクを作るためのhtmlが生成されるものです。
以下のような感じのリンクカードが生成されます。(モト冬樹さんブログからお借りしました。イヌが可愛いですね!)
※クリック後、ブラウザの戻るボタンで当記事に帰ってきてくださいm(_ _)m
当記事のようにワードプレスにもリブログを貼ることができるのですが、クリックすると同じウィンドウで開いてしまいます。本当は外部リンクだから新しいタブ(ウィンドウ)で開きたいところです。
色々調べたのですが、新しいタブ(ウィンドウ)で開くことはどうにも難しかったです。リブログから取得されるタグが<a>ではなく<iframe>に囲まれており、どうにもし難いのです。
JavaScriptでなんとかできる可能性はあるのですが、高い確率でブラウザのポップアップブロックにひっかかります。
リブログっぽいリンクカードを追加するプラグイン「Pz-LinkCard」
これを解決する方法として「Pz-LinkCard」というプラグインを発見しました。
インストール後、以下のショートコードを追加することによりブログが表示されます。
{blogcard url="アメブロ記事のURL"} ※注:{}の記号は[]に変更お願いします!!
以下のような感じでリブログっぽいリンクカードが完成します。
そして、クリックすると新しいタブでリンクが開いています!
Pz-LinkCardを利用したブログカード入力方法
ショートコードを入れる際、ブロックエディタの方はショートコードブロックを選択して入力してください。
クラシックエディタの方は文章内に直接ショートコードを入れてもいいですし、エディタに出る「リンクカードを挿入」ボタンを利用して追加もOKです。
Pz-LinkCardによるブログカードのデザイン調整
デザインは管理画面の[設定]-[Pzカード設定]から調整可能です。
かんたん書式設定で「ノーマル」にして…
余白をいい感じに調整。
サムネイルを右に変更することでだいぶ、リブログっぽくなります。
さらに細かいデザイン調整(日付をいれたり文字の色を変えたり)も管理画面から可能です。
完璧じゃないかもしれませんが、リブログ「っぽい」リンクカードができました。
デザインは1回設定したら、その後はアメブロのURLだけ取得すればいいので、リブログのhtmlタグを取得するよりも簡単かもしれませんね。
リブログのことで悩んでいる方は、こちらのプラグインを使うことをぜひ検討してみてしてください!