このサイトはWordPressでつくられているんですが、外部サイトや内部リンクをテキストリンクだけじゃなく、ブログカードでも掲載したいなと思い、プラグインやカスタマイズの仕方などいろいろ調べるとブログカードと呼ばれるプラグインは多く存在してましたが、どれもしっくりこないものだったので自作しようかなと考えていたところ、よさそうなプラグインが見つかったのでご紹介。

CHANTO Inc | WordPressのブロックエディタ用ブログカードを作ってみた。

はじめまして、CHANTO株式会社です。わたしたちは、デザインという手段を使って、あなたの抱える愛をカタチにするお仕事をしています。愛なんて強い表現をしてしまいましたが・・・CHANTOは、それほどまでに大切で愛おしいプロダクトや人が溢れかえる世の中を目指しています。

いくつか試したプラグインの中で一番使いやすく、シンプルでしたので利用させていただきました。

プラグインを提供してくださった「CHANTO株式会社」さまに感謝です。

CHANTO Inc

はじめまして、CHANTO株式会社です。わたしたちは、デザインという手段を使って、あなたの抱える愛をカタチにするお仕事をしています。愛なんて強い表現をしてしまいましたが・・・CHANTOは、それほどまでに大切で愛おしいプロダクトや人が溢れかえる世の中を目指しています。

最近はChromeを卒業してArcブラウザを使っているんですが、ブックマークレットをサポートしていないらしく、諦めかけていたんですが、なんとブックマークレットを拡張機能に変換してくれるサービスを発見して、無事にブックマークレットを使うことができたので紹介。

ブックマークレットを使う手順

1. https://sandbox.self.li/bookmarklet-to-extension/ にアクセス
2. Name、Descriptionを入力
3. ブックマークレットをドラック＆ドロップして Generate Extension を押下
4. 拡張機能が生成され、zipがダウンロードされるので解凍する
5. Arcブラウザのメニューから Extensions > Manage Extensions を選択
6. Manage Extensions の デベロッパーモード をオンにする
7. 画面上部の「パッケージ化されていない拡張機能を読み込む」を押下し、解凍したフォルダを選ぶ

これで無事にArcでもブックマークレットが使えるようになりました。

Arc from The Browser Company

Experience a calmer, more personal internet in this browser designed for you. Let go of the clicks, the clutter, the distractions.

国内外業種問わず、公開してくれているデザインシステムを集めてみました。

Apple – Human Interface Guidelines

URL：https://developer.apple.com/jp/design/human-interface-guidelines/

Google – Material Design

URL：https://m3.material.io/

デジタル庁 – Design System

URL：https://design.digital.go.jp/

SmartHR – SmartHR Design System

URL：https://smarthr.design/

カオナビ – kaonavi Brand Deck

URL：https://brand.kaonavi.jp/

Adobe – Spectrum

URL：https://spectrum.adobe.com/

Microsoft – Fluent2

URL：https://fluent2.microsoft.design/

DENSO – D-EXPERIENCEDESIGN SYSTEM

URL：https://ux.system.denso.info/

Audi AG – Audi CI Portal

URL：https://www.audi.com/ci/en/renewed-brand.html

CyberAgent – Spindle

URL：https://spindle.ameba.design/

LINEヤフー – LINE Design System

URL：https://designsystem.line.me/

GitHub – Primer

URL：https://primer.style/

Salesforce – Lightning Design System

URL：https://www.lightningdesignsystem.com/

Mozilla – Mozilla Protocol

URL：https://protocol.mozilla.org/

Ant Group – Ant Design

URL：https://ant.design/

---

世界的にも有名な大企業がずらーっと並んでますが、その他にもまだまだたくさん公開してくれている企業さんはあるので、調査を続けたいと思います。（こちらでアップデートしていきます）

公開してくれているのは大変勉強になるので感謝でしかありません。