Embedlyで登録なしでCSSでカラフルなブログカードを作ってみました



■ この記事は 2017/06/12 に修正致しました。


弊ブログでは最近 ブログカード を記事内に表示することがとても多くなりました。
私がそのブログカードなるものを初めて知ったのは今年に入ってからなんですけどね (^^ゞポリポリ

ブログカードって




[ 記事都合によりこれ ↑ は画像にしてありますが実際はテキスト表示です ]


こんなのです。
つまり、自分の過去記事へのリンクやら他ブログの記事にテキストリンクを張る代わりに、このようなサムネイル画像や記事抜粋まで自動取得して、ちょっとお洒落にリンクを表示するものです。

有名どころでは 『 はてなブログカード 』 がありますが、こちらがブログカードのパイオニア的存在なんでしょうかね? 
その歴史(笑)まではよく知りません。

Googleで「ブログカード」と検索すると、今は多様なものが存在するようになってますよね。
そして、ブログカードを生成するツールまでたくさん登場して来てて「これからブログカードを利用しようと思ってるけど、どれが良いの?」と迷ってしまってる人もいらっしゃるでしょう (^_^; アハハ…

仕様や機能にはそれぞれに一長一短があったりして、いろいろと面白いです(爆)
でも「これは素晴らしく完璧!」ってものに私は未だ出会っておりませんと言うか、未だ私もそれら全部を知り尽くしてる訳でもないから評価は出来ないんですけど(笑)
まあ、好き好きですかね~ うんうん(^-^)
「私はブログカードなんて要らない」って人もいるでしょうし。

私はちょっと前に 「 Embedly 」 を知って、いろいろと検索してみると多種の情報が見つかりますが、無料でもそのブログカードを生成することが出来る様子で、とりあえず未登録のままで弄くってみたら


FC2ブログのAOSSL(常時SSL)化に期待してます

FC2ブログのAOSSL(常時SSL)化に期待してます

先般よりFC2では、多種サービスのAOSSL(常時SSL)化を進めておりますよね。 平素は、FC2(fc2.com)をご利用いただき、誠にありがとうございます。



こんなブログカードの取得になったんです。
これを見て最初は「はてなブログカードのような枠線もなくて、なんか貧相だねぇ (^_^; アハハ…」って苦笑してしまったんです (^^ゞポリポリ
上は、最初にコード取得したままのブログカードを表示させたもので、なんともアイキャッチ画像がでっかく文字列も多すぎて使用スペースがムダに広すぎる(爆)
ブログカードを貼る目的はリンク先への誘導なんですから、過度にスペースを使いすぎって感じです(笑)
下のはアイキャッチ画像を小さくしたり、抜粋記事内容ももっと短く編集(ワンタッチで簡単)して貼り付けたものです。

このままではあまりにも貧相(笑)な為に使う気にもなれなかったんです (^_^; アハハ…
私の場合は「はてなブログカード」の綺麗感に「好いなぁ、これ~♪」って気持ちになっちゃってたもんですからね。
それと、実は近々FC2ブログがAOSSL化になる動きがありますから、そうなると「はてなブログカードは表示されなくなってしまう」ので、早急にそれに代わるブログカードを使えるようにしたい気持ちがあったんです。
はてなブログも未だ非SSL(やっと今頃になってSSL化へ向けての動きが始まった様子)ですから、そのサービスである「はてなブログカードもまだ非SSL」と言うことで表示出来なくなってしまう問題があるのです。
きっとFC2ブログの方が先にAOSSLスタートになるでしょうからね(笑)

ですから「Embedlyをもっとなんとかビジュアル的に出来ないものか!」って感じでEmbedlyの情報を検索しまくりました。  

もうもう ( ̄ε=‥=з ̄) ふんが~! って鼻息荒くね(爆)

そして、、、

Embedlyに枠線や背景色をつける(アメブロでのやりかたつき) - やがて煙になる日まで

さて、Embedlyの関係を補足してみます。 続きを読む≫ Embedlyが便利な場合もある 素っ気ないので、



こちらの記事を見つけて「あっ! そうか、EmbedlyってCSSで装飾出来るのか♪」って鼻血が出そうなくらい興奮しちゃいました(爆)
ヒントを得られて感謝感謝です、管理人さん、ほんとにありがとうございました m(_ _)m
但し、上記参考にさせて戴いた記事でのブログカード取得コードの内容と、これからの弊記事で表現する内容では異なっておりますことを予めちょっとだけでも記憶にとどめておいて下さい(笑)

Embedlyって有料登録したらいろんなことが出来るようなんですけど、ブログカードだけでしたら未登録のままでもビジュアル的な表示が出来そうって思うようになりましてね(笑)


それでいろいろと試行錯誤してて、背景色が単色でしたら簡単にそのカラーコード挿入も出来るんですけど、グラディエーションでカラフルにするにはちょっとそれなりの知識と色合いを考える手間暇が必要になることも解りまして。

ですから、Embedlyブログカードをもっとカラフルと言うかビジュアル的なものにカスタマイズして使ってみたいと言う方用に、背景色にグラディエーションカラーコードも含めたCSS(スタイルシート)を作ってみました。

名付けて Embedlyブログカードスキン です。

とりあえずお好みのものがありましたら下のスキンコードをコピペしてお使い下さい ^^
全てレスポンシブWebデザイン対応になっております。
尚、改変し易い形で書いてありますので、CSSがお解りの方は部分応用して戴いてけっこうです。
カラーコードには半透明効果を表現しやすいようにrgba値にしてあります。

注意) 下 ↓ のブログカードスキンサンプルは、記事都合により「画像」にしてあります為、画面の狭いスマホ等での閲覧時には画像縮小されそのままの形で表示されますが、本来のEmbedlyブログカードはレスポンシブ構造であり、全体縮小はされずに「縦長構造」での表示になります。
パソコンから閲覧でしたら、この記事のブラウザ画面をスルスルとスマホ画面サイズにまで狭めて見て戴ければその様子がよく分かります。



<div style="max-width:630px;text-align: center;background:rgb(255, 255, 255);margin:0 auto;padding:5px 5px 5px 5px;border-style:ridge;border: 1px solid rgba(173, 171, 171,0.5);border-radius:5px;box-shadow:3px 3px 4px rgb(153, 153, 153);"></div>


2017-06-12-embedly-2.png
<div style="max-width:630px;text-align: center;background:linear-gradient(rgba(28, 216, 210,0.5),rgba(147, 237, 199,0.3));margin:0 auto;padding:5px 5px 5px 5px;border-style:ridge;border: 1px solid rgba(173, 171, 171,0.5);border-radius:5px;box-shadow:3px 3px 4px rgb(153, 153, 153);"></div>


2017-06-12-embedly-3.png
<div style="max-width:630px;text-align: center;background:linear-gradient(rgba(239, 50, 217,0.2),rgba(137, 255, 253,0.6));margin:0 auto;padding:5px 5px 5px 5px;border-style:ridge;border: 1px solid rgba(173, 171, 171,0.5);border-radius:5px;box-shadow:3px 3px 4px rgb(153, 153, 153);"></div>


2017-06-12-embedly-4.png
<div style="max-width:630px;text-align: center;background:linear-gradient(rgba(117,127,154,0.4),rgba(215,221,232,0.4));margin:0 auto;padding:5px 5px 5px 5px;border-style:ridge;border: 1px solid rgba(173, 171, 171,0.5);border-radius:5px;box-shadow:3px 3px 4px rgb(153, 153, 153);"></div>


<div style="max-width:630px;text-align:center;background:rgb(255, 255, 255);margin:0 auto;padding:5px 5px 5px 5px;border-radius:5px;border-width:1px;border-style:dashed;border-color:rgba(0, 0, 0,0.5);"></div>


2017-06-12-embedly-6.png
<div style="max-width:630px;text-align:center;background:linear-gradient(rgba(28, 216, 210,0.5),rgba(147, 237, 199,0.3));margin:0 auto;padding:5px 5px 5px 5px;border-radius:5px;border-width:1px;border-style:dashed;border-color:rgba(0, 0, 0,0.5);"></div>


2017-06-12-embedly-7.png
<div style="max-width:630px;text-align: center;background:rgba(96,125,139,0.2);margin:0 auto;padding:5px 5px 5px 5px;box-shadow: 0 7px 5px rgba(0,0,0,0.3);margin:0 auto;"></div>


2017-06-12-embedly-8.png
<div style="max-width:630px;text-align: center;background:linear-gradient(rgba(28, 216, 210,0.5),rgba(147, 237, 199,0.3));margin:0 auto;padding:5px 5px 5px 5px;box-shadow: 0 7px 5px rgba(0,0,0,0.3);margin:0 auto;"></div>



そうそう、このブログカードスキンコードをどう使うのか、Embedlyを使うのが初めての方の為に使い方も併せて簡単に解説しておきます。

Embedlyでブログカードを作る 一番簡単な方法はブックマークレット を利用する方法です。

Embedlyのブックマークレットページ にアクセスして下さい。
そして、下記のGIFアニメーションを参考に操作して下さい。


[ 画像クリックで GO & STOP ]


[ 画像クリックで GO & STOP ]



簡単ですね(笑)
これであなたのブラウザのブックマーク欄に「+ Embed」が削除するまではずっと装備されてますから、必要な時にはいつでもここをワンクリックでEmbedlyのブログカードの貼り付けコードが取得出来るんです o(^-^)oワクワク

① ブログカードスキンコードをコピーする


先ずは、上記サンプルからお好みのブログカードスキンのスタイルシートを含むコードをメモ帳等にコピーします。





こんな具合にメモ帳等に貼り付けます。

② ブログカード用コードをコピーする


次に、ブログカードを作りたい記事にアクセスして、あなたのブラウザのブックマーク欄に貼り付けてある「+ Embed」をクリックします。
そうすると、ブラウザ画面が薄暗くなりブログカードを作成する部分だけがポップアップ的に表示されます。





下のGIFアニメのような表示になりますから、必要な操作をします(GIFアニメを見て、その操作要領を掴んで下さい)。


[ 画像クリックで GO & STOP ]


[ 画像クリックで GO & STOP ]


このようにコピーしたEmbedlyのコードを、先ほどメモ帳に貼り付けたスキンコードの部分にコピペ挿入してください。


[ 画像クリックで GO & STOP ]


[ 画像クリックで GO & STOP ]


コピペ挿入する位置はスキンコード末尾の </div> 直前です。
正しい位置に挿入出来ましたら、そのコードを「すべて選択」してからコピーします。
それを、あなたの記事の貼り付けたい箇所にペーストしてあげればブログカードの完成です。

[ これ ↓ がCSSで装飾した実物のEmbedlyブログカードです ]


FC2ブログのAOSSL(常時SSL)化に期待してます

先般よりFC2では、多種サービスのAOSSL(常時SSL)化を進めておりますよね。 平素は、FC2(fc2.com)をご利用いただき、




CSS知識をお持ちの方は、独自にデザインなさってお楽しみ下さい ^^


■ 注意事項

上図GIFアニメーション解説のように「記事の短縮編集をした場合」には取得したHTMLコードの先頭が

<a class="embedly-card"
から
<blockquote class="embedly-card"

のようにblockquoteに変わりますが、記事全部を削除した場合(記事タイトルは残る)には前者のままになります。
ただし、時によっては記事短縮編集してもblockquoteタグに変わらない場合もあり、ちょっと不思議です(笑)
もしかして、Embedlyのコード取得スクリプトに不具合あり? まぁ、いいですけど(笑)



■ 追記: 2017/10/13
Embedlyブログカードよりも、遙かに使いやすく自由なカスタマイズが出来るブログカードが新登場しましたからね~♪



Akira風ブログカードのカスタマイズCSSを公開します - Akira風ブログカード

さてさて、弊ブログのちょっと前の記事でAkira風ブログカードをCSSでカラフルにカスタマイズしてみました - Akira風ブログカード今回の記事タイトルにあります 『 Akira風ブログカード 』...





検索からの方は
トップページへもどうぞ
関連記事

Comments 3

There are no comments yet.

正三  

スマホでの表示

fc2ブログを使っています。PCでは、とてもかっこよく表示する事が出来ましたが、スマホで見ると縦長になってしまいます。スマホで見てもはてなのような横長になるようにはできませんか?

2017/08/09 (Wed) 08:17 | EDIT | REPLY |   

ぼっちん  

正三さんへ

正三さん、はじめまして コメントをありがとうございます ^^

お尋ねの件ですが、記事中にも記載しておりますが『全てレスポンシブWebデザイン対応になっております』とさせて戴いております。
弊ブログもと言うか、今やブログやサイトテンプレートのデザインは「レスポンシブWebデザイン」が主流になりつつあります。
つまりはPCから見ても、画面の狭いスマホやタブレットから見ても、いちいち画面上を指でピンチして広げなくても、文字がそのまま読める「モバイルファースト」をGoogleが推奨しております。

従って、スマホで見ると「縦長表示になる」のもレスポンシブ構造だから「正常」なんです。

正三さんのブログは未だレスポンシブテンプレートではないと言うことなんでしょうか?
鍵コメでもけっこうですから、ブログURLをお知らせ戴けましたら、旧来のテンプレート用にカスタムすることも考えてはみますが、、、。
正直、それだと時代を後戻りしてしまうようで気が乗りませんが、、、。

何せ、私は「レスポンシブWebデザイン推進派」なものですから (^^ゞポリポリ

2017/08/09 (Wed) 08:44 | EDIT | REPLY |   

ぼっちん  

正三さんへ

上記に追記です。

Embedlyブログカードは元々が「レスポンシブ構造」になってました。
それに合わせて私がCSS装飾した部分も「レスポンシブ構造」に作成したんでした。
従って、元々のEmbedlyのレスポンシブ構造を壊してしまうような表示にカスタムするのは無理なんですね。

はてなブログカードはそのレスポンシブ構造にはなっておりませんから、スマホ画面上では横長表示のままなんですけど、逆にそれだとスマホ画面で見ると「内容がちょん切れる」ような表示になってしまう訳です。

2017/08/09 (Wed) 09:13 | EDIT | REPLY |   

Leave a reply