vanillaice (Akira)

vanillaice (Akira)

SSL化後の悩ましい作業のひとつ。
ブログカード

これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`)
画像や記事概要など、必ずしもOGPに従っているわけではないもので。
かといって はてなブログカード はSSLに対応できてないですし。

私のブログの特定ページでEmbedlyがどうしてもOGP画像を出してくんない(笑)
そしてEmbedlyは非常にカスタマイズし辛いんですね。
ほとんどできないと言っても過言でない。
もう自分で作った方がはえーわ ε=(。・`ω´・。)
というわけで作りました。

サンプル

Pianissimo - テンプレート

名称 Pianissimo カラム数 2 プラグイン対応 ○ (右サイドメニュー) レスポンシブ対応 ○ サイドメニュー 右 記事幅 可変 最大 770px サイドバー幅 固定 300px (内寸 270px) 任意個人設定 レスポンシブ利用 = スマホ版非表示設定 SNSシェアボタン利用 = メタタグ設定 その...

使い方

① 以下の「ブログカード」というテキストをドラッグ&ドロップでブラウザのブックマークバーに放り込んでください。

通常版(自身のサイト内での利用など)
ブログカード

引用版(第三者のサイトからの引用)
引用ブログカード

クリックするのではなくドラッグ&ドロップです。
通常版と引用版では吐き出されるhtml内容が違います。
引用版の方はSEO版というか、
「自分のサイトを検索上位に!」
というアレではなく、
「検索エンジンに正しい情報を伝える」
という本来の意味です。
記事概要部位を引用であることを明示する <blockquote> で囲っています。
CSSは共通ですので、場面によって使い分けてください。

② 以下の内容をスタイルシート(CSSソース, 管理画面下段)にペタリ。

デフォルトCSS

上記サンプルボタンをクリックすると別タブでソース内容が出てきますので、
Ctrl + A で全選択
Ctrl + C でコピー
Ctrl + V で貼り付け

(Macは CtrlキーではなくCommandキーです)

貼り付けましたら一番上の行 @charset "utf-8";削除 してください。
スマートフォンなど幅の狭い画面内でも違和感の無いようレイアウトを修正しました。

③ カードにしたいwebページを開き、ブックマークレットをクリック

ブックマークレット

あとは記事に貼り付けるだけです。
旧投稿画面をお使いの方はリアルタイムプレビューで画像がドーンと大きく出てきてびっくりするかもしれませんが無視して作業を続けてください。

特徴説明やお願いごとなど

今回CSSは別で設けることにしました。

● CSSを別にした理由
CSSとhtmlとを一緒に吐き出してしまうとバリデーションエラーになります。
また、documentルートまで作ってしまうと描画がとても遅くなります。
そして一番は カスタマイズ性 ですね。
CSSを分けたことでみなさんのカスタマイズを受付けしやすくなっています。
ですからお好きなように変更してください。
背景を変えても良いですし、シャドウの付き方を変えても良いですし。
フォントや文字色の変更もCSS側で容易にできます。
デフォルトでは「はてなブログカード」の見た目に近づけてあります。

● テンプレート変更をした際にはCSSの移設が必要です。
分けたことによるデメリットがこれですね (´・ω・`)

● 使用報告等一切不要です
特に難しい内容ではありませんし、これといって独自性もない(笑)
ですから好きに使ってください。

● 使用はFC2ブログ限定ではなく広範で利用できます
ただし相手方が OGP設定を済ませている ことが大前提です。
これはどのブログカードも同じです。

● 表示サイズ変更
最大でも記事幅いっぱいで収まるようにしてあります。
ですがそのまま利用されますと、常に横幅が記事幅と同等、つまり width: 100% になります。
大きさの制限をするにはCSSの .blogcardwidth: 数値px; を追加しても良いですし、記事に貼り付けたhtmlの書き出しを
<div class="blogcard" style="width: 数値px;">
こうしても良いですね。
まぁ好きにやってください(笑)

メリットとデメリットについて

ブログカードの有名どころ「はてなブログカード」「Embedly」と大きく違う点は
APIを利用していない
です。

メリット

  • 記事内でスクリプトを利用しないため描画が速い
  • html内容が出て来るので概要文字数の調整が容易
  • デザインのカスタマイズが容易

デメリット

  • htmlが出て来るので編集画面が煩雑になる
  • 毎回アクセスするわけではないので出典元の修正や変更に対応できない

APIを使うとページを開く度に情報を取得しますので、元記事に変更などがあった場合それが反映されます。
その代わり描画が非常に遅いですね。
ですから一長一短というところでしょうか。

はてなっぽいのが良いな〜、カスタマイズできるものが良いな〜、という方はお使いください。

このブログカードの使いどころ

なんで作ったか、そもそも何なの、ってところを説明すると使いどころがおわかり頂けると思いますので追記。

  • デザイン
  • ブログをSSL化したので 混在コンテンツを避けたい
  • 相手ブログのスキームになるべく左右されたくない

これが大きな理由です。

Embedly ブログカードは上記2点についてかなり優秀です。
Embedlyが原因でページが混在コンテンツになった… というケースはまず無いと思います。
その仕組は

画像 --- Embedlyのサーバーに複製を生成、httpsスキームで吐き出す

引用元の画像が仮に http://xxxx.jpg
だとします。
Embedlyはこの画像を複製し、CDNサーバーで
https://i-cdn.embed.ly/1/display/crop?xxxxx
こういった内容のURLに変更して提供してくれます。
ですから元画像がhttpであっても混在コンテンツとはなりません。
がしかし、必ずしもOGP設定の画像を選んでくれるわけではない。
ですから、対Embelyで言えば

  • 画像がOGP以外のものに変更されてしまうことがある
  • デザインをカスタマイズしにくい

この2点です。

はてな ブログカードの方は問題点がたくさんあります。

scriptファイルがhttpなのでSSLサイトでは使えない

そもそも使えません(笑)
はてなもSSL化を広報していますので、いずれファイルもhttpsになるはずです。
仮にscriptファイルがhttpsになったとしても、まだ残る問題として

iframe要素 での掲載になるので、相手方のサイトがSSLならば使えない

iframe要素というのは src属性がhttpならば混在コンテンツです。
ですから相手方のサイト自体がhttpsになっている場合のみ利用可能。
ページに含まれる画像のスキームだけはhttpsになっていたとしても、サイト全体がhttpsでなければ使えません。
はてなのブログカードを使う場合には

  • はてなAPIスクリプトファイルのスキーム
  • 相手方のサイトのスキーム
  • 相手方ページ内のOGP画像のスキーム

これが全てhttpsでないと使えません。
ですから、対はてなで言えば

  • iframe要素は使いたくない

これですね。

そういう事情で作成しました。
ということはこれら問題についての融通が効くように作った、ということです。

  • カスタマイズし易い
  • スクリプトを使わない
  • iframeを使わない
  • 注視するのは相手方の 画像スキームのみ

画像のスキームだけは注意が必要です。
相手方のサイトがhttpだとしても、iframeを利用していませんのでカードの使用が可能です。
画像についてですが、相手方サイトがhttpだとしても、一般的なブログサービスというのは画像を別サーバーで管理している場合がほとんどです。
そして画像については http/ https どちらでも取得可能、というのが一般的。

本ブログカードを貼り付けたことが原因で混在コンテンツとなってしまったならば、原因はカード内の画像URLで間違いありません。
ですからhtml内容を貼り付けましたら

<img>

というhtmlタグの

src属性

をチェックしてください。つまり画像のアドレスが記載されている部位です。
http になっているはずですので、s を追加してみる。
追加しても画像が表示されているのであれば(リアルタイムプレビューで確認できます)、https でも表示可能ということですので、s付きのまま使えばOK
この点の融通が大きいと思います。
iframeだとそうは行かない。

カード利用による混在コンテンツについてはこれが回答でございます。

関連記事

Comments 32

There are no comments yet.
ぼっちん  
To Akiraちゃん

スパッとブックマークレット戴きました~ 星5つですね~ (^-^)//""パチパチパチ~
『Akira風ブログカード』って、命名しましたよ~(爆)
もうもうもう、実に素晴らしい出来栄えで、ウハウハ喜んじゃってる私です(笑)
ずっと前の私の勝手な押しつけ希望(笑)を叶えてくださってほんとにありがとうございます (^_^)ニコニコ 

もうもう感謝感謝でございます m(_ _)m
末永く使わせて戴きます~♪
カスタマイズはこれからゆっくりと(笑)

2017/09/24 (Sun) 14:25 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/09/24 (Sun) 21:01 | EDIT | REPLY |   
べえ  
No title

こんにちは。

ブログカードって使った事が無かったのですが、試しに使ってみました。
私のように複数のブログを作っていると、恐ろしく便利かもしれません。

ナチュログにも導入してみたら一応動くようです。FC2以外で使っても
良いのでしょうか? 一応お試しで、古い誰も読まないと思う記事に
貼り付けてみました。

http://campovens.naturum.ne.jp/e2619320.html

2017/09/24 (Sun) 21:30 | EDIT | REPLY |   
べえ  

すいません。

「FC2ブログ限定ではなく広範で利用できます」と
書かれていました ^^;;

2017/09/24 (Sun) 21:38 | EDIT | REPLY |   
Akira  
To ぼっちんさん

ぼっちんさん、おはおーでございます (●'0'●)/

ちょっと先に取り急ぎの返信です。
諸々鑑みて構成をマズったかなと思ふ((((笑)
現在だと画像の出力が概要よりも「後」なんですが、これを「先」に変更しようと思います。
htmlの順序を変更することでさらにカスタマイズしやすくなると思うので。
というかお恥ずかしい話し、その予定で組んだはずが逆になってたー!
あわわ ( ̄∀ ̄;)

とにかく修正しますね。
ご指摘の件も融通が効くようになるかと思います。
みなさんへはブックマークレットを入れ替えて頂くのと、パターン毎のCSSを準備してコピペで設置できるようにします。
お手数おかけします ^^;

2017/09/25 (Mon) 09:01 | EDIT | REPLY |   
ぼっちん  
To Akiraちゃん

(^_^; アハハ…

も~ Akiraちゃんったら、正直過ぎるんだから(笑)
単に「仕様変更」ってことだけでボカしても良かったのに、鍵コメのことまで、、、(笑)

ハーイ(^O^")/ ほんとに「Akira風ブログカード」には皆さん期待値とっても大きいですから、楽しみに待たせて戴きます~ m(_ _)m
ボチボチでいいんですからね~♪

2017/09/25 (Mon) 09:06 | EDIT | REPLY |   
Akira  
To べえさん

お好きに使ってくださいね。
で、せっかくご利用頂いたのにもう修正しちゃった ( ̄∀ ̄;)
お手数ですが、再登録をお願いします。
スマホの見た目が整うのと、SEO版と分けました。
よろしくお願いしますー。

https://vanillaice000.blog.fc2.com/blog-entry-583.html

2017/09/25 (Mon) 11:44 | EDIT | REPLY |   
Akira  
To ぼっちんさん

修正しましたー!
毎度お手数おかけします。

https://vanillaice000.blog.fc2.com/blog-entry-583.html

回り込みさせることにした (´・ω・`)
色々やり方はあるでしょうが、これが一番てっとり早いかなぁ、と。
CSSが増えまくるってのもやっぱ良くないのでなるべく簡単に(笑)

2017/09/25 (Mon) 11:45 | EDIT | REPLY |   
ぼっちん  
To Akiraちゃん

なんと、素早いお仕事で、ほんとに感服しちゃいました (^_^)ニコニコ 

早速CSSの載せ替えとブックマークレット2個も張り替えました。
画像の回り込み、これ是非取り入れて欲しかったから、もう思い通りでウハウハです d(-_^)good!!
早速、最新記事にも「Akira風ブログカード」貼らせて戴きましたからね~。
もっともEmbedlyから貼り替えたんですけど(笑)

「引用版」まで追加してくださって、言うことありません。

いろいろと個人的なワガママまで聞いて戴いて、どうもありがとうございました m(_ _)m
感謝感謝でございます (^_-)-☆パチッ

2017/09/25 (Mon) 12:38 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/09/25 (Mon) 13:38 | EDIT | REPLY |   
Akira  
To ブログカード別タブ表示の件 内緒さん

こちらこそお世話になっております

全然見当違いなどではないですよ。
えっと。付け忘れました ←
すみませんホント ( ̄∀ ̄;)
今修正しましたので差し替えをお願いしますー!

2017/09/25 (Mon) 14:14 | EDIT | REPLY |   
Akira  
To ぼっちんさん

ぼっちんさん。
私フッターのリンクだけ target="_blank" 付け忘れました(笑)
内緒さんに教えてもらって気づいた ( ̄∀ ̄;)
ホント度々申し訳ないです。
もしあれでしたら差し替えをば… ごめんなさいホントに! orz

2017/09/25 (Mon) 14:15 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/09/25 (Mon) 14:33 | EDIT | REPLY |   
ぼっちん  
To Akiraちゃん

えっえっ? フッター? え゛~??
なんと(笑)ブログカードじゃなくて「Pinboard」本体のフッターのことね (≧ω≦。)プププ
まったく気がついてなかったです(笑)
困らないですけど、ありがとです~ 内緒さん&Akiraちゃん m(_ _)m

--------------
慌てて追記(笑)

ハーイ(^O^")/ 意味、いまやっと分かりました~(爆)
やっぱりブログカードのフッターでしたね(笑)


 

2017/09/25 (Mon) 15:01 | EDIT | REPLY |   
Akira  
To ブログカードの件 内緒さん

嬉しいお言葉をありがとうございます。
励みになりますー ╭( ・ㅂ・)و

はい。こちらこそよろしくお願いします (●'0'●)/

2017/09/25 (Mon) 20:47 | EDIT | REPLY |   
Akira  
To ぼっちんさん

何度も申し訳ないです。
思えば昔からそうでしたね。私という人間は。
ハンカチ忘れたから家に取りに戻ったのに、学校に着いてからティッシュも忘れてたことに気づく、みたいな。
うちの子どもらもそんな感じです((((笑)

2017/09/25 (Mon) 20:49 | EDIT | REPLY |   
べえ  

こんにちは。

先ほど差し替えました。ありがとうございます。

2017/09/25 (Mon) 20:55 | EDIT | REPLY |   
べえ  
鍵が消えてしまいます

こんにちは。

非SSLのナチュログのプログを張ると、鍵マークが消えて
しまいます ^^;; これは仕方のない仕様でしょうか?

2017/09/26 (Tue) 22:05 | EDIT | REPLY |   
Akira  
To べえさん

べえさん、こんばんは (o'ω')ノ

ナチュログさんの画像サーバーはhttpsでも取得できますので、作成されたhtmlを記事に貼り付けた際に
img の src の部分をよく見て、http: から https: に変更してください。
APIを利用した通常のブログカードではこういったことは不可です(htmlが出てこない or iframe呼び出しで変更不可)が、こちらの自作カードではhtmlが出てきますので相手方の画像がhttpsでも取得できさえすればsを足すことで表示可能です。
ブログカードのhtmlを引っ張ってきたら、必ずimgのsrc属性(つまり画像のアドレス)のスキームを確認し、httpであるならばhttpsに変更しても表示ができるかどうかを確認。
表示できない場合には原則として利用不可です。もちろん「混在コンテンツを避けたいのならば」です。
ブログカードを取りに行く際に対象ページがブラウザ警告で i マークが出ている(非SSL) or 混在コンテンツを示している、という場合には要確認です。
混在コンテンツなしのhttpsページであれば画像も自動でhttpsになっているはずです。
よろしくお願いします。

------

もう少し仕様の詳細を追記しますね。

2017/09/26 (Tue) 22:22 | EDIT | REPLY |   
べえ  

こんにちは。

ありがとうございます。上手くいきました ^^

2017/09/26 (Tue) 23:30 | EDIT | REPLY |   
Akira  
To べえさん

参照ブログが非SSLの場合は少しだけ面倒ですけどもね。
ここさえ押さえれば問題なく使えるかと思います。
よろしくお願いします

2017/09/27 (Wed) 10:00 | EDIT | REPLY |   
ぼっちん  
To Akiraちゃん

こんにちは ^^

つい、今「Akira風ブログカードをCSSでカラフルにカスタマイズしてみました」を記事更新しました~(笑)
勝手にお名前を使わせて戴きましたことをお詫び致します m(_ _)m
記事中に不備がありましたらご指摘下さい (^^ゞポリポリ

2017/09/27 (Wed) 11:17 | EDIT | REPLY |   
Akira  
To ぼっちんさん

ぼっちんさん、お疲れ様です (●'0'●)/
拝見しましたー。
良い感じにカスタマイズできてますね
hoverをする要素に

-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;


を追加するとフワっと切り替わりますよ。

例)
.blogcard {
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

.blogcard:hover {
内容
}

いつもありがとうございます

2017/09/27 (Wed) 13:39 | EDIT | REPLY |   
ぼっちん  
To Akiraちゃん

素早いお返事、ありがとうございます ^^
やっぱり1人でも多くの皆さんに「Akira風ブログカード」を楽しく利用して戴きたいですからね~(笑)

そして、ご教示くださったフワっと感を書き加えてみましたけど、shadow部分は効果がハッキリと出るんですけど、背景色の切り替えには効果がみられない感じなんですよね。
もっといろいろと研究してみます ^^

いろいろと快く容認してくださってありがとうございます m(_ _)m

2017/09/27 (Wed) 14:00 | EDIT | REPLY |   
Akira  
To ぼっちんさん

ろくすっぽ見もせずに書いちゃってごめんなさい。
backgroundをショートハンドで記載されてたんですね。
transitionはbackgroundショートハンドには効きません。
gradientの場合には少しコツが要るんですね。
ぼっちんさんの必要に応じて時間があれば書きますね。

2017/09/27 (Wed) 15:23 | EDIT | REPLY |   
ぼっちん  
To Akiraちゃん

あららら(爆)

> gradientの場合には少しコツが要るんですね。

そうだったんですかぁ (^_^; アハハ…
でしたら、Akiraちゃんのヒントを元にもうちょっと研究してみますけど、お暇な時で結構ですからコツを教えて下さい (゜゜☆\(--メ)ポカッ
gradientの方が背景色表現が慣れてるもんですから (^^ゞポリポリ

それにしても圧縮してあるCSSから読み取ってくださって、どうもありがとうございます m(_ _)m

2017/09/27 (Wed) 16:04 | EDIT | REPLY |   
ぼっちん  
To Akiraちゃん

なかなか難しいんですね~ (^_^; アハハ…
でも、なんとな~く解って来てる途中段階です。
(と言うよりも、いろんな表現方法があるんですねぇ、色をアニメーションさせたりとか)

とりあえず記事サンプルの「③ マウスホバーで背景色変化」に、ちょっとだけそれらしい動きを加えてみました。
たぶん、Akiraちゃんの表現とは別物でしょうけど(笑)

もっとフワっと感を出せるように自力で研究してみますが、やっぱりAkiraちゃんのフワっと感のアイデアもお教え下さいまし(笑)

2017/09/27 (Wed) 21:53 | EDIT | REPLY |   
Akira  
To ぼっちんさん

ぼっちんさん、おつかれ様です (●'0'●)/

ショートハンド云々抜きにして、ちょっと力技でやったほうが良いかもしれません。
論理
① 本体に背景色(グラデーションを設定しておく)
② 本体の上にレイヤーを重ねておく(グラデーション設定 + 不透明度設定)

②のレイヤーを初期状態では「完全不透明」にしておきます。
transitionを設定するのもこちらのレイヤーの方。
その上で、マウスホバーがかかった際にレイヤーを徐々に「完全透明」にすることでレイヤーのグラデーションが見えなくなり、下にある本体のグラデーションが見えるようになる。
それがゆっくり切り替わっているように見える、という策(笑)

-------

本体(デフォルトでは .blogcard)に元の内容はそのままで以下の内容を追加

background: グラデーション内容;
position: relative;


-----

レイヤーの作成。以下の内容を追加。。

.blogcard:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: グラデーション内容;
opacity: 1;
position: absolute;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}


-----

以下の内容を追加

.blogcard:hover:before {
opacity: 0;
}


------

.blogcard-content(「フロート親要素」のコメントがついたもの)に以下の内容を追加

position: relative;
z-index: 3;


-----

.blogcard-footer(「フッター(元記事サイト名とリンク)」のコメントあり)に以下の内容を追加

position: relative;
z-index: 3;


-----

で、レイヤーが透過グラデーションの場合は下が透けて見えることになるので、そこだけちょっと考えてもらった方が良いかもです。
rgba を使わずに rbgでなるべく淡い色を設定するとか。
一度お試しください (o'ω')ノ

2017/09/28 (Thu) 16:46 | EDIT | REPLY |   
ぼっちん  
To Akiraちゃん

アドバイス、どうもありがとうございます ^^

まさに「力技」で、逆立ちよりも「地球を持ち上げる」くらいの愉快な発想ですねぇ(笑)
CSS読んで笑いがこみ上げて来ましたよ (≧ω≦。)プププ
私の頭ではこういう発想は出てきません (^_^; アハハ…
AkiraちゃんのIQ知りたくなっちゃう(爆)

このアイデアお借りして、きっと完成させますからね~ o(^-^)oワクワク
わざわざお時間割いて戴いて、ほんとにありがとうございます、御礼申し上げます m(_ _)m

2017/09/28 (Thu) 17:28 | EDIT | REPLY |   
Akira  
To ぼっちんさん

対IEなんかはもうかなり強引なことしてますね (´・ω・`) ←
もー早く消滅してくれんかな。
IEこき下ろし記事も下書きにあるんですが、口が悪いので公開して良いものかどうか(笑)
IE11のサポートってメインストリームは外れても2020年まであるんですね。
正気の沙汰とは思えない!!!((((笑)

2017/09/28 (Thu) 23:41 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/10/06 (Fri) 10:59 | EDIT | REPLY |   
Akira  
To Pinboardご利用中の内緒さん

ご丁寧にありがとうございます。
励みになります。
こちらこそ感謝です

2017/10/06 (Fri) 15:17 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い