ブログカードのブックマークレットを作成しました

投稿 2017年09月24日
70
カスタマイズ
BookmarkletCustomizeTips

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だとそうは行かない。

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

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

70 COMMENTS

There are no comments yet.

ぼっちん  

To Akiraちゃん

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

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

2017/09/24 (Sun) 14:25

-  

管理人のみ閲覧できます

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

2017/09/24 (Sun) 21:01

べえ  

No title

こんにちは。

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

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

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

2017/09/24 (Sun) 21:30

べえ  

すいません。

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

2017/09/24 (Sun) 21:38

Akira  

To ぼっちんさん

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

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

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

2017/09/25 (Mon) 09:01

ぼっちん  

To Akiraちゃん

(^_^; アハハ…

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

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

2017/09/25 (Mon) 09:06

Akira  

To べえさん

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

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

2017/09/25 (Mon) 11:44

Akira  

To ぼっちんさん

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

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

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

2017/09/25 (Mon) 11:45

ぼっちん  

To Akiraちゃん

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

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

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

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

2017/09/25 (Mon) 12:38

-  

管理人のみ閲覧できます

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

2017/09/25 (Mon) 13:38

Akira  

To ブログカード別タブ表示の件 内緒さん

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

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

2017/09/25 (Mon) 14:14

Akira  

To ぼっちんさん

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

2017/09/25 (Mon) 14:15

-  

管理人のみ閲覧できます

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

2017/09/25 (Mon) 14:33

ぼっちん  

To Akiraちゃん

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

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

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


 

2017/09/25 (Mon) 15:01

Akira  

To ブログカードの件 内緒さん

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

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

2017/09/25 (Mon) 20:47

Akira  

To ぼっちんさん

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

2017/09/25 (Mon) 20:49

べえ  

こんにちは。

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

2017/09/25 (Mon) 20:55

べえ  

鍵が消えてしまいます

こんにちは。

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

2017/09/26 (Tue) 22:05

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

べえ  

こんにちは。

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

2017/09/26 (Tue) 23:30

Akira  

To べえさん

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

2017/09/27 (Wed) 10:00

ぼっちん  

To Akiraちゃん

こんにちは ^^

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

2017/09/27 (Wed) 11:17

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

ぼっちん  

To Akiraちゃん

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

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

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

2017/09/27 (Wed) 14:00

Akira  

To ぼっちんさん

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

2017/09/27 (Wed) 15:23

ぼっちん  

To Akiraちゃん

あららら(爆)

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

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

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

2017/09/27 (Wed) 16:04

ぼっちん  

To Akiraちゃん

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

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

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

2017/09/27 (Wed) 21:53

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

ぼっちん  

To Akiraちゃん

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

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

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

2017/09/28 (Thu) 17:28

Akira  

To ぼっちんさん

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

2017/09/28 (Thu) 23:41

-  

管理人のみ閲覧できます

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

2017/10/06 (Fri) 10:59

Akira  

To Pinboardご利用中の内緒さん

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

2017/10/06 (Fri) 15:17

ジュレ  

はじめまして

おはようございます。

はじめまして♪
きららとジュレのブログと申します。

わたしのブログでは
Embedlyは文字化けしてしまい使い物にならず、
こちらのブログをご紹介頂きました。

わたしのブログはFC2ブログではありませんが、
ブログカードのWebテクニックをお借りいたしました。

事後報告をお許しくださいませ。
今後ともよろしくお願い致します。

2017/10/22 (Sun) 05:38

Akira  

To ジュレさん

わざわざお越し頂いて恐縮ですー。
お役に立てたのであれば嬉しい限りです。
こちらこそありがとうございます

2017/10/22 (Sun) 10:00

-  

管理人のみ閲覧できます

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

2017/10/27 (Fri) 14:45

Akira  

To ブログカードの件 内緒さん

CSSソース内に
ブログカード
という文字を入れてますよね。
CSSに直接平文を打ち込むというのはダメですよ。
きちんとコメント化をしてくださいね。

/* ブログカード */

2017/10/27 (Fri) 16:09

-  

管理人のみ閲覧できます

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

2017/10/27 (Fri) 19:52

Akira  

To 固定コンテンツの件 内緒さん

> カテゴリーのトップごとに固定表示が置けた気がする〜

そうですね。トリッキーにはなりますが可能です。
特殊カスタマイズにあたりますけれども可能か不可能かと問われれば可能です。

2017/10/28 (Sat) 09:24

-  

管理人のみ閲覧できます

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

2017/10/28 (Sat) 11:41

Akira  

To 目次と広告の件 内緒さん

> 目次スクリプトの「もくじに戻る」の前後付近に広告タグを貼れば見出し毎に広告付けれますか〜

目次スクリプトの中に広告を表示させるためのhtmlを埋め込みたいということですか?
それは無理です。
広告のサポートまではできません。
そもそも目次のスクリプトは見出しを目次化することだけを目的としていますので、広告などは全く関連がありません。

-------
> 先程a8行ってみたら、AMP対応の広告タグが取得できるように〜

FC2ブログでAMPの提供はありません。

-------
> すごいレスポンシブサイト見つけて驚愕しました〜

頂いたURLの遷移先はレスポンシブサイトではありませんでした。
よくわかりませんのでこちらはスルーさせてください。

2017/10/28 (Sat) 14:31

-  

管理人のみ閲覧できます

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

2017/11/03 (Fri) 12:42

-  

管理人のみ閲覧できます

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

2017/11/03 (Fri) 12:49

-  

管理人のみ閲覧できます

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

2017/11/03 (Fri) 12:55

Akira  

To ブログカードの件 内緒さん

> 選択した文字だけをブログカードに引用できるブックマークレットボタンをリリースする予定〜

予定はありません。
ブログカードの基本はOGPの取得ですので、特定任意の文字列を表示するならば単純にテキストリンクにするか、各ブラウザにそういった拡張機能(プラグイン・アドオン)がありますので探してみてはいかがでしょうか。

2017/11/04 (Sat) 09:59

-  

管理人のみ閲覧できます

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

2017/11/05 (Sun) 16:03

Akira  

To ブログカードタイトルの件 内緒さん

> 共有ボタンのテキストなどがタイトルに含まれました〜

これはそのサイトのtitleタグの使い方がめちゃくちゃだからです。
なのでサイト管理人に修正するよう直接お申し出ください。
head内でしか許可されないtitle要素がページのそこかしこで使われています。
よろしくお願いします。

このブログカードはhtmlが表示されますので、自動取得にこだわらず修正を行なってはいかがでしょうか。
タイトルに不要なものが含まれているのであればdeleteボタンで消すだけです。

2017/11/05 (Sun) 17:58

-  

管理人のみ閲覧できます

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

2017/11/05 (Sun) 21:24

-  

管理人のみ閲覧できます

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

2017/11/05 (Sun) 22:46

Akira  

To SSLの件 内緒さん ②

どうぞお気遣いなく。
お気持ちだけ頂きますね。
お疲れ様です

2017/11/06 (Mon) 02:41

YURAMA  

ブログカード使わせていただきました。

Embedlyを使ってみたのですが、OGPをデバッグ更新しても変わらず非常に困っていました。
こちらの記事にたどり着くことができカスタマイズもできるとのこと。
今後も使わせていただきます。
有難う御座いました。

2017/12/18 (Mon) 10:46

Akira  

To YURAMAさん

お役に立てたのであれば幸いです。
ご丁寧にありがとうございます

2017/12/18 (Mon) 11:45

ぬこぬこ  

こんにちわ。
またアホなコメントしてるかもしれませんが
自サイト用ブックマークレットで吐き出したタグにはblockquoteが一つ入っていますが、blockquoteを閉じるタグが吐かれてないのですがこれで良いのでしょうか?

他サイト用に関しても吐き出されたタグにはblockquoteが2つ入っていて、一つ目が閉じられていない状態で吐き出されているのですが、これで良いのでしょうか。

疲れてて頭がほとんど回っていないので余計に混乱してますが何かおかしい気がしたので書きました。
これで良いのでしょうか?

2018/01/17 (Wed) 18:53

Akira  

To ぬこぬこさん

こんばんは。

> 自サイト用ブックマークレットで吐き出したタグにはblockquoteが一つ入っていますが、blockquoteを閉じるタグが吐かれてない〜

自サイト用マークレットにblockquoteは入れていません (´・ω・`)

> 他サイト用に関しても吐き出されたタグにはblockquoteが2つ入っていて、一つ目が閉じられていない状態〜これで良いのでしょうか?〜

良くないですね (´・ω・`)
引用ブックマークレットの内容は以下の通りです。私のページから取得しました。

<div class="blogcard"><div class="blogcard-content"><div class="blogcard-image"><div class="blogcard-image-wrapper"><a href="アドレス" target="_blank"><img src="画像アドレス" alt=""></a></div></div><div class="blogcard-text"><p class="blogcard-title"><a href="アドレス" target="_blank">Fraise大規模メンテナンスのお知らせ - テンプレ不具合・修正など</a></p><blockquote cite="アドレス"><p class="blogcard-description">Fraiseテンプレートの大規模なメンテンナスを行いました。 公式配布ソースは修正済みです。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...</p></blockquote></div></div><div class="blogcard-footer"><a href="アドレス" target="_blank"><img src="ファビコンアドレス" alt="">vanillaice000.blog.fc2.com</a></div></div>

blockquoteは開始タグ1つ・終了タグ1つです。

-------
すみませんが、テンプレートの質問でないにしろ何も無い状態で「何故だ」と言われても何もお答えできません。
吐き出したコードを見せて頂くなり、掲載したものがあるのならば該当URLを頂くなり。
URL無しでのご質問はお控えください。

2018/01/17 (Wed) 20:55

ぬこぬこ  

To Akiraさん

どうもすみません。

この記事を公開された時に公開されていたブックマークレットを削除して、改めてブックマークレットを入れて吐かせてみた所、仰る通りの吐き出しになりました。

お手数おかけしました。

2018/01/17 (Wed) 21:18

-  

管理人のみ閲覧できます

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

2018/01/23 (Tue) 19:41

Akira  

To blockquote装飾の件 内緒さん

ブログカードの方のCSS
.blogcard blockquote

background-color: transparent;
を追加してください。

ところでこれってダミーサイトでしょうか。
記事が1件しかなく、稼働している様子もありません。
私のテンプレート利用者様以外の方へのサポートに時間は裂きませんのでご理解をお願いします。

2018/01/23 (Tue) 21:07

-  

管理人のみ閲覧できます

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

2018/01/23 (Tue) 21:28

-  

管理人のみ閲覧できます

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

2018/01/23 (Tue) 21:35

-  

管理人のみ閲覧できます

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

2018/01/23 (Tue) 21:40

Akira  

To blockquote装飾の件 内緒さん②

box-shadow: none;
を更に追加してください。

> ダミーサイトではないか〜

何故こんなことを言うかといいますと、以前「いついつまでに収益を出さないと云々」といった内容のコメントを頂いたことがありますよね。
その当時は記事もありましたし、更新をしている様子もありました。
ですが現在は既存記事は全て削除されていますし、いつ拝見しても記事はテスト用で投稿したであろう1件のみ。
収益を出したい人が既存記事を削除してしまうとは思えません (´・ω・`)

意地悪で言うのではなく、私も限られた時間で対応をしていますので、当然ですがテンプレートユーザーさんが最優先です。
仮に他で更新を行なっており、htmlやCSSやJSのことだけを尋ねるために準備しているブログなのであれば後回しあるいはサポート不可とさせてくださいね、ということです。

2018/01/23 (Tue) 21:49

-  

管理人のみ閲覧できます

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

2018/01/23 (Tue) 22:08

-  

管理人のみ閲覧できます

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

2018/01/23 (Tue) 22:10

Akira  

To blockquote装飾の件 内緒さん③

細かい実生活の事情に口は挟みません。

ブログで収益を上げるというのはそんなに簡単ではないですよ。
「ブログ飯食ってる」という方は実際はものすごく努力されてます。
特に「マメに更新をすること」「既存記事を蔑ろにしないこと」です。
記事を出したり引っ込めたりを繰り返すことはそのサイトの信用に関わります。不審な行動は取らないに込したことありません。
既に私は内緒さんに不信感を持ってしまったわけですし。
Done is better than perfect「完璧を目指すよりまず終わらせろ」
マーク・ザッカーバーグ氏の言葉です。
日本には「案ずるより産むが易し」という言葉も。

いずれしろ、サイト再構築中及び準備段階ということですね。
大変失礼を致しました。
blockquote装飾の件は解決ということで安心しました。

2018/01/23 (Tue) 22:34

-  

管理人のみ閲覧できます

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

2018/01/23 (Tue) 22:55

ひいろん  

いただきました

はじめまして。
こちらのサイトさんのおかげで
Wordpressやはてなブログみたいにメジャーなブログサービスで構築していない自ブログでも簡単にブログカードが導入出来ました♪
とても便利なブックマークレットをご提供いただきありがとうございました(^^
ブログ記事にも書かせていただきましたのでご報告まで。。
http://hiiron.sunnyday.jp/sb/log/eid2530.html

2018/03/21 (Wed) 14:53
vanillaice (Akira)

Akira  

To ひいろんさん

こんにちは。ご丁寧にありがとうございます。
記事の方も拝見しました。なんか恐縮です ^^;

少しでもお役に立てたのであれば幸いでございます。
こちらこそありがとうございます

2018/03/21 (Wed) 15:41

ロビンソン  

お世話になります。
記事タイトルの上にビックリマークとはてなマークが交互に点滅しています。
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/blogerror.jpg
かなり前に書いた記事をたまたま見て気が付きました。
記事の中に他ブログからの引用でこのカードを使っていますが、記述ミスが原因でしょうか?
お忙しいところ恐れ入りますが、お時間のある時にでも見ていただけると助かります。

スクショはChromですが、Firefox及びiPhoneからの閲覧でも発生します(Firefoxはビックリマークで点滅なし)
IEとEdgeでは正常に表示されます。

よろしくお願いします。

2018/05/11 (Fri) 13:16
vanillaice (Akira)

Akira  

To ロビンソンさん

こんにちは (o'ω')ノ

デフォルトのblockquoteの blockquote > .svg-inline--fa には z-index: -1 が指定されていたはずですが、ロビンソンさんのCSSからは削除されています。
z-index: -1;
を追加するか、
blockquote::before

blockquote:not(.blogcard blockquote)::before
に変更してください。
後者の方がおすすめですが、たぶん今後テンプレートを変更した時に書き忘れると思います(笑)


(ごめんなさい。上記はJSと間違えました。CSSのnotはJSと違って結合子指定はできませんので打ち消しにしておきます。)

デフォルトのCSSの内容や順序には必ず意味がありますので、カスタマイズされる際に「役割が不明」と思われるものについては削除をせず残すようにしてくださいね。
よろしくお願いします。

あと、

ブログカード関連が記されているCSSファイルが文字化けしています。
ファイルの書き出しに
@charset "utf-8";
を追加することで解消できますよ。


ヘッダー画像のランダム表示用JSがエラーかつ重複(解釈の無駄)です。
header-bannerに対する指定は
<!--index_area-->
ここにheader-banner用スクリプト
<!--/index_area-->

header-banner2に対する指定は
<!--not_index_area-->
ここにheader-banner2用スクリプト
<!--/not_index_area-->

とエリア変数で分けることで解消できます。

2018/05/11 (Fri) 15:44

ロビンソン  

修正できました

ありがとうございます。
スタイルシート内のblockquoteの重要性を理解していなくて、自己流で書き直したのが原因だったんですね・・・
Akira様が勧めてくれた方法で試したらPC,iPhoneとも正常に戻りました。

他の凡ミスもご指導いただき、重ねてお礼申し上げます。
今後ともよろしくお願いします。

2018/05/11 (Fri) 18:10
vanillaice (Akira)

Akira  

To ロビンソンさん(完了のご報告)

blockquoteはクラス名を付けにくい要素なんですよね (´・ω・`)
ツールバーに「引用」があるのでクリックして使う方は多いんですが、クラス名を付けるというところまではやりません。
要素に直接スタイルを充てるのは良くないんですがblockquoteは例外的、致し方ないというか。
なのでblockquoteに絡む他の内容がどうしても面倒になります。
今後のために書いておくと、今回何を処理したかというと
・既に充てられているスタイルの除去
です。
セレクタを用いたスタイリングの場合には発生しない処理ですが、要素に直接充てるということは「いかなるblockquoteも全て」という意味なのでブログカード内blockquoteについて除外設定しないといけなくなるということですね。
テンプレート変更時にも同じことが起こりますので頭の片隅にメモしておいてください。
(製作者がblockquoteにスタイル定義をしていればの話しです)

エラーも解消できたようで良かったです。
いつもありがとうございます

2018/05/12 (Sat) 12:48