Webテク倉庫

リンクカードを公開します

2020/11/07
リンクカード 15

※ お知らせ 2021/09/10
弊リンクカード記事の情報は既に古くなりましたので、下記リンクカードをクリックして、新しい記事をご参照ください。




予てより開発を進めて来ておりました「リンクカード」がなんとか形になり、ブログ上で問題なく使えるようになり、筆者個人用に利用しようと画策しておりましたが、弊ブログのお友達である 徳川たぬこさん が、とても熱心に弊リンクカードを期待していてくださって、かつ快く「動作検証やCSS改良のお手伝い」もしてくださっているなかで「皆さんにも公開してあげてくださいよぉ♪」と、誘惑まであって乗せられて(笑)、とうとう根負けしてソース公開することに致しました (•‾⌣‾•)にこ♪

その只者ではない、Web知識上級者の主婦ブロガーの 徳川たぬこさん のブログは、下記リンクカードをクリックしてご参照ください。
この度は、弊リンクカード開発にとてもご尽力戴けて感謝の気持ちいっぱいでございます、ほんとにありがとうございます。


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

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

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

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

リンクカードのHTMLコード取得用ブックマークレット

下記に、リンクカードをブログ記事に貼り付ける為のHTMLコードを、一発取得出来るブックマークレット(小さなJSプログラム)を備えますのでご利用ください。

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

リンクカード通常版

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

リンクカード引用版


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

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

リンクカード用CSS

※ リンクカードデザイン改訂のご案内 2021/08/20
既にリンクカードをご利用戴いていて「引用版リンクカード」を利用の時に、ご利用中のテンプレートの引用(blockquote)デザインに起因する背景表示に不具合が出る場合には、リンクカード表示用CSSを、以前のものと差し替えてください(blockquoteの非表示化処理を行いました)。

アイキャッチ画像の表示位置を「右バージョン」に変更し、これを標準とし、リンクカード内周りの余白も広くしました。

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

/* リンクカードここから */
.link-card {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5em 1.5em 1.5em 2em;/* リンクカード内周りの余白調整 */
  border: 1px solid silver;
  box-shadow: 3px 3px 5px 0px rgb(170, 170, 170);
  transition:.2s;
  border-radius: 5px;
}
.link-card a:hover {
  text-decoration: none;
}
.link-card:hover {
  box-shadow: 3px 3px 5px 2px rgb(170, 170, 170);
}
.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 rgb(133,133,133);
}
/* 記事タイトル表示 */
.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;
}
/* 引用符マークや背景色や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;
}	
}
/* リンクカードより上下の余白 必要な場合にクラス名 yohaku 追記して利用する */
.yohaku {
    margin-top: 50px;
    margin-bottom: 50px;
}
/* リンクカードここまで */

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

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

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

弊ブログ作成のグラディエーション背景色の利用例

弊ブログでは今までに、数種のグラディエーション背景色CSSを公開して来ましたので、それを例に「リンクカード」への設定方法を記します。

【 ふわ~っと2号 設定例 】

ブックマークレットを使用して、リンクカード用HTMLコードを取得したその先頭に……

<div class="link-card fuwa2">

ふわ~っと2号用のCSSの読み込みクラス名 class="fuwa2" を追記付与することで、同背景色が設定され、以下のようにグラディエーション背景色である「ふわ~っと2号」で、リンクカードが表示されます。


リンクカードにチラリズムアニメーションを追加する利用例

上記「ふわ~っと2号」背景色になったリンクカードに、下記の「チラリズムアクション」を追加する。
すると、リンクカードにマウスを乗せると、カードの端がチラリと浮き上がる面白アクションが付加出来ます。



<div class="link-card fuwa2 tira">

要は、先のHTMLコードに、クラス名 class="tira" を追記付与する訳です。

まとめ

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



パソコンを操る高齢の男性ブロガー

ワシでも
使えてるがな
リンクカード


自身のブログを各種ツールで分析しましょう

スマホで正しく表示されるかテストする!
モバイル フレンドリー テスト

スマホ表示速度分析は PSI が強力です!
Google PageSpeed Insights

自身のブログのHTMLは最新かチェック!
W3C Markup Validation Service

検索からの方はトップページへもどうぞ
Webテク倉庫のトップページ


関連する記事

Comments 15

コメントは現在ありません。

徳川たぬこ

ありがとうございます

大変恐縮です💦┏○︎))
わたくしなぞ、自分のテンプレート内限定のマニアックな魔改造をしていただけですのに
寛容にお許し頂き検証やアドバイスまでしてくださり、こちらこそ感謝と尊敬の念に堪えません


尚、私事ですが、これを機にブログカード背景カスタマイズのCSSを断捨離しまして
おこがましくもカスタマイズコードの公開をしていた記事も下書きにいたしました

そして余談ですが、その中にたまたまひとつだけブログカードにのみ対応する背景があったのと、
過去に貼ったブログカードを全部リンクカードに修正する作業もできそうにないので^^;
これからは、ブログカードとリンクカードを使い分けてゆこうと思います


修正要らずのありがたいリンクカード(。>ㅅ<。)˖✧大切に使わせていただきます˖✧
ありがとうございます!

2020/11/07 (Sat) 13:50
ぼっちん

ぼっちん

To 徳川たぬこちゃん

たぬこちゃん、こんにちは~ ^^

今回も(笑)いろいろとお手伝いしてくれて、ほんとにありがとうございました ^^

> これからは、ブログカードとリンクカードを使い分けてゆこうと思います

そうそう(笑)
リンクカードは今までの形態のブログカードを否定する性質のものではないので、ケースによって「使い分け」して楽しめば良いだけのことですからね(笑)

あくまでもマニアックに(笑)Lighthouseや諸々の検証ツールの合格の為に、改変作業をしてから記事に貼り付けるなんて面倒なことから「解放」する為に作ったようなものだから(笑)
大いに楽しんでくださいね~ (•‾⌣‾•)にこ♪

2020/11/07 (Sat) 14:53

-

管理人のみ閲覧できます

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

2020/11/07 (Sat) 19:06
ぼっちん

ぼっちん

To shadow部分の背景色の件の鍵コメさん

鍵コメさん、こんばんは ^^

ご提案くださった shadow部分の背景色 処理の件なんですが、実はそのようなご希望も出ることは想定内でした。
ただ、ダークモードも様々な方法があって、それらの少しずつの違いにも対応させるには、その全ての検証も必要(たとえば ダークライトへの対応)で、とても検証しきれないことから「ダークモード未対応」と決めた次第なんです。
ですから、その辺りのご要望は「利用者さんのカスタマイズにお任せしますよ」と言うスタンスなんです。

実は、記事にも書きましたが「本来は私の個人用」として作成したものですから、万人受けすることは当初から考えには入ってないんです (^_^; アハハ…
尚、弊リンクカードは「形状変更」などにも、けっこうフレキシブルに対応出来る構造にしてありますから「カスタマイズは形状も色彩も」多様に楽しんで戴けるものです。

そんなことでご理解戴けましたら幸いです m(_ _)m

2020/11/07 (Sat) 19:38

-

管理人のみ閲覧できます

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

2020/11/07 (Sat) 19:59
ぼっちん

ぼっちん

To shadow部分の背景色の件の鍵コメさん

鍵コメさん

ご提案くださった内容には、ほんとは喉から手が出ちゃう(笑)くらいなんですが、一度受けてしまいますと後から後から収拾が利かなくなっちゃうんです (^_^; アハハ…

速攻で快くご理解くださって、ほんとにありがとうございます m(_ _)m

2020/11/07 (Sat) 20:06

よつば

ありがとうございます💕

ぼっちん先生~♪ こんばんは~(^▽^)/

リンクカードの公開して下さいましてありがとうございますm(_ _)m
修正いらずのリンクカード、すごく魅力的ですね~早速 持ち帰らせて頂きます

Akira先生のブログカード、ぼっちん先生のリンクカードどちらも素晴らしい!
気分次第で使い分けて使わせて頂きまーす(^▽^)/

2020/11/08 (Sun) 16:34
ぼっちん

ぼっちん

To よつばちゃん

よつばちゃん、こんばんは~ ^^

> 修正いらずのリンクカード、すごく魅力的ですね~早速 持ち帰らせて頂きます

それそれ(笑)
私みたいに「Lighthouse や W3Cバリデーション や モバイル フレンドリー テスト」の検証結果に対応する記事なんて書いていると、その本人のブログで Error や Warning がありまくりじゃ洒落にならなくて(笑)わざわざブログカードを記事に貼り付ける前に「エラー潰し」をやってから貼っている現状だったんですよね(笑)
その行為にはもう長いことうんざりしてて、とうとう我慢出来なくなって「もうやだぁ! 新しいブログカード作っちゃお!」と、一念発起したんでした (^^ゞポリポリ

> 気分次第で使い分けて使わせて頂きまーす(^▽^)/

そうなんです、マジで「気分次第」で使い分けてくださいな(笑)
このリンクカードは favicon も排除しちゃった(実はどのブログカードもfavicon表示があると若干遅い)から、見た目が簡素で格好悪い(笑)でしょうけど、その内に慣れますからね~ (〃^▽^〃)oあはははっ♪

2020/11/08 (Sun) 16:51

そふぃあ

こんにちは

出遅れましたが、公開おめでとうございます。
(いや、ありがとうございますの方が正解かな)

パソコンから拝見した時とスマホから拝見した時と見え方も違って、さすがぼっちん先生のお仕事だと感心するばかりです。
いつも貴重な情報をありがとうございます。

2020/11/10 (Tue) 11:21
ぼっちん

ぼっちん

To そふぃあさん

そふぃあさん、こんにちは~ ^^
いやぁ、お祝い(笑)ありがとうございます (^^ゞポリポリ

> パソコンから拝見した時とスマホから拝見した時と見え方も違って、さすがぼっちん先生のお仕事だと感心するばかりです。

この「変態」(笑)のアイデアって、海外サイトを覗いててたまたま見ちゃったんです(爆)
で、偶然だったので「わぉ、面白~い」って夢中になってて、うっかりそのサイトURLをコピーしておくのを忘れてしまって「どうやってここに辿り着いたっけ?」と、分からなくなっちゃったんですよね (^_^; アハハ…
私って、いつもこんな感じで (_ _)ノ彡_☆バンバン!!

気が向いたら リンクカード 使ってみてくださいね~(笑)

2020/11/10 (Tue) 11:33

ちょこ

大変助かりました!!

お久しぶりです!!いつも更新楽しみにしています!
ちょっと前の記事へのコメントをお許しください<(_ _)>

ブログでよくある「あわせて読みたい」の表現をうまいこと実装したいなと思い、今回こちらのリンクカードを使用させていただきました!
今までAkiraさんのブログカードを「あわせて読みたい」に使っていたのですが、枠があるとちょっとうるさいし、レイアウトも変えたい…でも元のブログカードも使いたいからCSSは変更できないし…と悶々としていたんです。

で、ふと昨日「そういえば、ぼっちんさんもブログカード作って公開してらっしゃったな…」と思い出し、僭越ながらCSSをちょっと弄らせていただいて、使用を開始しました。

おかげさまで自分の思い描いていた「あわせて読みたい」を表現することができました!
デフォルトのレイアウトがかなり自分の理想に近かったので、ありがたかったです(*´▽`*)


恐縮ですが1点だけちょっと気になることがあったので報告いたします。

CSSの「引用符マーク関連の非表示」の「blockquote:before」の部分です。
ブログ本文に使うblockquoteタグをCSSで装飾しているとき、上記の「blockquote:before」の部分が干渉して、本文のblockquoteのCSS(「blockquote:before」を使用しているときだけに限りますが…)が崩れてしまうようです。
丁度私のブログがそうだったのですが、こちらのリンクカードは自分のブログ記事にしか使わない予定なので引用関連の部分を削除して対応させていただきました。


この度は素晴らしいリンクカードの公開本当にありがとうございました!!!
大切に使わせていただきます<(_ _)>

2021/01/07 (Thu) 07:44
ぼっちん

ぼっちん

To ちょこさん

ちょこさん、おはようございます ちょっとぶりですね~ ^^

> おかげさまで自分の思い描いていた「あわせて読みたい」を表現することができました!
> デフォルトのレイアウトがかなり自分の理想に近かったので、ありがたかったです(*´▽`*)

おおおぉっ なるほどぉ、上手にカスタマイズなさってて、ちょこさん♪ さすがですね~ d(-_^) Nice!!
そんな風に利用して戴くと私も嬉しくなってしまいますよ(笑)

> 恐縮ですが1点だけちょっと気になることがあったので報告いたします。

弊ブログでも、Akiraさんテンプレート「Ample」から引用符 blockquote 部分はカスタマイズしてあるんですけど、ちょこさんが言われるような「blockquote:before」の部分が「外部リンク用ブックマークレット」を利用しても 干渉~ と言う崩れは再現しないんですよね。
ちょっといろいろと検証確認してみますので、暫くお時間くださいね~ ^^

> この度は素晴らしいリンクカードの公開本当にありがとうございました!!!

うんうん(^-^) ちょこさんのように、自分流にカスタマイズして利用して戴けると、私もほんとに嬉しいですし、応用例の参考になります。
どうもありがとうございます ^^

2021/01/07 (Thu) 08:50
ぼっちん

ぼっちん

To ちょこさん

■ 原因が判明しました

ちょこさんのテンプレートでの blockquote カスタマイズCSSを拝借して、記事引用とリンクカード(リンクカード引用版ブックマークレット)を表示してみましたら
https://blog-imgs-137.fc2.com/o/o/p/oops0011/2021-01-07-Sample-comp.png
このような表示になりました。

要は、ちょこさんが言われております「表示崩れ」はこれのことですね?
これは、ちょこさんblockquoteの blockquote:before{ のルールセット内の #92d4ff 背景色の四角枠と、その内部の □ を表現するCSSが「表示の重なり」として現れている訳で、リンクカードの崩れではありません。

このカスタマイズは「ちょこさんの個人的カスタマイズ」ですから、一般的 blockquote デザインにはないものです。
弊リンクカードでの blockquote:before{ CSSは、一般的 blockquote デザインに対して書いてあるものです。

従って「引用リンクカードでは問題なし」とさせて戴きますので、どうぞご理解くださいね~ ^^

2021/01/07 (Thu) 09:42

ちょこ

ご面倒おかけしました。

コメントのお返事ありがとうございます!!
原因まで突き止めてくださって本当に感謝です><

自分でしっかり確認できればよかったのですが、原因まで突き止めることができずお手を煩わせてしまって申し訳ありませんでした…
CSSについてもうちょっとしっかり勉強しなくてはいけませんね・・・(´・ω・`)
出過ぎた真似本当に失礼いたしました!

2021/01/07 (Thu) 14:50
ぼっちん

ぼっちん

To ちょこさん

は~い、ご理解戴けてなによりです ^^
これに懲りず(笑)リンクカードのカスタマイズをじゃんじゃん楽しんでくださいね~♪

> 出過ぎた真似本当に失礼いたしました!

いえいえ、そんなこと気にすることはありませんってば ヽ(^^ ) ヨシヨシ(笑)

2021/01/07 (Thu) 15:27
ぼっちん
Admin: ぼっちん
坊ちゃんじゃなくて、ぼっちんです(笑)
只今、新型コロナウイルス対策の為、スケキヨ風マスク装着中です(爆)
PC弄くりは40年ほどのキャリア(ただ長いだけかも)の古希過ぎFC2ブロガーです。
そんな私が、初心者さんにも楽しめるWebテクを専門用語を極力省いて、体験的見地からその時のスクリーンショットやGIFアニメーションを用いて分かり易く解説致します。
対話好きですから記事に関わらないコメントでも遠慮なくしてくださいね~♪


FC2おすすめブログ


リンクカード