【F-light】おすすめブログカード作成ブックマークレットの紹介

2024/10/05
アイキャッチ

F-light ユーザーでブログカードを導入されている方をよく見かけますが、ダークモード対応がちゃんとされていないのが少し気になっていました。やっぱりモード切替に連動してカードの明暗デザインも切り替わった方がいいですよね?

ちょうど先日すたすた式さんがいい感じのブログカード作成ブックマークレットを公開されていましたので、今回はこちらのブックマークレットと F-light に最適化した CSS コードを紹介したいと思います。

ファビコンすたすた式
サムネイル
ブログカード(カード型リンク)を作成するブックマークレット
以前使用していたブックマークレットが動かなくなったので作ってみました。ブックマークレットのクリックでクリップボードにコピーするバージョンも作りました。
https://sutasutashiki.blogspot.com/2023/03/Bookmarklet-to-create-blog-cards.html

ちなみに当ブログで運用している↑このブログカードはバグ取りの日々さんのジェネレータふじろじっく独自仕様に改造したもので生成しています。(ふじろじっく専用につき公開はしませんのであしからず…)

CONTENTS

F-light 仕様ブログカード

こちらが今回紹介する F-light カスタムブログカードです。デザインは The other way round さんの「余白なし」デザインをベースにしています。(一番人気ありそうな感じだったので)

ブログカード作成ブックマークレットをアップデートしました

ブログカード作成ブックマークレットをアップデートしました

FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...

オリジナルデザインからの変更点

  • モード切替に連動して背景と文字色が変わります。
  • 横幅を 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 で貼り付けて下さい。