「Embedly」で作成したブログカードに枠線をつけてみた2017-06-16「Embedly」で作成したブログカードに枠線をつけてみたブログのことこんにちは~。これまで、このブログに掲載しているリンクは、はてなブログに標準装備(?)のリンク作成ツールを使用していたのですが、最近、「Embedly」というサービスで作成したリンクを貼りつけることにしました。http://embed.ly/なぜ「Embedly」を利用するのか?なぜならば、サンエックスさんのブログへのリンクをはてなブログで作成すると...「ブログカード」で表示されないからです。リラックマごゆるりブログ▲こんな感じなんか、文字だけって寂しくないですか??ちなみに、「ブログカード」とはこんな感じ(↓)で、リンク先の記事タイトルやサムネイルなどが表示されるリンクのことです。リンクを貼るなら、サムネイル画像が表示される「ブログカード」の方が、わかりやすいし華やかでいいなぁ...と思って、グーグル先生に相談したところ「Embedly」を教えていただきました。※ちなみに、サンエックスさんのサイトの方は一応ブログカード形式になります。(サムネイルは非表示ですが...)「Embedly」でできること「Embedly」を利用してリンクを作成すると、こんな感じで画像つきのブログカードが作成できます。リラックマごゆるりブログうむ。これは便利である!ということで即採用したのですが、ひとつだけ不満な点が...。それは、「Embedly」で作れるカードには「枠線がない」ということ。このままでも十分良いんですけど...やっぱりはてなブログのブログカードみたいに枠線がほしいなぁ...と思ったのです。枠線がないなら引けばいいじゃない!ということで、はてなブログ用に枠線を引くCSSを作成しました。入れると枠線が表示されるはず...です。type="text/css">」と一番下の「</style>」は必要に応じて入れてください。あ、作業を始める前に、必ず追加前のコードをテキストファイル等に保存してバックアップを取っておいてくださいね。別のコードをいじったり、コードに不具合があった場合に元に戻せなくなるので...。#E6E6E6;」の部分をいじってください。★一番最初の「border:」と最後の「;」は削除しないでください。--------------------「1px」⇒線の太さ。数字が大きくなるほど太くなります。「solid」⇒線の形状。「#E6E6E6;」⇒カラーコード。このコードは薄いグレーです。--------------------※サンプルのコードだと、「太さ1pxの薄いグレーの一本線」が表示されます。5px;」で調整します。★こちらも一番最初の「border:」と最後の「;」は削除しないでください。設定されるイメージです。※サンプルのコードだと、上、右、左は5Px、下は0px(余白なし)となります。ご利用は自己責任でお願いいたします...ざっと表示確認はしましたが、このコードを利用してリンクカード以外の部分に枠線が表示されたり、表示が崩れたりしたらごめんなさい...。(^-^;)ちなみに、HTMLはこの本でゼロから勉強しました~。1998-07Amazonで探す楽天市場で探すということで、不具合が発生しても直せるから大丈夫だよ、という心優しい方はご活用いただければ幸いです~。(1)更新情報配信中!Twitterでブログの更新情報をおしらせしています。botti_ovoリンクぼっちです(アメブロ版)スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。