コンテンツにスキップ

外観設定

外観設定により、管理者はすべてのページの HTML <head> に自動的に注入される複数の外部 CSS スタイルシートを設定できます。これにより、コアコードを変更することなく、サイト全体の外観をカスタマイズできます。Moodle の外観カスタマイズ機能と同様です。

概要

Section titled “概要”

外観設定は以下を提供します：

  • 外部 CSS スタイルシート：複数のスタイルシート URL を追加
  • 順序制御：CSS カスケードの優先順位を制御するためにスタイルシートを並べ替え
  • URL 検証：HTTP/HTTPS URL の自動検証
  • 簡単な管理：シンプルなインターフェースを通じてスタイルシートを追加、削除、並べ替え
  • グローバル適用：スタイルシートはすべてのページに自動的に適用されます

外観設定へのアクセス

Section titled “外観設定へのアクセス”

外観設定ページにアクセスする方法は2つあります：

方法1：管理者ダッシュボード経由

Section titled “方法1：管理者ダッシュボード経由”
  1. 管理者としてログイン
  2. 上部ナビゲーションの サイト管理 に移動
  3. サイト管理メニューの “外観” タブをクリック
  4. 外観セクションの “追加 CSS” をクリック
  5. /admin/appearance の外観設定ページに移動します

方法2：直接ナビゲーション

Section titled “方法2：直接ナビゲーション”
  1. 管理者としてログイン
  2. ブラウザで直接 /admin/appearance に移動

CSS スタイルシートの追加

Section titled “CSS スタイルシートの追加”

新しい CSS スタイルシートを追加するには：

  1. 外観設定ページに移動
  2. “スタイルシートを追加” ボタンをクリック
  3. テキスト入力フィールドにスタイルシート URL を入力
  4. URL は有効な HTTP または HTTPS URL である必要があります
  5. “変更を保存” をクリックして適用

URL 形式

Section titled “URL 形式”

スタイルシート URL は以下である必要があります：

  • プロトコル：http:// または https:// を使用（HTTPS 推奨）
  • 形式：有効な URL 形式であること
  • アクセシビリティ：公開アクセス可能であること（認証不要）
  • CORS：必要に応じて適切な CORS ヘッダーを持つこと

URL の例：

https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css
https://example.com/custom-theme.css

URL 検証

Section titled “URL 検証”

システムは複数のレベルで URL を検証します：

  1. フィールドレベルの検証：JavaScript URL コンストラクターを使用して URL 形式をチェック
  2. サーバーサイドの検証：保存前にすべての URL を検証
  3. クライアントサイドの検証：フォームでのリアルタイムフィードバック

無効な URL はエラーメッセージを表示します：“有効な HTTP または HTTPS URL である必要があります”

スタイルシートの並べ替え

Section titled “スタイルシートの並べ替え”

スタイルシートの順序は、CSS カスケードの優先順位にとって重要です。後のスタイルシートは前のスタイルシートを上書きできます。

スタイルシートを上に移動

Section titled “スタイルシートを上に移動”

リスト内でスタイルシートを前に移動するには：

  1. 移動したいスタイルシートを見つける
  2. スタイルシートの横にある “上” ボタン（↑）をクリック
  3. スタイルシートが1つ上の位置に移動します
  4. “変更を保存” をクリックして新しい順序を適用

スタイルシートを下に移動

Section titled “スタイルシートを下に移動”

リスト内でスタイルシートを後に移動するには：

  1. 移動したいスタイルシートを見つける
  2. スタイルシートの横にある “下” ボタン（↓）をクリック
  3. スタイルシートが1つ下の位置に移動します
  4. “変更を保存” をクリックして新しい順序を適用

ボタンの状態

Section titled “ボタンの状態”
  • 上ボタン：最初のスタイルシートで無効（これ以上上に移動できない）
  • 下ボタン：最後のスタイルシートで無効（これ以上下に移動できない）
  • アクティブボタン：中間のスタイルシートで有効

CSS カスケードの優先順位

Section titled “CSS カスケードの優先順位”

スタイルシートは設定された順序で読み込まれます：

  1. 最初のスタイルシート：最初に読み込まれ、優先順位が最も低い
  2. 後続のスタイルシート：順番に読み込まれ、それぞれが前のスタイルシートを上書きできます
  3. 最後のスタイルシート：最後に読み込まれ、優先順位が最も高い

これにより、以下が可能になります：

  • 基本スタイルを最初に読み込む：基盤スタイルシート（例：Bootstrap）
  • テーマの上書きを2番目に読み込む：テーマ固有のスタイル
  • カスタマイズを最後に読み込む：サイト固有のカスタマイズ（最高の優先順位）

カスケードの例

Section titled “カスケードの例”
1. Bootstrap CSS（基本フレームワーク）
2. テーマ CSS（テーマの上書き）
3. カスタム CSS（サイト固有のカスタマイズ）← 最高の優先順位

スタイルシートの削除

Section titled “スタイルシートの削除”

スタイルシートを削除するには：

  1. 削除したいスタイルシートを見つける
  2. スタイルシートの横にある “削除” ボタン（ゴミ箱アイコン）をクリック
  3. スタイルシートがリストから削除されます
  4. “変更を保存” をクリックして適用

空の状態

Section titled “空の状態”

スタイルシートが設定されていない場合：

  • 空の状態メッセージ：“スタイルシートが設定されていません。‘スタイルシートを追加’ をクリックして追加してください。”
  • 追加ボタン：最初のスタイルシートを追加するために利用可能
  • 影響なし：追加のスタイルシートなしでページは正常に読み込まれます

スタイルシートの読み込み方法

Section titled “スタイルシートの読み込み方法”

読み込み順序

Section titled “読み込み順序”

スタイルシートは、この順序で HTML <head> に注入されます：

  1. Mantine コアスタイル：基本フレームワークスタイル（@mantine/core/styles.css インポート経由）
  2. Highlight.js スタイルシート：コードハイライトテーマ（テーマ対応）
  3. 追加の CSS スタイルシート：設定されたスタイルシート（設定された順序で）← 新規
  4. ページ固有のスタイル：ページ固有のスタイル

HTML 構造

Section titled “HTML 構造”

スタイルシートは HTML に次のように表示されます：

<head>
  <!-- Mantine スタイル -->
  <link rel="stylesheet" href="/mantine-styles.css" />


  <!-- Highlight.js スタイル -->
  <link rel="stylesheet" href="/highlight-theme.css" />


  <!-- 設定されたスタイルシート -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://example.com/custom.css" />


  <!-- ページコンテンツ -->
</head>

ベストプラクティス

Section titled “ベストプラクティス”

スタイルシートの選択

Section titled “スタイルシートの選択”
  • CDN を使用：信頼性とパフォーマンスのために CDN ホストのスタイルシートを優先
  • HTTPS のみ：セキュリティのために HTTPS URL を使用
  • 圧縮版を使用：パフォーマンス向上のために圧縮された CSS ファイルを使用
  • バージョン固定：安定性のためにバージョン付き URL の使用を検討

組織化

Section titled “組織化”
  • 論理的な順序：スタイルシートを一般的なものから特定のものへ順序付け
  • ドキュメント化：各スタイルシートの機能についてメモを保持
  • テスト：デプロイ前にスタイルシートの組み合わせをテスト
  • バックアップ：スタイルシート設定をドキュメント化

パフォーマンス

Section titled “パフォーマンス”
  • 数を制限：スタイルシートを追加しすぎない（ページ読み込み時間に影響）
  • 順序を最適化：最も重要なスタイルシートを最初に配置
  • 影響を監視：スタイルシート追加後のページ読み込みパフォーマンスを確認
  • 非同期を使用：重要でないスタイルシートの非同期読み込みを検討（将来の機能）

メンテナンス

Section titled “メンテナンス”
  • 定期的な確認：定期的に未使用のスタイルシートを確認して削除
  • URL を更新：スタイルシート URL を最新の状態に保つ
  • 変更をテスト：スタイルシートを追加または並べ替えた後の外観をテスト
  • バージョン管理：ドキュメントでスタイルシートの変更を追跡

トラブルシューティング

Section titled “トラブルシューティング”

スタイルシートが読み込まれない

Section titled “スタイルシートが読み込まれない”

スタイルシートが読み込まれない場合：

  1. URL がアクセス可能であることを確認（ブラウザで開く）
  2. URL が HTTP または HTTPS プロトコルを使用していることを確認
  3. CORS ヘッダーがドメインからの読み込みを許可していることを確認
  4. ブラウザコンソールで読み込みエラーを確認
  5. スタイルシートが保存され、ページが更新されていることを確認

スタイルが適用されない

Section titled “スタイルが適用されない”

スタイルが適用されない場合：

  1. スタイルシートの順序を確認（後のスタイルシートが前のスタイルシートを上書き）
  2. CSS の特異性を確認（スタイルに高い特異性が必要な場合があります）
  3. ブラウザ開発者ツールで CSS の競合を確認
  4. スタイルシートが読み込まれていることを確認（ネットワークタブを確認）
  5. スタイルシートの内容が正しいことを確認

無効な URL エラー

Section titled “無効な URL エラー”

無効な URL エラーが発生する場合：

  1. URL が http:// または https:// で始まっていることを確認
  2. URL 形式が正しいことを確認
  3. URL のタイプミスを確認
  4. ブラウザで URL をテストしてアクセス可能であることを確認
  5. URL を壊す可能性のある特殊文字を削除

順序が保持されない

Section titled “順序が保持されない”

スタイルシートの順序が保持されない場合：

  1. 並べ替え後に “変更を保存” をクリックしたことを確認
  2. ページを更新して更新された順序を確認
  3. 変更がデータベースに保存されたことを確認
  4. 管理者権限があることを確認
  5. システムログでエラーを確認

パフォーマンスの問題

Section titled “パフォーマンスの問題”

ページ読み込みが遅い場合：

  1. スタイルシートの数を減らす
  2. 圧縮された CSS ファイルを使用
  3. スタイルシートの結合を検討
  4. キャッシング向上のために CDN ホストのスタイルシートを使用
  5. ネットワークタブで読み込みが遅いスタイルシートを監視

関連機能

Section titled “関連機能”
Ask DeepWiki
貢献する コミュニティ スポンサー