F-light ユーザーでブログカードを導入されている方をよく見かけますが、ダークモード対応がちゃんとされていないのが少し気になっていました。やっぱりモード切替に連動してカードの明暗デザインも切り替わった方がいいですよね?
ちょうど先日すたすた式さんがいい感じのブログカード作成ブックマークレットを公開されていましたので、今回はこちらのブックマークレットと F-light に最適化した CSS コードを紹介したいと思います。
すたすた式ブログカード(カード型リンク)を作成するブックマークレット以前使用していたブックマークレットが動かなくなったので作ってみました。ブックマークレットのクリックでクリップボードにコピーするバージョンも作りました。https://sutasutashiki.blogspot.com/2023/03/Bookmarklet-to-create-blog-cards.html
ちなみに当ブログで運用している↑このブログカードはバグ取りの日々さんのジェネレータ を ふじろじっく独自仕様に改造したもので生成しています。(ふじろじっく専用につき公開はしませんのであしからず…)
F-light 仕様ブログカード
こちらが今回紹介する F-light カスタムブログカードです。デザインは The other way round さんの「余白なし」デザインをベースにしています。(一番人気ありそうな感じだったので)
オリジナルデザインからの変更点
- モード切替に連動して背景と文字色が変わります。
- 横幅を 500px → 600px に広げました。
- 概要文を1行 → 3行に増やしました(スマホでは1行になります)。
- 中央寄せにしました。
ブックマークレット
「ブログカードを作成しました」というインフォメーションを画面中央に表示するタイプです。リンクをクリックするだけでクリップボードにコピーされるので、わざわざ Ctrl + C する手間が省けていいのではないかと。
ブックマークレットの登録
ブログカード作成 ← このリンクをブックマークバー(お気に入りバー)にドラッグ&ドロップして登録してください。名前はブックマーク編集で変更できます。
ドラッグ&ドロップ 出来ない場合は、適当なページのブックマークを作成して URL 欄に下記の JavaScript コードを上書きしてください。
コード
javascript:(()=>{;/*!@see{@link https://vanillaice000.blog.fc2.com/blog-entry-1074.html}@see{@link https://www.granfairs.com/blog/staff/blogcard-by-bookmarklet}Copyright:2023 sutajp | The copyToClipboard function is: MIT license | https://sutasutashiki.blogspot.com/p/mit-license.html */;const e={},t=document.getElementsByTagName("meta");for(const o of t)"og:title"==o.getAttribute("property")?e.title=o.getAttribute("content"):"og:image"==o.getAttribute("property")?e.image=o.getAttribute("content"):"og:description"==o.getAttribute("property")&&(e.description=o.getAttribute("content"));if(null==e.title&&(e.title=document.title),null==e.description)for(const o of t)"description"==o.getAttribute("name")&&(e.description=o.getAttribute("content"));let o;e.url=document.URL,e.domain=location.host;const r=`<div class="blogcard-text"><p class="blogcard-title">${e.title}</p><blockquote cite="${e.url}"><p class="blogcard-description">${e.description}</p></blockquote></div>`,a=`<div class="blogcard-footer"><img src="https://www.google.com/s2/favicons?domain=${e.url}" alt="ファビコン" width="16" height="16" loading="lazy"/>${e.domain}</div>`;if(null==e.image)o=`<figure class="blogcard blogcard-hasnoimage"><a href="${e.url}" target="_blank" rel="noopener noreferrer" aria-label="%E8%A8%98%E4%BA%8B%E8%A9%B3%E7%B4%B0%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E5%88%A5%E3%82%BF%E3%83%96%E3%81%A7%E9%96%8B%E3%81%8F"><div class="blogcard-content">${r}</div>${a}</a></figure>`;else{let t=`<div class="blogcard-image"><div class="blogcard-image-wrapper"><img src="${e.image}" alt="${e.title}" width="100" height="100" loading="lazy"/></div></div>`;o=`<figure class="blogcard"><a href="${e.url}" target="_blank" rel="noopener noreferrer" aria-label="%E8%A8%98%E4%BA%8B%E8%A9%B3%E7%B4%B0%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E5%88%A5%E3%82%BF%E3%83%96%E3%81%A7%E9%96%8B%E3%81%8F"><div class="blogcard-content">${t}${r}</div>${a}</a></figure>`}!async function(e){try{const t=document.getElementsByTagName("body")[0];t.focus(),await navigator.clipboard.writeText(e),t.blur();const o=document.createElement("style"),r="@media (prefers-color-scheme:dark){.info-create-blogcard{background:#2b2a33!important;color:#fbfbfe!important}}.info-create-blogcard{font-size:16px;border:solid;border-radius:10px;position:fixed;top:30%;left:50%;transform:translateX(-50%);background:#f9f9fb;color:#15141a;padding:16px;z-index:999;opacity:0;animation:fadeOut 2.5s ease 0s 1 normal}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}";o.insertAdjacentText("afterbegin",r),document.head.append(o);const a='<div id="infoCreateBlogCard" class="info-create-blogcard">ブログカードを作成しました</div>';t.insertAdjacentHTML("afterbegin",a),setTimeout((function(){document.getElementById("infoCreateBlogCard").remove()}),3e3)}catch(e){return alert("コピーに失敗しました"),void console.error("コピーに失敗しました")}}(o)})();void(0);
CSS の追加
こちらの CSS をテーマの HTML 編集で /*==== ユーザー カスタム CSS ====*/
の直下にコピペして下さい。
すでに The other way round さんのブログカードを使われている場合は、CSS を入れ替えるだけでダークモード対応出来るかもしれません。
/* カード全体像 */ .blogcard { position: relative; width: 100%; max-width: 600px;/* 最大横幅 */ margin: 0 auto 30px; border-radius: 2px; box-shadow: 0px 20px 40px var(--shadow); background: var(--light-bg); transition: .2s; } .blogcard > a { color: var(--color); text-decoration: none; } .blogcard-content { display: flex; justify-content: space-between; } /* 画像 */ .blogcard-image { width: 30%; } .blogcard-image-wrapper { position: relative; padding: 100% 0 0; } .blogcard-image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .blogcard-text { width: 70%; padding: 5px 10px; } /* タイトル */ .blogcard-title { margin: 0 !important; font-weight: bold; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; max-height: calc(13px * 1.4 * 1); overflow: hidden; } /* 引用 */ .blogcard blockquote { position: static; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font-style: normal; box-shadow: none!important; } .blogcard blockquote::before, .blogcard blockquote::after { content: none; } /* 記事概要 */ .blogcard-description { margin: .5em 0 !important; font-size: 12px; line-height: 1.5 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--dark-kcolor); } /* フッター(元記事サイト名とリンク) */ .blogcard-footer { position: absolute; right: 0; bottom: 3px; width: 70%; padding: 0 10px; font-size: 11px; line-height: 1.2; } .blogcard-footer img { margin-right: 5px; vertical-align: middle; } /* has no image */ .blogcard-hasnoimage .blogcard-text { width: 100%; } .blogcard-hasnoimage .blogcard-footer { position: static; width: 100%; padding: 10px 20px; } @media screen and (min-width: 375px) { .blogcard-title { font-size: 14px; -webkit-line-clamp: 2; max-height: calc(15px * 1.4 * 2); } } @media screen and (min-width: 415px) { .blogcard-text { padding: 10px 20px; } .blogcard-title { font-size: 15px; -webkit-line-clamp: 3; max-height: calc(15px * 1.4 * 3); } .blogcard-description { margin: 1em 0 !important; font-size: 13px; } .blogcard-footer { bottom: 8px; padding: 0 20px; font-size: 12px; } } @media screen and (max-width: 600px) { .blogcard-description { -webkit-line-clamp: 1; } } /* カードマウスホバー */ .blogcard:hover { box-shadow: 0 10px 10px 2px var(--shadow); } .blogcard:hover > a { color: var(--color); text-decoration: none !important; }
ブックマークレットの使用方法
カードを作成したいサイトにて、ブックマークバーの「ブログカード作成」リンクをクリックすると、生成された HTML コードがクリップボードにコピーされますので、記事編集(HTML ビュー)画面で Ctrl + V で貼り付けて下さい。
コメントを投稿
別ページに移動します