Amebaのリブログ(ブログカード)を
新しいタブで開きたい!

記事公開日:
最終更新日:

こんにちは、新潟のマザーシップウェブ制作事務所です。

※当記事はワードプレス限定の解決法なので、それ以外のツールの方には利用できません。ワードプレス以外のホームページの方はごめんなさい。

Amebaブログを今でも使っている事業者さんは多いと思います。こちらをホームページと連携させる方法として「リブログ」が有名ですよね。

「リブログする」を選択してタグをコピーすると、外部リンクを作るためのhtmlが生成されるものです。

Amebaのリブログ(ブログカード)を 新しいタブで開きたい!|マザーシップウェブ制作事務所

以下のような感じのリンクカードが生成されます。(モト冬樹さんブログからお借りしました。イヌが可愛いですね!)

※クリック後、ブラウザの戻るボタンで当記事に帰ってきてくださいm(_ _)m

当記事のようにワードプレスにもリブログを貼ることができるのですが、クリックすると同じウィンドウで開いてしまいます。本当は外部リンクだから新しいタブ(ウィンドウ)で開きたいところです。

色々調べたのですが、新しいタブ(ウィンドウ)で開くことはどうにも難しかったです。リブログから取得されるタグが<a>ではなく<iframe>に囲まれており、どうにもし難いのです。

JavaScriptでなんとかできる可能性はあるのですが、高い確率でブラウザのポップアップブロックにひっかかります。

 

リブログっぽいリンクカードを追加するプラグイン「Pz-LinkCard」

これを解決する方法として「Pz-LinkCard」というプラグインを発見しました。

Pz-LinkCard

インストール後、以下のショートコードを追加することによりブログが表示されます。

{blogcard url="アメブロ記事のURL"}  ※注:{}の記号は[]に変更お願いします!!

 

以下のような感じでリブログっぽいリンクカードが完成します。

そして、クリックすると新しいタブでリンクが開いています!

 

Pz-LinkCardを利用したブログカード入力方法

ショートコードを入れる際、ブロックエディタの方はショートコードブロックを選択して入力してください。

Amebaのリブログ(ブログカード)を 新しいタブで開きたい!|マザーシップウェブ制作事務所

クラシックエディタの方は文章内に直接ショートコードを入れてもいいですし、エディタに出る「リンクカードを挿入」ボタンを利用して追加もOKです。

Amebaのリブログ(ブログカード)を 新しいタブで開きたい!|マザーシップウェブ制作事務所

Pz-LinkCardによるブログカードのデザイン調整

デザインは管理画面の[設定]-[Pzカード設定]から調整可能です。

Amebaのリブログ(ブログカード)を 新しいタブで開きたい!|マザーシップウェブ制作事務所

かんたん書式設定で「ノーマル」にして…

Amebaのリブログ(ブログカード)を 新しいタブで開きたい!|マザーシップウェブ制作事務所

余白をいい感じに調整。

Amebaのリブログ(ブログカード)を 新しいタブで開きたい!|マザーシップウェブ制作事務所

サムネイルを右に変更することでだいぶ、リブログっぽくなります。

Amebaのリブログ(ブログカード)を 新しいタブで開きたい!|マザーシップウェブ制作事務所

さらに細かいデザイン調整(日付をいれたり文字の色を変えたり)も管理画面から可能です。

完璧じゃないかもしれませんが、リブログ「っぽい」リンクカードができました。

デザインは1回設定したら、その後はアメブロのURLだけ取得すればいいので、リブログのhtmlタグを取得するよりも簡単かもしれませんね。

 

リブログのことで悩んでいる方は、こちらのプラグインを使うことをぜひ検討してみてしてください!





ページの先頭へ