ブログカードを作ろう！！

ブログカード？？なんぞや？？

って方も多いと思います。 ブログカードとは「はてなブログ」で使用されているリンク作成機能です。
ネットページをかっこよく表示してくれて美しい！！！

パワーアップして戻ってきた！「青の洞窟」

こんな感じのリンクの方がかっこよくありません？？

はてなブログではすぐに使えてボタン一つ。または・・・

https://hatenablog-parts.com/embed?url=[表示したい任意のURL]

を打ち込むだけで使えます。ちなみに応用すればWardPress等でも使えるこの機能。

素敵！はてなブログ！

しかしここはライブドアブログ・・・。

普通にしていれば使えないのですが、さっき張れていましたよね？？
実は工夫すればどんなブログサービスでも似たようなリンクを作成することができるんです。

今日は「ブログカード」をライブドアやアメーバ、FC2やその他に転用できる便利な作成法です！

LivedoorBlogをはじめとする「ブログカード」の作り方

さて、このブログカード。結局はプログラムみたいなもので動いています。
細かく説明すると難しいので、はしょりますがHTML言語の<iframe>タグで動いています。
この<iframe>をHTMLに打ち込めばブログカードとして機能するわけです。

さてじゃあそのタグをどういう風に生成するか・・・。

いやー、本当に今は良い時代になりましたね。あるんですよ！！そんな便利な物が！！

ブラウザの拡張機能です！！

使用ブラウザに拡張機能を追加する

まずは自分の使っているインターネットブラウザに拡張機能(アプリ・アドオン)を追加しましょう！

• Google Chrome「Create Link」

私はグーグルクロームを使用しているのでこちらのソフトですが、FireFoxでも「MakeLink」という拡張機能があります。

• 「Make Link」

ここから先はクロームでの説明になりますが、MakeLinkでも基本的には同じです。

こちらは公開停止になりました

Create Linkの設定をする

グーグルクロームに「CreateLink」を追加すると・・・

ブラウザの右側にこんなスイッチができるようになります。
Plain text
HTML
markdown
mediaWiki
————–
configure

の順番で、この一番下「configure」をクリック！

するとこんな画面がブラウザにどーーーん！
文字列が多すぎて「わーーー」っとなるかもですが、この水色の部分を見てください。
ここの「HTML」の「Format」部分に

<iframe style=”display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;” title=”%title%” src=”https://hatenablog.com/embed?url=%url%” frameborder=”0″ scrolling=”no”><a href=”%url%” data-mce-href=”%url%”>%title%</a></iframe>

これをコピペ。

はい！準備完了！！お疲れ様でした！

記事に貼ってみる

さて。貼り方ですがこれも簡単。
とりあえず練習がてらに「BANDAI」のHPでも貼ってみましょうか！

1. 貼り付けたい(ブログカードを作りたい)HPに行って、「CreateLink」のボタンを押す。
   ※今回はバンダイのHPです。
   
2. 「HTML」を選択する。これで自動的にHTML言語でコピーされます。
3. Amebaやライブドアなどの「HTMLタグ編集」として貼り付けたい所に「貼り付ける」
   ※貼り付ける場合は「Ctrl+V」ボタンでも、マウスクリックのペーストでもどちらでも可
   
   こんなかんじ

さいごに

意外に簡単じゃないですか？すこしでもHTMLの知識があれば余裕余裕！！
「CreateLink」ですが先ほどの並んでいた

• Plain text
• HTML
• markdown
• mediaWiki

ですが、HTMLは割愛。

• Plaintext　URLとページ名のみコピー
• Markdown　マークアップ言語「MarkDown」用にコピー
• MediaWiki 　メディアWiki用コピー

と様々に使えます。興味がある方は調べてみると便利に使えますよ！！

さぁ！これであなたのどんなブログでもブログカードが作れるのでぜひ試してみてね(*･ω･)ノ