このページでは、[[Obsidian Publishの概要|Obsidian Publish]]サイトの見た目と操作感をカスタマイズする方法を説明します。 ## 静的アセット 以下のファイルをサイトに[[コンテンツの公開#ノートの公開|公開]]することで、サイトをカスタマイズできます： - `publish.css` でカスタムCSSを追加 - `publish.js` でカスタムJavaScriptを追加 - `favicon-32x32.png` でファビコンを設定 **注意事項：** - [Publish用のCSS変数](https://docs.obsidian.md/Reference/CSS+variables/Publish/Publish)はドキュメントサイトで確認できます。 - ObsidianはCSSやJavaScriptファイルをサポートしていないため、作成・編集には別のアプリケーションを使用する必要があります。 - `publish.css`と`publish.js`はどちらも保管庫のルートディレクトリ（`/`）に配置する必要があります。 - デフォルトでは、`publish.css`と`publish.js`はファイルエクスプローラに表示されませんが、**パブリッシュによる変更の公開**ダイアログから公開することは可能です。 - `publish.js`でカスタムJavaScriptを使用するには、[[カスタムドメイン]]を設定する必要があります。 ファビコンについては、Obsidian Publishは以下の命名規則をサポートしています。`32`はアイコンのピクセル単位の寸法を表します： - `favicon-32.png` - `favicon-32x32.png` - `favicon.ico` 以下の寸法を1つ以上用意することをお勧めします： - `favicon-32x32.png` - `favicon-128x128.png` - `favicon-152x152.png` - `favicon-167x167.png` - `favicon-180x180.png` - `favicon-192x192.png` - `favicon-196x196.png` ファビコンは、サイトに公開されている限り、保管庫内のどこにでも柔軟に配置できます。 ## コミュニティテーマを使用する サイトにコミュニティテーマを使用するには： 1. OSのデフォルトのファイルエクスプローラで保管庫を開きます。 2. 保管庫の設定フォルダ（デフォルト：`.obsidian`）に移動します。 3. `themes`フォルダを開きます。 4. サイトに使用したいテーマのCSSファイルをコピーします。 5. 保管庫のルートフォルダにファイルを貼り付けます。 6. CSSファイルの名前を`publish.css`に変更します。 7. `publish.css`を[[コンテンツの公開#ノートの公開|公開]]します。 **注意事項：** - 数分以内にスタイルが更新されない場合は、ブラウザのキャッシュを更新してみてください。 - [[サイトの管理#サイトオプションの表示|サイトオプション]]でライトモードとダークモードを切り替えることができます。 - 多くのコミュニティテーマは**Style Settings**を使用したカスタムスタイリングに対応していますが、これらの設定はObsidian Publishでは機能しません。 > [!tip] テーマの開発 > お好みのテーマが見つかりませんか？自分で[Publishテーマを作成](https://docs.obsidian.md/Themes/Obsidian+Publish+themes/Build+a+Publish+theme)する方法を学びましょう。 ## UI機能を有効にする グラフビューや目次など、サイトのUI機能を切り替えることができます。 利用可能なUI機能は、[[サイトの管理#サイトオプションの表示|サイトオプション]]の**リーディングエクスペリエンス**および**コンポーネント**セクションで確認できます。 ### ナビゲーションをカスタマイズ Obsidian Publishでは、Publishの[[ファイルエクスプローラー]]内のファイルやフォルダのナビゲーション順序と表示をカスタマイズできます。ナビゲーションアイテムはデフォルトで公開順に表示されます。公開されていないノートはこのペインに表示されません。 #### ナビゲーションのカスタマイズオプションにアクセスする 1. [[リボン]]で**パブリッシュによる変更の公開**（![[lucide-send.svg#icon]]）を選択するか、[[コマンドパレット]]を開いて**Publish: Publish changes…**と入力します。 2. **パブリッシュによる変更の公開**ダイアログで、**サイトオプションの変更**（![[lucide-cog.svg#icon]]）を選択します。 3. **コンポーネント設定**の下にある**ナビゲーションをカスタマイズ**の横の**管理**ボタンを選択します。 **サイトオプションの変更**ウィンドウの上に**ナビゲーション**という新しいポップアップウィンドウが表示されます。 #### ナビゲーションアイテムを調整する **ナビゲーションプレビュー**というラベルのセクションで、公開コンテンツの表示順序を調整できます。 1. 調整したいフォルダまたはノートを選択します。 2. ノートまたはフォルダを希望する位置まで上下にドラッグします。 3. **ナビゲーション**ウィンドウの右下にある**完了**を選択します。 Publishがナビゲーションの変更をサイトに送信します。 #### ナビゲーションアイテムの表示/非表示 公開済みのノートやフォルダをナビゲーション内に表示したくない場合は、それらのアイテムを非表示にすることができます。 1. 調整したいフォルダまたはノートを選択します。 2. 右クリックして**隠す**を選択します。アイテムが**ナビゲーションプレビュー**から消えます。 3. **ナビゲーション**ウィンドウの右下にある**完了**を選択します。 Publishがナビゲーションの変更をサイトに送信します。 > [!tip] **ナビゲーションプレビュー**タイトルの右側にあるチェックボックスを選択することで、**非表示アイテムを表示**できます。 ## FAQ **ナビゲーション内でファイルをあるフォルダから別のフォルダに移動できますか？** いいえ。フォルダ内のノートのファイルナビゲーション構造は維持される必要があります。フォルダ内（保管庫のルートを含む）でのノートの順序、およびフォルダ内でのフォルダの順序は調整できます。 **「完了」を選択する前に、複数のノートやフォルダの順序を編集できますか？** はい。 **これらの変更を元に戻すにはどうすればよいですか？** - **表示順序**：**ナビゲーションアイテムの表示順番**の横にある**デフォルトに戻す**アイコン（反時計回りの回転矢印）を選択します。ナビゲーションアイテムがアルファベット順に復元されます。 - **非表示状態**：**ナビゲーションからページまたはフォルダを隠す**の横にある**デフォルトに戻す**アイコン（反時計回りの回転矢印）を選択します。非表示のナビゲーションアイテムが表示状態に復元されます。