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

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

カスタマイズ
2017/09/24 105
vanillaice (Akira)
vanillaice (Akira)
Bookmarklet Tips OGP 中級者向け ブログカード

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

これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`)
画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。
* 2018年現在では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ルートまで作ってしまう(iframe)と描画がとても遅くなります。そして一番は カスタマイズ性 ですね。CSSを分けたことでみなさんのカスタマイズを受付けしやすくなっています。ですからお好きなように変更してください。背景を変えても良いですし、シャドウの付き方を変えても良いですし。

フォントや文字色の変更もCSS側で容易にできます。デフォルトでは「はてなブログカード」の見た目に近づけてあります。

● テンプレート変更をした際にはCSSの移設が必要です。

分けたことによるデメリットがこれですね (´・ω・`)

● 使用報告等一切不要です

特に難しい内容ではありませんし、これといって独自性もないですから好きに使ってください。

● 使用はFC2ブログ限定ではなく広範で利用できます。

ただし相手方が OGP設定を済ませている ことが大前提で、これはどのブログカードも同じです。なので当ブログカードの利用を予定される方はご自身の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点です。

はてなブログカードの方は問題点がたくさんあります。
* 以降のはてなブログカードに関する情報は古いものです。現在ではSSL対応済みです。

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

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

概要文中の改行が邪魔になる方へ

FC2ブログで言うと「旧投稿画面利用 + 改行の扱い『自動』設定」の方が対象です。利用サービスのエディターの都合によってはFC2ブロガー以外でもお困りの方がいらっしゃるかもしれません。その場合には

.blogcard-description br {
  display: none;
}

をスタイルシートに追加してください。

CSS追加前

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

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

私のブログの特定ページでEmbedlyがどうしてもOGP画像を出してくんない(笑)
そしてEmbedlyは非常にカスタマイズし辛いんですね。
ほとんどできないと言っ...

CSS追加後

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

SSL化後の悩ましい作業のひとつ。 ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。 かといって はてなブログカード はSSLに対応できてないですし。 私のブログの特定ページでEmbedlyがどうしてもOGP画像を出してくんない(笑) そしてEmbedlyは非常にカスタマイズし辛いんですね。 ほとんどできないと言っ...

ブログカード内の概要文で縦幅(高さ)が多くなりすぎるのを防ぐのと、内容はさわりがチョロっと見えているだけで十分なので文章量も多すぎると思えば削るなりの対処も可能です。

FC2ブログ旧投稿画面でブログカードを利用する際にネックになるのは概要文の部位だけで、設定を「HTMLタグのみ」に変更してしまうと記事中の全文章に改行タグの記入が必要になり面倒ですよね。そういうパターンに対応させるための追加CSSです。

また、新投稿画面 の方をご利用の方につきましては、デフォルトのモード(WYSIWYG)では利用できませんので「HTML表示」をクリックしてモードを切り替えてからベタ貼りするだけ。特に何も手を加える必要はありません。今回のCSS追加も不要です。

ただし これはFC2エディターの特徴でもあるんですが、旧投稿画面「改行自動」で書いた記事を新投稿画面で編集するとき には自動改行が有効になってしまうんですね。ここちょっと注意が必要です。

対処法はあるんですが、却って面倒なので「旧投稿画面で書いた記事の編集・修正は旧投稿画面で行う」ようにした方が良いと思います。旧から新へ切り替える方は少なそうな気がしますが。私は最近「新のHTMLモード」で書いています。参考までに(笑)

----- 追記 2020.5.1

CSSカスタマイズ記事をUPしました。

弊ブログ提供ブログカードのデザイン提案

デザインカスタマイズについてのご相談がありましたので、いくつか準備してみました。...

----- 追記 ここまで

スマートフォン・タブレットで登録したい方へ

以下の内容をコピーし、ブックマークとして登録してください。各端末やブラウザによって方法が異なりますが、iPhone Safariをサンプルにした説明が以下の通りです。

仮ブックマーク登録

あくまで仮の登録です。このページ(今見ているこのページ)で行うと円滑に進むと思います。

Safariの場合ブックマーク登録時には名称しか変更できません。名称は「ぶくま」「ブログカード」など自身がすぐにわかる名付けをしてください。

ブックマークレットのJSをコピー

以下のボタンをクリックするとクリップボードに内容が記憶されます。

ブックマークURL編集

先程クリップボードにコピーした内容をURLとして置き換えます。

カードを取得したいページでブックマークをクリック

ページが遷移してしまうようなことはありません。逆に遷移するようなことがあれば手順にミスがあります。

ポップアップの中身はちゃんとコピーしてくださいね。出ただけでクリップボードにコピーされることはありません。

 105

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
vanillaice (Akira)
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
vanillaice (Akira)
Akira
To べえさん

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

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

こんにちは ^^

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

2017/09/27 (Wed) 11:17
vanillaice (Akira)
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
vanillaice (Akira)
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
vanillaice (Akira)
Akira
To Pinboardご利用中の内緒さん

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

2017/10/06 (Fri) 15:17
ジュレ
はじめまして

おはようございます。

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

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

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

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

2017/10/22 (Sun) 05:38
vanillaice (Akira)
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
vanillaice (Akira)
Akira
To SSLの件 内緒さん ②

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

2017/11/06 (Mon) 02:41
YURAMA
ブログカード使わせていただきました。

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

2017/12/18 (Mon) 10:46
vanillaice (Akira)
Akira
To YURAMAさん

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

2017/12/18 (Mon) 11:45
ぬこぬこ

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

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

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

2018/01/17 (Wed) 18:53
vanillaice (Akira)
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
Orca
写真が大きくなってしまいます

ブログカードをお借りして貼り付けてみました。
貴重な時間を使っての素晴らしいブログカードありがとうございます。

HTML、CSSもご説明頂いている通り挿入したつもりなのですが、サムネイル画像が大きく表示されてしまいます。
何が原因なのかCSS等について知識が無いため、せっかくの素晴らしいブログカードが活用できず残念です。

お時間ある時にご教授頂けると嬉しいです。
何卒宜しくお願いします。

2018/11/12 (Mon) 13:17
vanillaice (Akira)
Akira
To Orcaさん

こんばんは。

端的に原因を言えばCSS構文エラーです。
申し上げにくいのですが、xml, CSS共に構文エラーが非常に多くてここで「こことここを」と指摘できません。
(というかそもそも私の制作テンプレートではありませんのでソースコードについては詳細な言及しません)
まずは以下のリンク先記事を参考に構文エラーの修正を先にされた方が良いと思います。またxml構文の正しい書き方なども検索して確認してみてくださいね。

参考記事: ブログ作成に役立つブックマークレット
https://vanillaice000.blog.fc2.com/blog-entry-781.html

あとCSSの方もかなりミスが多く、こちらは以下のリンク先で検証をしてください。
https://jigsaw.w3.org/css-validator/

例えばbodyの
background-image:
これは背景を入れる「かも知れない」を想定しているのかもしれませんが、致し方ない場合には最低でも
background-image: ;
こうしてセミコロンが必要です。これが無いと続くプロパティが無効になります。
また、
WIDTH:180;
HEIGHT:10;
ではなく
width: 180px;
height: 10px;
と単位が必要です。
などなど。

あとは存在しないクラス名のCSSがたくさん入っていたりと、ちょっと原因を特定できるような状況ではないように思います。
ブログカードだけでなく多くのCSSが無効化されてますのでまずはテンプレートhtml及びCSSの修正が先ではないでしょうか。
例えば .sidetitle にはフォントサイズ13pxと文字色のカラーコード#565043が指定されていますが、実際のレンダリングは13pxの#808080です。
あるいは .posted の指定は
border-top: 1px dotted #CEB891;
text-align: right;
margin-bottom: 25px;
となっていますが実際はボーダーも付いていませんしテキストも左寄せですし下marginもありません。

xml, CSS共にちょっと第三者では手に負えない感じです。
そしてxmlではなくhtml5をおすすめします(構文ルールが違いますので一般ブログなどからソースコードを流用するとxmlではエラーになる可能性があります, 例えばclosing slash(閉じスラッシュ)などxmlは必須、html5では不要など)
とはいえ恐らくですが、致命的なCSSエラーは
/* ▼ h3~h5見出し ▼ */
で検索すると

h4{
省略
}

赤字のh4の指定を終了させるためのブレイスがありません。このためここ以降のCSSが全て無効化されています。
よろしくお願いします。

2018/11/12 (Mon) 21:11
Orca
To Akiraさん

 Akiraさま

本当にご丁寧な解説と助言、そして今後の対策までありがとうございます。
10年程度、テンプレートをツギハギしながら素人が改悪しつつ使っているものですから、私のCSSとかに問題があるのかもと、うすうす、というかかなり感じていたのですが、ヤッパリという感じで反対にスッキリ致しました。ありがとうございます。

プロの方からみると一瞬で悪い場所や改善点がわかってしまうのですね。写真のことしか専門にやってこなかったので、CSSとかHTMLとか不勉強すぎて、まずはAkiraさんの書かれていることを理解できるようにするところから勉強していきます。

参考になるアドレスも教えて頂き恐縮です。ここまで丁寧に解説して頂けるとは思っておらず、貴重な時間をヒドイ構文のブログの為に大変に申し訳ありません。
まずは書いて頂いたコメントを熟読しつつ入門書を購入しAkiraさんのブログカードが使えるようにすることを目標に頑張ります。

ヒントを下さった「h4{  } 」の部分は早速試してみます。
本当にありがとうございましたm(_ _)m

2018/11/12 (Mon) 22:40
vanillaice (Akira)
Akira
To Orcaさん

おはようございます。

ブログカード、表示できたようで良かったです。
htmlなどはご存じなくとも日常生活に全く差し障りありませんので、寧ろできなくて当たり前というか(笑)
ただOrcaさんの場合10年経過しているということですし、古い技術を使用していては今後ますますメンテナンスが困難になっていくはずです。
例えばサイトの表示速度は今かなり重要視されていますが、スピード対策の一貫として用いられるJSのasync属性などはhtml5でないと利用できません。
が、web上で情報を拾った場合はそのコードにasyncがついてるかもしれません。
どこかのタイミングでhtml5テンプレート切り替えの英断は必要ではないかと思います。

最後に、Orcaさんのブログはレスポンシブデザインではありませんので、スマートフォン版にもCSSの追加が必要ですよ。
あとスマホ版のナビゲーションが展開できない(というか中身が無いのにボタンがあるので「???」となります)のと、ローディングに異常(読み込みがいつまでも終わらない)がありますのでJS内容のチェックをされると良いと思います。
お疲れ様でした :)

* 入門書を購入されるならhtml5が良いと思います。でないとお金と時間がもったいない ^^;

2018/11/13 (Tue) 08:20
ふふふのふうふ
ブログカードが起動しません

新年早々失礼致します。他のサイトで紹介されていた所を目にして初めて使用させて頂きました。

記事の内容通りにブックマークを登録し、CSSもブログの設定の中に入れたのですが…

いざ使用すると、引用ブログカードのボタンはきちんと画面が表示されてコピーができるのですが、
ブログカードの方は押しても反応がありません。理由はわかりませんが、何故か使用出来ない状況です。
もしおわかりでしたらご教授頂ければ幸いです。
Macを使っています。

2019/01/01 (Tue) 10:53
vanillaice (Akira)
Akira
To ふふふのふうふさん

お返事遅くなりました (*_ _)

登録したブックマークレットをクリックしてもポップアップが出ない、という意味で合ってますでしょうか。
本ページにある通常版ブックマークレットをクリックして動作確認をお願いします。
ふふふのふうふさんのブラウザの状況を確認できるわけではありませんので、一旦該当ブクマを削除し登録し直してみてはいかがでしょうか。それでもダメならばもう少し詳細に状況をお尋ねすることになるかと思います。

*
余談ですが、ブログテンプレート(スキン, テーマ)のスタイルシートにblockquote要素の背景に関する指定がありますので、
.blogcard blockquote {
background: transparent
}
を追加するとブログカード内の背景色を消すことができます(任意です)

2019/01/04 (Fri) 02:09
ふふふのふうふ
To Akiraさん

Akiraさん返信ありがとうございます。
本ページにある方も同様に引用の方は反応するのですがブログカードの方はダメでした。ポップアップが出ません。
ですが、引用の方は問題なく使えますので当面はそちらだけで運用してみます。
何故反応しないかはわからないのですが、MacBookのSafariの問題なのかもしれません。
ご親切にありがとうございます!
私のブログの方でも後日紹介させて頂きますね😃

2019/01/06 (Sun) 18:28
vanillaice (Akira)
Akira
To ふふふのふうふさん

こんばんは (o'ω')ノ

ちょっと修正しましたのでご確認願えませんでしょうか。Mac Safariでも確認済みです。
たぶん登録できると思います。
原因はエンコードとデコードの関係だと思いますのでその部分を修正してみました。
お手数おかけします。よろしくお願いします。

2019/01/06 (Sun) 21:40
ふふふのふうふ
To Akiraさん

あきらさん。確認出来ました!無事に使用出来ましたのでご報告です!ありがとうございました。
感謝しながら使用させて頂きますね!

2019/01/13 (Sun) 14:21
vanillaice (Akira)
Akira
To ふふふのふうふさん

お返事大変遅くなりました (*_ _)

ご確認ありがとうございます。安心しました。
お疲れ様でした :)

2019/01/16 (Wed) 21:39
栽培マン
素晴らしすぎます!

Akiraさん
はじめまして、勝手ながらこのブログカード生成機を使わせていただいています。
大変便利でびっくりしました!

まさかスマホにも対応しているとは驚きです。
しかもコメントまで返していて本当に尊敬します。
ありがとうございます。


2019/02/28 (Thu) 17:23
vanillaice (Akira)
Akira
To 栽培マンさん

こんばんは。

お役に立てましたら幸いです。
ご丁寧にありがとうございます :)

2019/02/28 (Thu) 23:38
mojorum
貼る場所がわかりません

Akiraさま

他のサイトを紹介することがあり、これまではテキストリンクで紹介していました。この度こちらのブログカードを知り、使わせていただきたく、こちらの記事を熟読したのですが…わからないことがひとつあります、、

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

とのことですが
スタイルシートのどの場所に貼ればよろしいでしょうか…?
テンプレートは「alias-Jane」を使用させていただいております。
決まった場所に貼るのかな?と眺めてみたのですが どうしてもわからず、、
(もし見落としていたなら申し訳ないです)

CSSの(Htmlも)知識が無く初歩的な質問で誠に恐縮ですが、ご教示いただきたく…よろしくお願いしますm(_ _)m

2019/05/14 (Tue) 21:48
vanillaice (Akira)
Akira
To mojorumさん

こんばんは。

スタイルシートの末尾(最終)でOKです。念の為スクリーンショットを貼っておきますのでご確認ください。

https://file.blog.fc2.com/vanillaice000/capture3/capbcd----1200.png

2019/05/14 (Tue) 22:27
mojorum
To Akiraさん

こんばんは、
早々のお返事ばかりか わかりやすいスクショまで…ヽ(;▽;)ノ感涙です
ありがとうございます…!(^o^)

2019/05/14 (Tue) 23:20
mojorum
おかげさまでできました

Akiraさま 

こんばんは。いつもお世話になります。
早速ご教示いただいたとおり設定して過去記事のテキストリンクでブログカード化を試みたのですが、カードの形は成しても真っ白なのは、相手方がOGP設定をされていないとの理解でよろしいでしょうか。
ゆえにリライトは諦めて、こちらの記事のご紹介を兼ねて(下記リンク)記事を書きました。事後報告で申し訳ございません、、もし何らかの不都合がございましたら、当方のコメント欄は現在閉じておりますゆえ、お手数おかけしますがリプライでその旨仰ってくださいませ。

https://avecmojo.blog.fc2.com/blog-entry-262.html 

カスタマイズまではまだ遠い状態ですが、ひとまず「できました」のご報告とお礼申し上げ、よろしくお願い申し上げます。

2019/05/15 (Wed) 19:14
vanillaice (Akira)
Akira
To mojorumさん(完了のご報告)

こんばんは。

> カードの形は成しても真っ白なのは〜

真っ白というか、undefined と表示される場合はそうですね。お相手の方がOGP未設定と判断してください。
あと、mojorumさんは旧投稿画面で「改行の扱い『自動』」に指定して記事を書いているのではないかと思います。
その場合は取得先文章の改行などが反映されることになりますので、予想よりも大きなカードになってしまいます。できれば改行を『htmlタグのみ』にするか、面倒であれば見た目を確認し文字数を削減するなどしてバランスを取ってくださいね。
ブログカードの内容がhtml構文エラーになることはありません。見た目だけの問題です。

お疲れ様です :)

2019/05/15 (Wed) 22:58
mojorum
To Akiraさん

Akira さま

そうですそうです、「undefined」の文字と白いカードです… ということで、相手方のOGP未設定だとそのようになるんですね。了解いたしました。

あっ、まさに仰る通り "旧投稿画面で「改行の扱い『自動』」に指定して記事を書いて" おりました…
今後は『htmlタグのみ』にしてみます(^^;

毎度きめ細かいところまでアドバイスをいただき、本当にありがとうございますm(_ _)m
夜分に失礼いたしました(^-^)

2019/05/15 (Wed) 23:48
ゆうや
No title

Akira様

はじめまして。ゆうやと申します。
先週からHTMLとCSS、JavaScriptの勉強を始めたばかりで、うまくブログカードが作れずネットを徘徊していたところ、こちらの記事を見つけてコメント投稿させていただきました。
Akira様の作成したブログカードが非常に良く、是非使わせて頂きたいと思っております。
また、HTMLを自動生成してくれるスクリプトも非常に便利で、こちらも使わせて頂きたいです。

ちょっとご相談なんですが、他ブログのぼっちん様の「tobuyo」を組み込みたい為、JavaScriptのコードを一部変更して使用したいと思っているのですが、よろしいでしょうか。
文中では使用報告は大丈夫と記載はされていますが、著作物に関するものなので、ご報告をと…

2019/05/25 (Sat) 21:23
vanillaice (Akira)
Akira
To ゆうやさん

こんばんは。

はい。どうぞご利用ください。ご丁寧にありがとうございます :)

2019/05/26 (Sun) 20:40
あトん
お礼&ご報告

Akira様

あとんです。

いつも勉強させて頂いてます。

はてなブログでもブログカードを使わせて頂いてます。

ありがとうございます。

2020/03/15 (Sun) 19:07
vanillaice (Akira)
Akira
To あトんさん

あトんさん、こんにちは ('0')/
ご丁寧にありがとうございます。お役に立てれば幸いです :)

2020/03/16 (Mon) 15:39
-
管理人のみ閲覧できます

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

2020/04/28 (Tue) 17:31
vanillaice (Akira)
Akira
To ブログカードの件 内緒さん

こんにちは。

了解しました ('0')/
私の方はCSSカスタマイズ提案の記事を出そうと思います。よろしくお願いします :)

2020/04/28 (Tue) 17:45
bon

Akiraさん、いつも本当にありがとうございます。
お忙しいと思うのでまたお時間のある時で結構です。できるだけお手を煩わせたくなかったのですが…、よろしくお願いします。

引用ブログカードのブックマークレットをクリックして、出てきたソースに
rel="noopener noreferrer"
がないことに気付きました。コメント欄に入力したブログURL記事に貼っているブログカードは、旧ブログ記事なので「引用ブログカード」です。

なぜこんなことを言い出したかと申しますと、ぼっちんさんがブログに書いておられたLighthouseというChrome拡張機能で、自分のブログの判定結果を見てみました。過去にこういう判定をするときはトップページでしていましたが、うっかり個別記事で判定してしまいました。その結果、
Links to cross-origin destinations are unsafe
Add `rel="noopener"` or `rel="noreferrer"` to any external links to improve performance and prevent security vulnerabilities.
といった注意書きがあり、
「はっ、そういえば、blockquoteの雛形の話で「外部リンクにはrel="noopener noreferrer"をつけたほうがよい」ということだったのに、私ときたらblockquote以外のリンクにそれつけてないよね…(-_-;)」
と気付きまして、今しがたひとつひとつ修正作業をしておりました。
その中でブログカードのソースが目にとまったのです。

自分のやり方が悪かったのかと思ってAkiraさんのブログカードブックマークレットを見に来ましたが、得られる結果にrel="noopener noreferrer"はつかないようです。

この場合無くても問題ないということなのか、自分のやり方が悪かったのか、それとも…とわからなくなってしまいました。申し訳ありませんがまた教えて下さい。
よろしくお願い致しますm(__)m

(ここから翌日に追記しました)
落ち着いてみたら、
rel="noopener noreferrer"
がないからといってバリデートエラーではないので、上みたいに大慌てする必要なかったと思いました(ーー;)
Akiraさんの考えをお聞きしたいので、質問はこのままにしておきます。よろしくお願いします。

2020/07/13 (Mon) 23:50
ススム
To bonさん

こんばんは、bonさん。
Akiraさんがすぐに回答できないかも知れませんので、役不足ですが自分の経験を踏まえて回答させていただきます。

>「外部リンクにはrel="noopener noreferrer"をつけたほうがよい」

私も以前、Akiraさんがこちらのブログの記事内で書かれていたのを見て、自分で引用カードのJSを編集しました。
そしてAkiraさんに確認したところ「それでいいですよ」と回答をいただきました。
確か非公開コメントでのやり取りだったので、どの記事でのコメントだったかは分かりません (苦笑)

編集の方法ですが、引用カードのブックマークレットを右クリックして編集をクリックすると編集画面が出ます。
その中のURLと表示されている部分の文字列をCtrl+Aで全て選択して、Ctrl+Cでコピーします。
テキストエディターかメモ帳を起動してCtrl+Vで貼り付けると、target="_blank"という文字列が3箇所あります。
その3箇所の後に、rel="noopener noreferrer"を追記します。(要素間には半角スペースが必要です)

追記後にもう一度全て選択からコビーして、ブックマークレットの編集画面のURLの文字列を全て選択して、コピーした追記ありの文字列を貼り付けて完了です。

以上、参考になれば幸いです。

2020/07/14 (Tue) 22:48
ススム
訂正です

上のコメントの最後の部分

✕ブックマークレットの編集画面のURLの文字列を全て選択して
○ブックマークレットの編集画面のURLの文字列を全て消去して

2020/07/14 (Tue) 22:58
bon
To ススムさん

ススムさん、おはようございます。

ご自身の経験をお聞かせいただき、とても参考になりました。またこれまで「JSってなんか難しそう(*_*)」と思っていましたが、詳しく書いて下さったおかげでさっさっと編集できました。インターネットのブックマークと同じように操作できるなんて、考えもしませんでした。

このコメントに入力した記事のブログカードを、早速編集してみました。
うまくいったと思います。
すでに引用ブログカードを貼り付け投稿済みの記事に関しては、リンクとともにrel属性を書き足していこうと思います。

ご親切に教えて下さり、本当にありがとうございました。ススムさんの解説もとてもわかりやすかったです^ - ^
今後ともよろしくお願いします。

Akiraさんお騒がせしてすみません。また、どうしてもな時は質問させてください。ありがとうございました。

2020/07/15 (Wed) 07:56
vanillaice (Akira)
Akira
To bonさん, To ススムさん

まずススムさん、ご協力ありがとうございます。助かります :)

解決済、ということで大丈夫でしょうか。一応説明をしておきたいと思います。
過去まで遡ってまで修正する必要は個人的には無いと思います。とは言っても「行う」となればそれが一番良いですね。
必要が無いという根拠は、target="_blank" には明らかなセキュリティ上の害があるので、各ベンダーが能動的に阻止をすべきだ、という流れになっています。今後同じような案件でも「ブラウザの自主性」の果たす役割は大きくなっていくと思います。
恐らく近いうちに _blank の指定は自動的に noopener という扱いになるはずです。
ただし当然ですがIE11は除きます。

本来私のIE非対応テンプレートをご利用の方であれば
rel="noopener noreferrer"
ではなく
rel="noopener"
だけで良いんですけどね。noreferrer はIE11が noopener非対応なので代替案で入れますが、この2つは意味と目的が違います。

noopener -- window.open()を阻害する(子windowが親windowを操作するのを防ぐ)
noreferrer -- 子windowに親windowの情報を渡さない(したがって子からは親に対し何も操作できない)

noopenerはまさしくこの「セキュリティ上の問題」を解決するためのものですが、noreferrerの方は違います。noreferrerを利用すると何も情報が渡りませんので、例えばアフィエイトの成果報酬が発生しなくなる、といった弊害があります。

念のための説明でした :)

2020/07/18 (Sat) 20:26
bon
To Akiraさん

Akiraさんこんばんは。お忙しいところ(質問もいっぱいで私がかなりご負担をかけていると思います。ごめんなさい)お返事ありがとうございます。

他のことを先に初めてしまったので(画像タイル状やLuminous)rel属性の修正は途中で止まっていましたが、Akiraさんが「やらなくて良いと思う」というお考えなのに安心して、また記事修正のついでにと思いました。

>恐らく近いうちに _blank の指定は自動的に noopener という扱いになるはずです。

同じ話をどこかで見ました。そうなったら、何も自分で付け足す必要はありませんよね。

noopenerとnoreferrerの違いを説明して下さりありがとうございます。
確かに楽天アフィリエイトのrel属性は
rel="nofollow sponsored noopener"
こんなんです。

これから編集するときは
<a href="" target="_blank" rel="noopener">
にしてやってみます。
限られたお時間の中でたくさんのアドバイスをしていただき、本当にありがとうございます。
ススムさんもありがとうございました。

2020/07/18 (Sat) 22:48
vanillaice (Akira)
Akira
To bonさん To ススムさん

はい。そうですね。その方向で良いと思います。
ススムさんも改めてご協力ありがとうございます :)

あと余談ですがススムさん、ちょっとだけ心配しています。事情はわかりませんが大丈夫ですかね (´・ω・`)
(スルーして頂いて構いません, 問題あればこの内容を削除しますのでお知らせくださいね)

2020/07/19 (Sun) 18:36
ススム
To Akiraさん

こんばんは、お世話になります。
bonさんへのコメントで書いた内容は、私だけでなく多くの方もご存知だと思います。
ただ、ここでAkiraさんの代わりに答えるのに躊躇するシャイな方もいると思いました (笑)
ですから、私が他の人より図々しいだけの話です (爆)

-----
ご心配かけて面目ありません。
直近の記事やコメントが、メッセージ性の強い内容だったからだと思います。
私自身も訳が分かりませんが、思わせぶりで感じが悪かったので、ちょっとイヤな気分になってしまいました。
だからと言って何を書いても良いはずもなく、自身の未熟さを恥じてもいます。

どちらにしてもAkiraさんがお元気で、久しぶりに会話出来て良かったです。

2020/07/19 (Sun) 21:33
vanillaice (Akira)
Akira
To ススムさん

こんばんは ('0')/

細かいことは全く把握していませんし詮索するつもりもありません。ただご自身も記事内容、結論づけや話の進め方について迷われているような気がしたもので。自身の考えがまとまらない場合はもしかしたらそれがある意味不毛だからかもしれません。
深く追求しすぎると行き詰まるものです。私なんかホントいつもそうです(笑)

葛藤もあるかと思いますが、いずれにしろいろんな考え方がありますので、お互いを尊重しあって楽しく更新できると良いですね :)

------
ワタクシまた地中深く潜りますので、何かあれば今回同様ご協力を頂けると嬉しいです。
いつもありがとうございます :)

2020/07/19 (Sun) 22:59
エンロック
ブログカード作れました

活用させていただきました。ありがとうございます。
フッターが私が使ってるテンプレートのスタイルシートと、かみ合わせが悪かったようでスクリプトから「CardFooter」を外して使ってます。

2020/07/21 (Tue) 00:27
vanillaice (Akira)
Akira
To エンロックさん

こんにちは。

CardFooterの件はちょっと原因や状況がわかりませんが、お役に立てたのであれば幸いです。
ご丁寧にありがとうございます :)

2020/07/22 (Wed) 17:36

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ