こんにちは～。
これまで、このブログに掲載しているリンクは、はてなブログに標準装備（？）のリンク作成ツールを使用していたのですが、最近、「Embedly」というサービスで作成したリンクを貼りつけることにしました。
なぜ「Embedly」を利用するのか？
なぜならば、サンエックスさんのブログへのリンクをはてなブログで作成すると…「ブログカード」で表示されないからです。
▲こんな感じ
なんか、文字だけって寂しくないですか？？
ちなみに、「ブログカード」とはこんな感じ（↓）で、リンク先の記事タイトルやサムネイルなどが表示されるリンクのことです。
リンクを貼るなら、サムネイル画像が表示される「ブログカード」の方が、わかりやすいし華やかでいいなぁ…と思って、グーグル先生に相談したところ「Embedly」を教えていただきました。
※ちなみに、サンエックスさんのサイトの方は一応ブログカード形式になります。（サムネイルは非表示ですが…）
「Embedly」でできること
「Embedly」を利用してリンクを作成すると、こんな感じで画像つきのブログカードが作成できます。
わーい！
しかも、画像の大きさやテキストの編集も可能です！
うむ。これは便利である！
ということで即採用したのですが、ひとつだけ不満な点が…。
それは、「Embedly」で作れるカードには「枠線がない」ということ。
このままでも十分良いんですけど…やっぱりはてなブログのブログカードみたいに枠線がほしいなぁ…と思ったのです。
枠線がないなら引けばいいじゃない！
ということで、はてなブログ用に枠線を引くCSSを作成しました。
このコードを、
PCの場合は
デザイン＞カスタマイズ（スパナのアイコン）＞デザインCSS に
スマホの場合は、
デザイン＞スマートフォン（スマホのアイコン）＞タイトル下 に
入れると枠線が表示されるはず…です。
※一番上の「<style type="text/css">」と一番下の「</style>」は必要に応じて入れてください。
あ、作業を始める前に、必ず追加前のコードをテキストファイル等に保存してバックアップを取っておいてくださいね。
別のコードをいじったり、コードに不具合があった場合に元に戻せなくなるので…。
枠線の太さや色などなどを変更したい場合は…？
枠線の太さや色、形状を変える場合
５行目の「border: 1px solid #E6E6E6;」の部分をいじってください。
★一番最初の「border:」と最後の「；」は削除しないでください。
--------------------
「1px」⇒線の太さ。数字が大きくなるほど太くなります。
「solid」⇒線の形状。
「solid」：一本線
「double」：二本線
「dashed」：破線
「dotted」：点線
「#E6E6E6;」⇒カラーコード。このコードは薄いグレーです。
--------------------
※サンプルのコードだと、「太さ１pxの薄いグレーの一本線」が表示されます。
枠線内の余白の幅を変える場合
6行目「padding: 5px 5px 0px 5px;」で調整します。
★こちらも一番最初の「border:」と最後の「；」は削除しないでください。
--------------------
最初の「5px」⇒上の余白の幅
2番めの「5px」⇒右の余白の幅
3番目の「0px」⇒下の余白の幅
最後の「5px」⇒左の余白の幅
--------------------
※時計回りに「上、右、下、左」と設定されるイメージです。
※サンプルのコードだと、上、右、左は５Px、下は0px（余白なし）となります。
ご利用は自己責任でお願いいたします…
ざっと表示確認はしましたが、このコードを利用してリンクカード以外の部分に枠線が表示されたり、表示が崩れたりしたらごめんなさい…。
さらに、今回、エラそうにコードなどをアップしておりますが、HTMLやCSSは学校に通って勉強したわけではなく、10年ぐらい前に独学で身に着けたので「最新の＆美しいコード」とはかけ離れております…すみません (^-^;)
ちなみに、HTMLはこの本でゼロから勉強しました～。今でも私の宝物です！
ということで、不具合が発生しても直せるから大丈夫だよ、という心優しい方はご活用いただければ幸いです～。
