「CSS」タグの記事が4件件あります

以前の記事で、DocusaurusサイトにDecap CMSを導入した方法について解説しました。導入によってコンテンツ更新の基盤は整いましたが、実際に日々利用する中で、特にモバイル環境での使い勝手や定型入力の効率化に改善の余地があると感じていました。

この記事では、それらの課題を解決するためにstatic/admin/config.ymlとstatic/admin/index.htmlに施した、より実践的なカスタマイズの内容を紹介します。

また、本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

• config.ymlの最適化: 入力の手間を減らし、ミスを防ぐための設定
• index.htmlの改造: モバイルでの操作性を向上させるCSSとJavaScriptの追加

これらのチューニングによって、PCはもちろん、スマートフォンからでも快適に記事を更新できる環境を構築しました。GitベースのCMSが持つカスタマイズ性の高さを活かした一例として、参考になれば幸いです。

シェアボタンを実装する​

このサイトの各記事に、SNSで共有するためのシェアボタンを設置しました。この記事では、その実装プロセスと、背景にある技術的な判断などについて記録します。

完成したコンポーネントの特長は、ページのタイトルとURLを自動で取得する点です。これにより、一度設置すれば、記事ごとに特別な設定を追加する必要がなく、メンテナンスの手間がかかりません。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

この記事では、Docusaurusサイト内に、国内外のニュースサイトを一覧できる「ニュースページ」を実装した際の整理をします。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

1. ページの目的と主要機能​

個人的な情報収集の起点として、信頼できるニュースソースへ素早くアクセスできるページの構築が目的。すべて静的ページとしてビルドし、高速な表示や利便性、メンテナンス性を重視しました。。

この記事では、Docusaurusサイトのナビゲーションバーにアイコンや特定の記号を表示させるための主要な編集パターンを3つ整理します。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

1. テキスト・記号による表示​

ナビゲーションアイテムにアイコンや記号を表示する最も直接的かつ簡単な方法。Docusaurusの設定ファイル内でlabelプロパティに直接記述することで実現。