リンクカード最新版(ブックマークレット改訂を含む)のお知らせ

この記事は過去記事「リンクカードを公開します」より書き改めた記事です。

上記記事は情報が古くなりましたので、下記のように改めてリライト致します。

過去記事に於けるリンクカード利用は、アイキャッチ画像の表示に画像遅延読み込みスクリプトである「JSプラグインによるlazyload(lazysizes)」等の既存利用を必須要件としておりましたが、この度その要件を排除し、JSプラグインなしで、どなたでも簡便に弊リンクカードが利用出来るように改善したものです。

弊リンクカード利用に於いてはノーサポートですが個人的改変は自由です

注意
弊ブログで配布する「リンクカード」は、レスポンシブデザイン上に於いて正しく機能するものです。

リンクカードの開発経緯や、その機能・特徴は前記事にまとめてありますのでご一読ください。

尚、弊リンクカード利用にはかなりのWeb知識が必要でして、CSSをそれなりに駆使できる方でないと利用は無理かと思います。 従ってWeb知識初心者向けにはなりませんので、この記事もそんな要素を含んで細かな解説は割愛させて戴き、利用に於いて必要最低限のことのみを表現させて戴きますので、悪しからずご了承ください。

ただ、今までに弊ブログで提供して来ました「グラデーション背景色(ふわ~っと2号 や ふわ5号)」などを 、Akira風ブログカード でご利用経験がある方は、この「リンクカード」も利用方法はそれと同じであり、使えるスキルはお持ちだと言うことをお知らせして於きます。

リンクカードのHTMLコード取得用ブックマークレットを改善しました

下記に、リンクカードをブログ記事に貼り付ける為のHTMLコードを、一発取得出来るブックマークレット(小さなJSプログラム)を備えますのでご利用ください。
尚、このブックマークレットでは、リンクカードに表示するアイキャッチ画像を、ブラウザレベルで画像遅延読み込み表示を実行する為の loading="lazy" を採用しており、ブログ表示の高速化に寄与するよう改善し「JSプラグインによるlazyload(lazysizes)」等を不要となるよう改善しました。

古いブックマークレットをご利用の場合は削除して、改めて下記ブックマークレットを登録し直すことをお勧め致します(古いままでも利用は出来ます)


自サイト用 通常版ブックマークレット

リンクカード通常版

他サイト用 引用版ブックマークレット

リンクカード引用版

上記2つのブックマークレットを、パソコンのブラウザの ブックマークバー に登録して利用します。 下図GIFアニメーションをご参照ください。

ブックマークレットをブラウザのブックマークバーに貼り付ける様子

ブックマークレットの登録の仕方はいたって簡単です。

ブックマークレットの使い方

ブックマークレット「リンクカード通常版」「リンクカード引用版」の使い方は簡単で、リンクカードを作成したい記事やトップページを表示しておいて、各ブックマークレットをマウスでクリックすると、下図のような画面がポップアップします。

HTMLコードをコピーする
Click

上図枠内のHTMLコードをコピーして、一旦メモ帳にでも下図のようにペーストしてください。

HTMLコードをメモ帳にペースト
Click

そのメモ帳上で、リンクカード用HTMLコード先頭の <div class="link-card"> に対して、必要な背景色用CSSのクラス名を追加付与(下記にその例示があります)したりして編集を行い、そのHTMLコードをブログ記事編集欄にコピペして貼り付けます。

リンクカード用CSS

【ご注意】2024/01/05
弊リンクカード用CSSは、白色背景色テンプレート向きであり、ライトモード/ダークモード切り替え機能には向いておりません。

リンクカード表示用CSSを置きます。

【 追記 2023/06/22 】
リンクカードの影の色とマウスホバー時の表示形状の修正をしました。

/* リンクカードここから */
.link-card {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5em 1.5em 1.5em 2em;/* リンクカード内周りの余白調整 */
  border: 1px solid silver;
  box-shadow: 12px 12px 5px -5px rgba(0,0,0,0.4);
  transition:.7s;
  border-radius: 5px;
}
.link-card a:hover {
  text-decoration: none;
}
.link-card:hover {
  box-shadow: 3px 3px 3px rgba(0,0,0,.7);
}
.link-card a {
  color: black !important;
}
/* アイキャッチ画像右寄せ表示 */
.link-card-image {
  display: inline-block;
  float: right;
  width: 160px;
  height: 90px;
  margin: 4px 5px 10px 10px;
}
.link-card-image img {
  width: 160px;
  height: 90px;
  object-fit: cover;
  object-position: center center;
  box-shadow: 4px 4px 4px 0px rgba(0,0,0,.8);
}
/* 記事タイトル表示 */
.link-card-title {
  margin: 0 !important;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.4;
}
/* 記事要約文表示 */
.link-card-description {
  margin: 1em 0 !important;
  font-size: 13px;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* フッタードメイン表示 */
.link-card-footer {
  font-size: 12px;
}
/* リンクカード面のテキスト色設定 */
.link-card .link-card-title,.link-card-footer,.link-card-description {
    color: rgb(51,51,51);
}
/* 引用符マークや背景色やbox-shadow等デザインの非表示化 */
.link-card blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}
.link-card blockquote::before,
.link-card blockquote::after {
  content: none;
}
/* スマホ表示変態 右寄せバージョン */
@media ( max-width : 480px ) {
.link-card-image {
  display: block;
  float: none;
  margin: 0.6em auto;
}
.link-card-title {
  text-align: center;
}	
}
.link-card {
    border: none !important;/* リンクカードの枠線の非表示 */
}
/* マウスホバーでゆっくり上がってゆっくり下がる */
.link-card {
  transition: .5s;
}
.link-card:hover {
  transform: translateY(-0.1875em);
  transition: .5s;
}
/* リンクカードより上下の余白 必要な場合にクラス名 yohaku 追記して利用する */
.yohaku {
    margin-top: 50px;
    margin-bottom: 50px;
}
/* リンクカードここまで */

上記CSSは W3C CSS Validation Service にて完全合格しております。

リンクカードの利用方法と注意事項

弊リンクカードでは「CSSに背景色設定は行ってありません」ので、グラデーションやアニメーション等の動きのある背景色は、利用者さんでご用意ください。 デフォルトではリンクカードの背景色は未設定の透過状態です

ダークモード対応や、ダークモードの影響を受けない装飾が必要な場合は「自前で用意する背景色用CSS」にて実施してください。

グラデーション背景色ふわ5号CSSの例

リンクカードの背景色に、下記のようなグラデーション背景色を設定する方法を書いておりますから、クリックしてご参照ください。

ふわ3号はスマホでホバー完全対応版

リンクカード用のカラー背景色「ふわ3号」を復活させましたのでご参照ください。

弊リンクカード利用の改善点

今までのリンクカードでは、カード内にアイキャッチ画像を表示するのに 画像遅延読み込み のテクニックであるレイジーロード(Lazyload)を実行する為のJSプラグインを応用してブログ表示の高速化を図っておりましたが、弊記事ではその「JSプラグイン」の利用を排除し、ブラウザレベルでそれを実行出来る loading="lazy" を採用することで、どなたでも簡便にリンクカードを利用出来るよう改善したものです。

まとめ

弊リンクカードはいろいろと一般的ではない要素を含んだツールですので、Web知識中級者以上のスキルをお持ちでないと使えないでしょう厄介なものです(笑)
そんなこともあり 完全ノーサポート とさせて戴きますことをご承知ください。 尚、いろいろなカスタマイズ(ブックマークレットも含め)は自由ですので、自己責任に於いていろいろにお楽しみください。

【 追記 】更なる進化した リンクカード-Ⅱ

リンクカードのデザインや機能を更に進化した「リンクカード-Ⅱ」も公開しておりますので、下記リンクカードをクリックしてご参照ください。






リンクカード
新しくなったの
まだ知らないだろ
ふふっ

関連する記事
あトん
2021/12/23 (Thu) 08:30

ブックマークレット実行のJSについて

ぼっちんさん、ご相談がありカキコさせて頂きます。

Akira先生が公開されているブックマークレットをBloggerで使おうと思ったのですが、noteの記事を埋め込もうと実行すると、下記エラーが発生し全滅でした。

Refused to load the script 'https://j.mp/1bPoAXq' because it violates the following Content Security Policy directive: "script-src 'sha256-524A+xb6CLS/OdsiVe1HuMB2d7rPcTStDwnnciTjsPY=' 'nonce-kkDJZlEopeDo3NqzjASxmQ==' 'self' 'unsafe-inline'

2年前はこのようなエラーは出なかったので、note側の環境が変わったことが原因ようです。

ぼっちんさんが公開されているブックマークレットはjQueryを呼び出さずvanilla JSを記述されているので、noteの記事のブログカードも無地作ることが出来ました。

ご相談というのは、ブックマークレットをカスタマイズする際、ogp情報を取得しているJavaScriptの部分を参考に流用させて頂けませんか、というお願いです。

ご検討のほど宜しくお願いいたします。

ぼっちん
ぼっちん
2021/12/23 (Thu) 08:44

To あトんさん

おはようございます ^^

> ご相談というのは、ブックマークレットをカスタマイズする際、ogp情報を取得しているJavaScriptの部分を参考に流用させて頂けませんか、というお願いです。

は~い、それは全然構いませんよ~ ^^
ただ、それでBlogger側でキチンと動作出来なくても、私はBloggerもnoteも全く関心ないものですから、そこで出た不具合などの検証も行えませんので、解決のお手伝いも出来ないのが正直なところです。

それをご承知戴けたら、どうぞご自由にお使いください ^^

それはそうと、あトんさんブログのLighthouse検証値が格段に改善されましたねぇ、ほんとに素晴らしいです (•‾⌣‾•)にこ♪

あトん
2021/12/23 (Thu) 08:59

Re.ブックマークレット実行のJSについて

ぼっちんさん、参考使用のご承諾、ありがとうございます!

ぼっちんさんの迷惑になるようなことは致しませんので、ご安心下さい。

完成したら記事に書こうと思ってますが、今回ブログカードを使おうと思った理由は、はてなブログのブログカードを止めるためです。

はてなブログのブログカードを埋め込んでいると、はてなブログ側のタグマネージャのJavaScriptが呼び出されるためLighthouseのスコアが下がってしまうのです。

また、リンク切れになると、同様にスコアが下がってしまいます。

それでは。

あトん
2021/12/23 (Thu) 09:02

すみません。

送信ボタンを押したら、不正な投稿だと判断されました、と表示されたので、
もう一度送信を押してしまいました。

こんなエラーは初めてです。

ぼっちん
ぼっちん
2021/12/23 (Thu) 09:05

To あトんさん

は~い、了解です(笑)
コメント重複分は削除させて戴きました。

良い結果が出ることを楽しみにしておりますからね~ (•‾⌣‾•)にこ♪

あトん
2021/12/26 (Sun) 21:30

No title

ブックマークレットのデバックに時間がかかってしまいましたが、取りえず完成することができました。
ぼっちんさん、ご協力、ありがとうございました。

ぼっちん
ぼっちん
2021/12/26 (Sun) 21:42

To あトんさん

こんばんは~ ^^

なかなか楽しそうなブログカードに仕上がりましたね。
ますますブログ運営が楽しくなりそうで、良かったですね~ ^^

[ コメント投稿に関するご案内 ]

弊ブログでは、コメント主さんがご自身のサイトURLを記入してくださると、コメント一覧にご自身のアイコンが表示されるようになっております。

コメント投稿時には、入力必須項目お名前・ご自身のサイトURL・コメント本文」の三項目を入力すると、送信ボタンが表示されます。

コメントは管理人承認後に表示されます。

更新順
リンクカード