Docusaurus で画像にデフォルトで枠線をつけたい

はじめに

Docusaurusは、ReactとMarkdownを使用して、ドキュメントサイトを簡単に作成できるツールです。

個人的な悩みとして、画像を挿入する際に、背景色がウェブサイトの背景色と同化してしまい、境界が不明瞭になることがあります。

これまでは枠線を手動で画像に加えていましたが、作業が煩雑になってきたため、今後はデフォルトで画像に枠線が表示されるよう設定を変更することにしました。

前提

この記事はDocusaurusの経験者向けに書かれており、基本的なインストール手順はカバーしていません。
初心者の方は、日本語で詳しく解説された以下の記事を参照してください。

変更する部分

1. src/css/custom.cssを編集
2. docusaurus.jsまたはdocusaurus.tsを編集

---

src/css/custom.cssを編集

👇️custom.cssに下記コードを追加します。

custom.css

/* すべての画像に枠線を追加 */  
img {  
  border: 2px solid #000; /* 枠線の色と太さを設定します（ここでは黒色で2pxの枠線） */  
  border-radius: 8px; /* 枠線の角を丸くします（オプション） */  
}  

/* 特定の画像に枠線を適用しない */  
img.no-border {  
  border: none;  
  padding: 0;  
  border-radius: 0;  
}  

---

👇️画像は一例ですが、すべての画像に自動で枠線つくように設定されました👏

---

👇️しかし、ナビゲーションにいる可愛い恐竜くんにも枠線がついてしまいました。
これを取り除いてあげるのが次の設定です。

---

docusaurus.jsまたはdocusaurus.tsを編集

👇️docusaurus.jsのnavbarのlogoに設定を追加します。

これでナビゲーションの恐竜くんには枠線がつかないように設定されます。

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      // Replace with your project's social card
      image: 'img/docusaurus-social-card.jpg',
      navbar: {
        title: 'My Site',
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.svg',
+         className: 'no-border'
        },
      },
      footer: {...},
      prism: {...},
    }),
};

---

👇️枠線が取れました。
先程よりも笑顔が素敵です😃

まとめ

CSSの追加設定により、Docusaurusの画像にデフォルトで枠線を追加する方法を解説しました。
設定変更を行う際に、CopilotやGPT-4oを活用することで、スムーズに目的を達成することができました。
この記事を通じて、読者の皆さんと私がより効率的にウェブサイトのビジュアルを改善できることを願っています。