EDIT

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

｜2023/09/06
アイキャッチ

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 さんの「余白なし」デザインをベースにしています。(一番人気ありそうな感じだったので)

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

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

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

ファビコンvanillaice000.blog.fc2.com

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

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