ＩＴリテラシー研究会 in 廿日市: linkcard-manager

ブログカード風リンクカード確認ツールの試作

ブログカード風のLINKCARDを作成したいと思い，ブックマークレットを利用してサイト内のページやブログを表現しました。

さらに，作成したLinkCardをサイトに貼り付ける前に，雰囲気を確認するツールが欲しくなりましたので試作しました。

当ツールは，下記のブックマークレットと一対で動作します。

直接，URLからサイト情報を読みに行く方法は，先方がどのような状態にあるか分からないので採用していません。

このブックマークレットをご自身のブックマークに登録後，作成したいサイトページ上でクリックしてください。当ページが開くと思います。

ブックマークレット

機能説明

作成されたLinkcard表示タグは，クリップボード内に格納されていますので，Cardタグ読込ボタンをクリックして読み込んでください。

ブラウザによりClickboardにアクセス出来ない，あるいは許可を要求されます。また，読込前の状態に戻したい時は，リロードボタンをクリックしてください。

PrtSc機能を付けていますが，ブラウザによっては動作しない場合もあります。その場合はマウスでドラッグ＆ペ－ストして下さい。

プレビュー表示ボタンを押すと，読み込まれたLinkCardタグの解析とチェックがなされ，解析できた場合はプレビューに表示されます。

一部，画像の縮小や，タイトル・概要の非表示などの調整が行えますので，修正後，タグ修正ボタンを押し，プレビュー表示で内容を確認してください。

全ての修正を解除したい場合は，リセットボタンをクリックしてください。

標準で引用タグが付いていますので，ご自分のサイト内から引用する場合は，引用チェックを外して下さい。

LINKCARD表示タグ

↑こちらのタグをコピーして記事に貼り付けるとリンクカードを表示することができます。

プレビュー　

URL:

タイトル表示（title)：　　有　

概要表示(description)：　有　

リンク先ドメイン表示：　有　　　配置：

画像表示：　有　　サイズ： px(50～100) 　　配置：

カード幅指定：％(50～100)

Blockquoteタグを利用する(引用する場合)　　有　

色設定	枠修正
タイトル：	枠線色：
概要　：	線幅　： px(1～6)
背景　：
ドメイン：

なお，今回のLINKCARDのための静的CSSは，以下のコードになっています。<head>～</head>内の<style>～</style>内に入れて頂ければと思います。

コード

/************************************/
/* ブログカード用CSSの導入　　　　　　 */
/************************************/
/* カード全体像 */
.blogcard {max-width: 100%;margin-bottom: 30px;padding: 10px;border-radius: 2px;border: 1px solid rgb(211,211,211);box-shadow: 0 10px 6px -6px rgba(0,0,0,.1);background: white;transition: .2s ease-in-out;}
.blogcard > a {color: rgb(51,51,51);text-decoration: none;}

/* float親要素 */
.blogcard-content {margin-bottom: 5px;overflow: hidden;}

/* 画像 位置指定 表示サイズ */
.blogcard-image {display: inline-block;float: left;width: 100px;height: 100px;
  margin: 0 10px 0px 10px;} /* 左右10pxを確保 */
.blogcard-image-wrapper {display: inline-block; width: 100%; height: 100%;}
.blogcard-image-wrapper img {width: 100px;height: 100px;object-fit: cover;
  object-position: center center;}

/* タイトル */
.blogcard-title {margin: 0 !important; font-weight: bold; font-size: 15px;
  line-height: 1.4;}

/* 引用 */
 blockquote {position: static;margin: 0;padding: 0;box-shadow: none;
  border: 0;background: transparent;}
 blockquote::before,
 blockquote::after {content: none;}

/* 記事概要 */
.blogcard-description {margin: 1em 0 !important;font-size: 13px;
  line-height: 1.5 !important;}

/* フッター(ファビコンリンクとサイト名) */
.blogcard-footer {font-size: 12px;}
.blogcard-footer img {margin-right: 5px;vertical-align: middle;}

/* カードマウスホバー */
.blogcard:hover {box-shadow: 0 10px 10px 2px rgba(0,0,0,.1);}
.blogcard:hover > a {color: rgb(51,51,51);text-decoration: none !important;}

/* ダークモードの対応 */
@media (prefers-color-scheme: dark) {
  .blogcard {box-shadow: 0px 20px 40px rgba(0,0,0,.5);border-color: rgb(60,60,60);background: rgb(51,51,51);}
  .blogcard > a,.blogcard:hover > a {color: rgb(240,240,240);}
}
/* boxsizeの調整 */
#blgcd * {
  box-sizing: border-box;
}

このCSSは動的に修正することが出来ないので，適宜，ご検討ください。

LinkCardの仕上がりをある程度確認できると思います。LINKCARD表示タグをコピーして最終的なイメージに調整してください。

このCSSやブックマークレットなどについては，以下の方のサイトを参考にいたしました。ありがとうございます。