記事を書くとき、外部リンクや内部リンクを貼ることがあると思いますが、普通に青文字のテキストだけだったら寂しくないですか？
いわゆるリンクってこんな感じだと思うんですが、これにプラスしてブログカードリンクも作れたら見栄えがさらによくなります。
ブログカードにもいろいろとデザインがありますが、今回は”はてなブログ風”のブログカードを作る方法を解説していきます。
なんではてなブログ風かというと、単純にはてなブログやってる人のリンクカードに憧れてたんですよね、それまで普通にテキストリンクだけだったんで。
ざっくりとしたやり方を初めに言っておきますと、こんな感じです。
ざっくり説明：
- ① 「Pz-HatenaBlogCard」プラグインをインストール
- ② ブラウザにリンク作成機能を入れる
- ③ 拡張機能にショートコードを設定する
- ④ リンクコードを記事に貼り付ける
では見ていきましょう。
”はてなブログ風”のブログカードとはどういうものか？
まず、本家はてなブログのブログカードがこちらです。
（※リンクにはなっていません。）
こんな感じではてなブログでは、リンク先の記事タイトルや記事の概要、サムネイルなどが表示されたブログカードが作れるのです。
それに対して、今回紹介するブログカードがこちらです。
どうですか？
「お！ いいな！」と思った方はやり方も超簡単なので真似してみてくださいね！
では早速やり方の説明に行きましょう！
なお、最後に通したやり方を動画で解説していますので、文章じゃわかりづらいという方は動画を見ながらやってみてください！
【手順①】”Pz-HatenaBlogCard”をインストール
まずは必要となるプラグインをインストールしましょう！
「Pz-HatenaBlogCard」というプラグインをインストールしてください。
ダッシュボードのメニューから、「プラグイン」→「新規追加」と進んでいただき、右上の「プラグインを検索」と書かれた検索窓にプラグイン名「Pz-HatenaBlogCard」と打ち込んで検索をかけます。
出てきた「Pz-HatenaBlogCard」のプラグインをインストールし、完了したら有効化します。
これだけで完了です。
【手順②】ブラウザのリンク作成用の拡張機能を入れる
「Pz-HatenaBlogCard」をインストールした時点で、あとは下記のショートコードを記事に貼り付ければすぐにできます。
Pz-LinkCard- URLの記述に誤りがあります。
- URL=リンク先のURL
ですが、もっと簡単にするためにもうひと作業します。
ブラウザのリンク作成用の拡張機能にショートコードを設定します。
ブラウザもいろいろとありますが、ここでは利用者数の多いGoogleChromeと、Firefoxの2つでやり方を紹介します。
GoogleChromeでは「Create Link」という拡張機能を、Firefoxでは「Make Link」という拡張機能を入れましょう。
インストールも簡単にできます。
下記の説明を見ながらインストールしてみてください。
【GoogleChromeの場合】
- ① Googleで「Create Link」と検索窓に打ち込んで検索する。
- ② 出てきた結果のうち、「Create LInk – Google ウェブストア -」を選ぶ。
- ③ 右上の「+ CHROMEに追加」というボタンをクリック
- ④ 「Create Linkを追加しますか？」と聞かれるので、「拡張機能を追加」をクリック
【Firefoxの場合】
- ① 検索窓に「Make LInk」と打ち込んで検索をかける。
- ② 出てきた結果のうち、「Make Link :: Add-ons for Firefox」を選ぶ。
- ③ 「+ Firefoxへ追加」と書かれた緑のボタンをクリック。
- ④ なんか画面出てきたら、「今すぐインストール」みたいなやつをクリック。
- ⑤ Firefoxを再起動させる。
【手順③】拡張機能にショートコードを設定する
拡張機能が入れれたら、次はショートコードを設定します。
ショートコードを設定するというのはどういうことかというと、先ほどのブログカードを作るためのショートコードをブラウザの拡張機能に覚えさせるということです。
「テンプレートを作っておく」みたいな感じかな？
やり方は、拡張機能の設定画面から、表示名とコードを入力して保存しちゃえばOKです！
【GoogleChrome 「Create Link」の場合】
- ① 右上のメニューバーから「Create LInk」を選び、設定を表す「Confiure」をクリック。
- ② Formatを一つ追加したいので、表の下にある「+」ボタンをクリック。
- ③ 適当に分かりやすい名前と、その横に下記のコードを貼り付ける。完成！
【Firefox 「Make Link」の場合】
- ① 右クリックでメニューバーを出し、「Make Link」→「設定」を選ぶ。
- ② 右下にある「新規」をクリックして名前とコードを入力する。
- ③ 「OK」で完成！
【手順④】リンクを取得し、記事に貼り付ける
さて、これでテンプレート化できましたので、あとはリンクを取得し、記事に貼り付けるだけです。
GoogleChromeでは上部にメニューバーがあるので、そこクリックして作ったテンプレートのやつを選びます。
一見何も変化がないようですが、実はそれだけで表示されてるサイトのリンクがコピーされた状態になってるんです。
Firefoxでは、リンクを作りたいサイトを表示させた状態で、右クリックです。そこから「Make Link」、テンプレートを選択すればOKです。
ちなみに右クリックからリンクを取得するやり方はGoogleChromeでもできます。
リンクを取得したら、あとは記事に貼り付けて終わりです。
プレビューで確認してみましょう！
最後に、全部通して動画で解説しているので、参考にしてください。
【GoogleChromeの場合】
【Firefoxの場合】
まとめ
いかがでしょうか。
一度テンプレートを作ってしまえば、あとは楽々ブログカードが作れちゃいます。
これでバンバンリンク貼っちゃいましょう！
あ、言い忘れてましたが、内部リンクでブログカード使用するならアイキャッチ画像は設定しておいた方が見栄えいいですよ！
6件のコメント
hashiya · 2015年11月23日 10:31 AM
Hideさんのサイトいつも大変参考にさせていただいています。メルマガにも登録しました。
本ページ記載のコード↓「”」が１つ漏れていましたのでコメントさせていただきました。
[blogcard url="%url%] ×
[blogcard url="%url%”] ○
HideさんこれでOKですよね？
Hide · 2015年11月23日 1:16 PM
hashiya様
ご指摘誠にありがとうございます！
助かりました。早速修正させていただきました！
そして、当ブログ、当メルマガもご愛読いただきありがとうございます！
役に立つ情報をもっともっと提供できるように、引き続き頑張っていきます^0^/
hiro · 2016年1月8日 5:30 PM
参考になる記事ありがとうございます。
早速自分のブログでも使ってみました^^
質問しても大丈夫でしょうか？
こちらのブログカードをクリックして、
別のウィンドウで開くように設定はできるのでしょうか？
お時間あるときに回答いただければありがたく思います。
Hide · 2016年1月11日 10:08 PM
hiro様
コメントありがとうございます。
別ウィンドウで開く設定にするには、「Pz ブログカード」プラグインの設定画面から、「新しいウィンドウで開く」という項目があるので、ここにチェックを入れると設定できます！
参考までにキャプチャ画像をご用意しましたのでぜひお試しください！
参考画像）⇒https://gyazo.com/3ba2e6e189323b6158995436750ad803
Pz-HatenaBlogCardの導入 · 2016年3月8日 3:47 PM
[…] […]
ブログカードをやってみた | DD (DATE DAYS) · 2016年4月5日 10:16 AM
[…] [blogcard url=”http://earn-in-affiliate.com/blog-cards-hatena”%5D […]