Top Page › Template › カスタマイズ › リンクカードのご紹介。(^-^)

リンクカードのご紹介。(^-^)

2020-11-08 (Sun) 00:01

当ブログの『 Links 』にもございます『Webテク倉庫』 ぼっちん様が、リンクカードを作られたとの事でご紹介致します。(^-^)
利用方法は下のリンクカードをクリックして頂くと詳しいページを開きます。

この『リンクカード』の特徴は、
  • スマホ表示ではリンクカードの形を変える(変態)
  • a リンクでリンクカード全体をクリック遷移出来るようにする(jQuery・CSS不用)
  • リンク先の展開を target="_blank" から target="_blank" rel="noopener" とセキュリティを高める
  • 記事要約文を2行表示に制限し、デバイスの表示幅に応じて表示文字数を2行を越えないで自動可変出来るようにする(JS不用)
  • 記事要約文字列末尾に三点リーダー … を自動挿入する
  • 背景色・背景画像の設定は好みで自由自在(デフォルトでは背景色設定なし)にする
  • favicon の表示は最近の モバイル フレンドリー テスト にて「robots.txt によりブロックされました」のエラーを受けるようになったため表示を排除
  • 各種検証ツール「W3Cバリデーション・Lighthouse・モバイル フレンドリー テスト」の全てに Clear

との事です。↑こちらの記事から引用させて頂きました。m(__)m


スッキリ素敵なリンクカード♪勿論当方のテンプレートでそのままご利用頂けますが、
ダークテーマ付き『 home_resp 』『 youth_resp 』の暗色時、
暗色テンプレート『 dt21_ryo-3c 』『 ryo-2c 』
のみ shadow部分が透過しないため、追加のCSSが数行必要になります。
上記リンクカード配布先の JavaScript 及びスタイルシートを導入後、更に下記のスタイルを編集枠下段に追記して頂く事で綺麗に表示出来るようになります。
(記事表示部分が白以外の背景色の方も是非追加して下さい。)


① home_resp, youth_resp, dt21_ryo-3c, ryo-2c 共通
(記事部分の背景色が白以外など、その他のテンプレートでも適用可。)
.link-card{
border: 1px solid rgba(170,170,170,0.5);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);
}
.link-card:hover{
box-shadow: 0px 7px 5px 1px rgba(0,0,0,0.18);
}
.link-card-image img{
border: 1px solid rgba(255,255,255,0.3);
box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.3);
}


② home_resp, youth_resp は下記を追加(①+②)
body.dark .link-card-text, body.dark .link-card-footer{
color: #ccc;
}
body.dark .link-card blockquote{
border: 0;
}


③ dt21_ryo-3c, ryo-2c は下記を追加(①+③)
.link-card-text, .link-card-footer{
color: #ccc;
}


④ その他、OSダークモード利用可能テンプレの場合は下記を追加(①+④)
/* OS ダークモード時の文字色 */
@media (prefers-color-scheme: dark) {
.link-card-text, .link-card-footer{
color: #ccc;
}
} /* ここまでを追加 */

ダーク‐モード【dark mode】とは?

スマートフォンやパソコンの操作画面を、黒や濃紺を基調とした配色に変更する機能。iOS・アンドロイド・Windows 10などのオペレーティングシステムに搭載され、画面のまぶしさを軽減する効果があるとされる。www.weblio.jp



元記事に「ブログテンプレートにLazyload本体の設定が必要」とございますが、類似の画像遅延Scriptを導入しておりますので、そのままご利用頂けます。
ただ、カスタマイズ自由では有りますが、完全ノーサポートという事ですのでご了承下さいませ。
(当方テンプレートに導入後の不具合はご連絡下さい。確認させて頂きます。m(__)m)


リンクカード作者 ぼっちん様のブログ
確認等補助 徳川たぬこ様のブログ

Comments

おはようございます

akiさん、おはようございます ^^

こちらの記事リンクから、弊ブログ記事への訪問が昨夜から今朝に掛けて相当数ありまして「おやぁ?」っと覗かせて戴きましたら、なんと、弊「リンクカード」をこんなにも詳細にご紹介くださってて驚きました、どうもありがとうございます ^^
非常に癖のある「リンクカード」ですから「誰にでも簡単に使えるとはほど遠い代物」です(爆)
そして、想定外の「ダークモード対応」へのカスタマイズ指南も書かれていて、さすがはakiさんっと感心させられました(笑)

もしかして、弊リンクカードのカスタマイズ質問がakiさんに寄せられてしまうことが懸念されますが、あくまでも「自己責任利用」を謳っておりますから、あまりご無理なさらないよう願います m(_ _)m
2020-11-08-08:33  ぼっちん
[ 返信 * 編集 ]

aki

Re: ぼっちん 様へ

こんにちは。
記事を少し追加しました。
当方のブログに付帯しているのは任意切り替え可能なダークテーマなため、OS由来のダークモードはまた別物なので…^^;。
ダークモードが利用可能なテンプレート(多分、現行FC2ブログテンプレではAkira氏のものしか無いのでは?)で使う場合の追加スタイルを④として掲載致しました。
表示スタイルだけの話なので、これで問題無いと思います。(^-^)

カスタマイズ好きな方に、沢山使ってもらえると良いですね♪
素敵なカードを公開して頂き、有難うございます。
2020-11-08-14:43  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-11-16-08:39  -
[ 返信 ]

aki

Re: - 様へ

どうぞご自由にお使い下さいませ。(^-^)
2020-11-16-11:53  aki
[ 返信 * 編集 ]

確認お願いできますか?

akiさん、こんばんは☆

シークレット状況下でのコメントの件、色々とご検証頂いているようでありがとうございます。お疲れ様です。

昨日教えていただいたCssの再修正やってみました。私が見たところ大丈夫そうなのですが、ご確認いただければ助かります。

また、アイコン変えてます…
2020-11-17-21:27  やぴこ
[ 返信 * 編集 ]

aki

Re: やぴこ 様へ

先程確認がてら伺いました。
沢山テストさせて頂き有難うございました!

可愛いアイコン、大丈夫のようですね。(^-^)
未熟な作者なもので色々お手間をお掛けして…ホントに申し訳無いです。
おかしいな~と思われましたらご連絡下さいね。
2020-11-17-23:20  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-11-21-22:47  -
[ 返信 ]

aki

Re: - 様へ

いえいえ、私も理解出来ていない部分が有りましたので、勉強したいと思います。(^-^)
現行か変更かという、結論を導くような記事では無いと思いますが、何かの参考になれば良いですね。
2020-11-21-23:21  aki
[ 返信 * 編集 ]






非公開コメント