不器用さんのwordpress講座 「あのカッコいい、四角の枠で囲んだリンク表示は何だ?」、ブログカードの作成方法です

シェアする

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

ずっと分からないでいた、あのリンク表示の正体。 
ようやく発見(私がなかなか見つけれらなかっただけです(恥))したので、その方法をご紹介します。

スポンサーリンク
自動サイズレスボンシブ

「近日出荷」でも使いたいけど、なかなか見つけられず

当ブログ「近日出荷」でも、リンクを張ることがあります。 
その時の表示は、

スクリーンショット 2015 04 21 12 37 27
(シンプルですが地味すぎです)


こんな感じ。


悪くはありませんが、何とも地味ですね。


その一方で、他のブロガーさんのブログを覗いてみると、明るく見やすいリンク表示をよく目にするように。

スクリーンショット 2015 04 21 12 53 08
(出典:あゆおさんのブログ「トウフ系」)


こういうのです。


で、早速導入しようと調べたのですが、 
「どう説明すればいいか分からない!」という問題に直面することに。


画像検索の反対で、画像を見せれば検索できるサービスがあれば、 
「コレ、コレ、コレ」


でいいのですが、いざ言葉で説明しようとするとどうすれば良いか分からず。 
とりあえず、


「リンク 表示 四角」

スクリーンショット 2015 04 21 13 12 09


違う。


「リンク 表示 枠」

スクリーンショット 2015 04 21 13 12 23


ダメか。 
ここはもう少し幅を広げて、


「リンク 表示 いけてる」

スクリーンショット 2015 04 21 13 12 37


かすりもしません。 
ならいっそのこと、


「リンク 表示 四角 枠 いけてる」

スクリーンショット 2015 04 21 13 12 53


終了〜!


他に思いつく言葉がなかったので、「もういいや、いったん、タナアゲだ」と諦めて、放ったらかしにしていました。


もちろん、詳しい方に聞くこともできたのですが、「自力で解決する」と最初に決めてしまったので、その方針に従います。 
(とは言いつつ、”あれ”を見るたびにメールで連絡しそうになったことは、内緒の方向でお願いします)


そして、何日か経ったあとに検索をかけたのですが、その時、思いつきで期間指定を使って、条件を絞ったところ、


リンク 貼り付け ブログ」+期間指定:1ヶ月以内

スクリーンショット 2015 04 21 10 16 31


それらしい言葉がやっと出てきました。


ブログカード


これですね。


「ブログカード」は、はてなブログのサービスで、はてなブログの記事のリンクを挿入する際、タイトルや概要をまとめて表示してくれる機能のことです。


「ブログカード」は、はてなブログ内の機能ですが、他のブログでも、この形式でリンクを作れることが分かりましたので、実際に試すことにしました。

ブログカードでブログ記事のリンクを貼る

実際にブログカードでリンクを作ります。 
「近日出荷」はwordpressというソフトで作成しているので、そのままでは「ブログカード」を使うことができません。


アプリを使って作成します。

Google Chrome拡張アプリ「Create Link」をダウンロード

私はブラウザにGoogle Chromeを使っていますので、拡張アプリの「Create Link」を使う方法を選びました。 
(Google Chromeを使われていない方は、この方法は使えませんのでご注意下さい)


Google Chromeの拡張アプリは、Chromeウエブストアからダウンロードできます。 
検索で「Chromeウエブストア」と入力すると、検索結果の1番上に表示されるので、クリックします。

スクリーンショット 2015 04 21 14 09 19


左のサイドバーに検索ウインドウがあるので、「Create Link」と入力して検索。

スクリーンショット 2015 04 21 14 10 02


いくつか候補が出てきますので、「Create Link」を探して、「+無料」ボタンをクリック。

スクリーンショット 2015 04 21 14 15 10

これで、ダウンロードが完了です。


Chromeの右上にある「≡」をクリックして、「その他のツール」から「拡張機能」をクリックすると、

スクリーンショット 2015 04 21 14 33 50


ダウンロードされているアプリが表示されるので、順番に見ていくと、


スクリーンショット 2015 04 21 14 31 22


正しくダウンロードされていることが分かります。 
「有効」にチェックが入っていれば、現在も機能しているということです。

「Create Link」でブログカードを作る

準備が整ったので実際にブログカードを作ります。


Google Chromeの右上に、「Create Link」のアイコンがあるので、クリックしてリストを表示させ、「Configure」をクリック。

スクリーンショット 2015 04 21 14 59 48


すると、次のような画面になります。

スクリーンショット 2015 04 21 15 06 25


Formatsの表の下に、「+」のボタンがあるのでクリック。 
一つ行が増えるので、Nameに「ブログカード」と入力して、次のコードを入力します。

[html]<iframe class="hatenablogcard" style="width:100%;height:155px;margin:15px 0;max-width:680px;" title="%title%" src="http://hatenablog.com/embed?url=%url%" frameborder="0" scrolling="no"></iframe>[/html]


すると、こうなります。

スクリーンショット 2015 04 21 15 10 27


設定が完了しました。


あとは、リンクしたいページを開いて、右上にある「Create Link」のアイコンをクリック。

スクリーンショット 2015 04 21 16 04 12


リストが表示されるので、先ほど名付けた「ブログカード」をクリック。


これで、ブログカードを作るコードがコピーされるので、貼り付けると、



こうなります。 
形式については細かく変更することができます。気になる所は修正していく予定です。

まとめ

あのカッコいいリンクは「ブログカード」でした。 
はてなブログを使うか、Google Chromeの拡張機能、さらに、紹介はしていませんが、Firefoxの拡張機能、wordpressのプラグインなどでも作成できます。

<おまけ>
厳しい低気圧が過ぎて、少しずつ体調が戻ってきました。 
明日は、アイス食べたいです。

スポンサーリンク
自動サイズレスボンシブ
自動サイズレスボンシブ

シェアする

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

フォローする