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

To Akiraちゃん

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

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

管理人のみ閲覧できます

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

No title

こんにちは。

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

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

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

すいません。

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

To ぼっちんさん

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

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

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

To Akiraちゃん

(^_^; ｱﾊﾊ…

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

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

To べえさん

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

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

To ぼっちんさん

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

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

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

To Akiraちゃん

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

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

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

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

管理人のみ閲覧できます

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

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

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

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

To ぼっちんさん

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

管理人のみ閲覧できます

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

To Akiraちゃん

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

--------------
慌てて追記（笑）

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


　

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

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

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

To ぼっちんさん

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

こんにちは。

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

鍵が消えてしまいます

こんにちは。

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

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になっているはずです。
よろしくお願いします。

------

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

こんにちは。

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

To べえさん

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

To Akiraちゃん

こんにちは ＾＾

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

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 {
内容
}

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

To Akiraちゃん

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

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

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

To ぼっちんさん

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

To Akiraちゃん

あららら（爆）

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

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

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

To Akiraちゃん

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

とりあえず記事サンプルの「③ マウスホバーで背景色変化」に、ちょっとだけそれらしい動きを加えてみました。
たぶん、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'ω')ﾉ

To Akiraちゃん

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

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

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

To ぼっちんさん

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

管理人のみ閲覧できます

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

To Pinboardご利用中の内緒さん

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

はじめまして

おはようございます。

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

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

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

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

To ジュレさん

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

管理人のみ閲覧できます

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

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

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

/* ブログカード */

管理人のみ閲覧できます

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

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

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

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

管理人のみ閲覧できます

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

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

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

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

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

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

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

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

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

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

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

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

管理人のみ閲覧できます

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

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

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

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

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

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

To SSLの件 内緒さん ②

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

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

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

To YURAMAさん

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

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

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

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

To ぬこぬこさん

こんばんは。

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

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

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

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

<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無しでのご質問はお控えください。

To Akiraさん

どうもすみません。

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

お手数おかけしました。

管理人のみ閲覧できます

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

To blockquote装飾の件 内緒さん

ブログカードの方のCSS
.blogcard blockquote
に
background-color: transparent;
を追加してください。

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

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

To blockquote装飾の件 内緒さん②

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

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

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

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

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

To blockquote装飾の件 内緒さん③

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

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

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

管理人のみ閲覧できます

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

いただきました

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

To ひいろんさん

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

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

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

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

よろしくお願いします。

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-->

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

修正できました

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

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

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

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

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

写真が大きくなってしまいます

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

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

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

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が全て無効化されています。
よろしくお願いします。

To Akiraさん

 Akiraさま

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

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

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

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

To Orcaさん

おはようございます。

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

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

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

ブログカードが起動しません

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

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

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

To ふふふのふうふさん

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

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

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

To Akiraさん

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

To ふふふのふうふさん

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

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

To Akiraさん

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

To ふふふのふうふさん

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

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

素晴らしすぎます！

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

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

To 栽培マンさん

こんばんは。

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

貼る場所がわかりません

Akiraさま

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

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

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

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

To mojorumさん

こんばんは。

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

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

To Akiraさん

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

おかげさまでできました

Akiraさま　

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

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

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

To mojorumさん(完了のご報告)

こんばんは。

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

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

お疲れ様です :)

To Akiraさん

Akira さま

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

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

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

No title

Akira様

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

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

To ゆうやさん

こんばんは。

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

お礼＆ご報告

Akira様

あとんです。

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

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

ありがとうございます。

To あトんさん

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

管理人のみ閲覧できます

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

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

こんにちは。

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

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さんの考えをお聞きしたいので、質問はこのままにしておきます。よろしくお願いします。

To bonさん

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

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

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

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

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

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

訂正です

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

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

To ススムさん

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

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

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

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

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を利用すると何も情報が渡りませんので、例えばアフィエイトの成果報酬が発生しなくなる、といった弊害があります。

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

To Akiraさん

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

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

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

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

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

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

To bonさん To ススムさん

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

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

To Akiraさん

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

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

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

To ススムさん

こんばんは ('0')/

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

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

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

ブログカード作れました

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

To エンロックさん

こんにちは。

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

管理人のみ閲覧できます

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

To ブログカードファビコンの件 内緒さん

こんにちは。

ブログカードのブックマークレットを修正して width="16" height="16" が入るよう修正しました。
で、本件については私の考えを記事にしたいと思います。他の方の記事は参照せずに書きます(その方が意見が左右されない・ぶれないはずなので)

他の方からも同様の問い合わせがありますのでこの機会に。
取り急ぎブログカードのファビコン部位についてはブックマークレットを差し替えて頂くことで今後は良いと思います。これまでのものを修正されるのであれば、ブログカードhtml出力内容の最終のimg要素の alt="" の後ろに width="16" height="16" と入れてください。
これはファビコンサイズや形状が一定(16px四方正方形)だからできるんですが、OGP画像の場合はオリジナルサイズ・アスペクト比が個々によってまちまちですし、その対象画像のwidth, height指定を自動で拾うのが困難ですから事実上は「不可」です。
それでもやりたい、という場合は、記事をお読み頂いて、ご自身が選択される考え方に則って選択してくださいね。
よろしくおねがいします。
(記事は本日中には書けると思います)

管理人のみ閲覧できます

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

To ファビコンの件 内緒さん

こんばんは。

ブログを運営するにあたり最も大事なこと、そして最も効果の高いSEOというのは「記事をマメに更新すること」なんですよね。これが一番重要です。なのでhtmlの専門家なら良いんですが、そうでない場合は本質を見失ってしまわないか、という点がとても心配なんです (´・ω・｀)
何度も言うようにそれが楽しい、というならばどんどんやれば良いんですけどね。
「htmlに翻弄されて記事を書きたくても時間が無い」「htmlをちゃんとしなきゃ、やらなきゃ、と思うと面倒で記事を書くことも嫌になってしまう」といったケースも出てくるでしょうから、一番大事なものを見失わないように、という感じです。
俯瞰してみると「なんだかみんな変に焦っているなぁ」と感じることもありますので、あまりご自身に強い縛りを課さない方が良いと思います。もっと柔軟に ^^;
私でもbrとかフツーに使いますし、必要無いと思えばhtml的には正しいとされることでもスルーすることはありますよ。

書いた記事が誤字だらけで申し訳ないです。修正するとまたエスケープ処理が… あぁめんどくせ… （￣∀￣；）
って、こういうのが一番ダメよね(笑)

管理人のみ閲覧できます

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

Akiraさま
いつもありがとうございます。
ブログカード使いたくて、設定してみました。

ブラウザはEdgeでテンプレートはSoutherlyです。

❶ドラッグ＆ドロップでお気に入りのところに
□ブログカード
というものが存在する状態にしました。

❷テンプレートのCSSの場所の最後に
CSS内容をコピペして、@charset "utf-8"; は削除しました。
そして更新。

❸記事作成画面で
お気に入りのところにある、
□ブログカードを押しても何も起きません。

もしかして、広告ブロックが関係するかもしれないと思い、
それも外しましたが何も起きません。

あと何が考えられますか？
CSSなどの中身は全くわからない者ですが、
パソコン操作には慣れていますので、CSSを欠損したということは
まずないと思います。複数回トライしていますし。

To あみきんさん

あみきんさんコメントの
-----------
❸記事作成画面で
お気に入りのところにある、
□ブログカードを押しても何も起きません。
-----------
とのことですが、Akiraさんの記事中の
③ カードにしたいwebページを開き、ブックマークレットをクリック
の行程を飛ばしてしまっておりませんか？
そこで表示される内容をコピーしてから、これを記事作成画面で任意の位置に「ペースト」すれば、ブログカード表示用のHTMLが貼り付いて、ブログカードが表示される訳です。

③ 「カードにしたい対象のwebページを開き」ブックマークレットをクリック ですからね ＾＾

To ぼっちんさん

Akiraさん
あ！そういう意味でしたか、投稿画面でクリックしておりました💦
丁寧に解説ありがとうございます。

たとえば、このページや自分のトップページをリンクしたいと思ったら、
そのページを開いてお気に入りに入れた「ブログカード」をクリックするんですね。

でも、何も起きません💦

To あみきんさん

＞ でも、何も起きません💦

おやおや、それはきっと……

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

の操作が正しく行われていない可能性があります。
ブログカード の文字列部分をマウスで「クリックしたまま」引っ張って行ってブラウザのブックマークバーに放り込んでから、マウスから指を離すとその「ブックマークレット」がキチンと貼り付きます。
https://blog-imgs-168.fc2.com/o/o/p/oops0011/2023-08-28-bookmarklet-ani.gif
この操作をやり直してみてくださいね ＾＾
いま貼り付いているものは削除してからにしましょう。

To あみきんさん, ぼっちんさん

こんにちは ('0')/
まとめてのお返事で失礼します。

まず、ぼっちんさん、いつもご協力をありがとうございます :)

あみきんさん
記事冒頭にある通り本記事は旧式の内容です。新しいページから登録を行ってください。
本記事はブックマークのリンクを閉じておきました。

To vanillaice (Akira)さん

ぼっちんさん
素敵な動画ありがとうございます。
そのように、削除して3回ぐらいやってちゃんと上に表示されてるのですが、、、

AKIRAさん
検索でこのページに来てしまったのですが、
ブログカードのコード自体が更新されてるのですね❤️
2023/06/19
の記事で確認しました。
再度トライします。ありがとうございます。