テーマの役割

Omeka Sのテーマは、公開サイトの外観とレイアウトを制御するテンプレート・スタイルシートの集合です。テーマを切り替えることで、同じデータを異なるデザインで表示できます。

Omeka Sのテーマシステムは、Laminas（旧Zend Framework）のビューレイヤーに基づいています。テーマは主に以下の要素で構成されます。

  • ビューテンプレート（.phtml）: HTML出力を生成するPHPテンプレートファイル
  • CSSファイル: スタイルシート
  • JavaScriptファイル: フロントエンドスクリプト
  • 設定ファイル（config/theme.ini, theme.config.php）: テーマのメタ情報と設定

テーマの選択と一覧

Omeka Sには複数の公式テーマが用意されていますが、コミュニティが開発したテーマも数多く存在します。筆者はOmeka Sのテーマの一覧を視覚的に確認するページを作成しました。でテーマの一覧を視覚的に確認できるページを公開しています。また、このページを作成するプログラムについてもOmeka Sのテーマの一覧を視覚的に確認するページを作成するプログラムで紹介しています。

筆者が開発したBootstrap 5テーマ

筆者はBootstrap 5を用いたOmeka Sテーマを開発・公開しています。

Bootstrap 5ベースのため、レスポンシブデザインに対応しており、モバイルデバイスでの閲覧にも適しています。

Mappingモジュール対応

Bootstrap 5テーマでMappingモジュールに対応した経緯については【Omeka S Theme】Bootstrap 5テーマのMappingモジュール一部対応で紹介しています。

日本語検索に対応したテーマ

日本語検索の不具合を回避するFoundation Sテーマを作成しました。[Omeka S]日本語検索の不具合を回避するFoundation Sテーマを作成しました。](/ja/posts/42f725b56dac64/)で詳細を紹介しています。

テーマの多言語化

テーマの多言語化対応についてはOmeka Sテーマの多言語化で解説しています。日本語と英語の両方に対応したサイトを構築する場合に参考になります。

Google Analytics 4の追加

サイトのアクセス解析のために、Google Analytics 4（GA4）のgtag.jsを追加する方法についてOmeka SにGoogle Analytics 4 gtag.jsを追加するで解説しています。

なお、GoogleAnalyticsモジュールの不具合に遭遇した場合の対応についてはOmeka S GoogleAnalyticsモジュールの不具合対応をご覧ください。

テーマのディレクトリ構造

標準的なテーマのディレクトリ構造は以下の通りです。

t├││││││├││└h───e───mea├│├│└c├└v├││││├│└ss───o──i───/s───n──e───mefwytc└j└i└itt/c├├├└l└o└-/s─s─m─ghho────a─m─ts─/─g─/eem────y─e─h//mmmokessleeobhfnulas├││└mtco..nleoata/i──eyrgic/oaov/yt──/lionocdtioeep.inkeegu/i├└p└.tpf-rratt──a─c.nil..t.e──g─sjggappipmess.yhhoh/bs/spottntrhhhumm.moooptllplwww/hs..teppm.hhlptthmmtllml

CSSカスタマイズ

テーマ全体のカスタマイズが不要で、スタイルの微調整だけを行いたい場合は、サイトの設定画面からCSSを追加するのが最も簡単です。

サイト設定のCSSエディタ

サイトの「Theme」設定画面で「CSS Editor」にCSSを記述すると、そのサイトにのみ適用されます。

/* 日本語フォントの設定 */
body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
                 "Hiragino Sans", Meiryo, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

/* アイテム一覧のカード表示 */
.resource-list .resource {
    display: inline-block;
    width: calc(33.33% - 20px);
    margin: 10px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    vertical-align: top;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .resource-list .resource {
        width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .resource-list .resource {
        width: 100%;
        margin: 10px 0;
    }
}

子テーマの作成

既存のテーマを直接修正すると、テーマのアップデート時に変更が上書きされてしまいます。「子テーマ（Child Theme）」として新しいテーマを作成し、親テーマのテンプレートを必要な部分だけオーバーライドする方法が推奨されます。

子テーマの作成手順

  1. テーマディレクトリにフォルダを作成
mkdir -p /var/www/html/omeka-s/themes/my-custom-theme
cd /var/www/html/omeka-s/themes/my-custom-theme
  1. config/theme.ini を作成
[info]
name = "My Custom Theme"
author = "Your Name"
description = "Defaultテーマをベースにしたカスタムテーマ"
version = "1.0.0"
license = "GPL-3.0-or-later"
omeka_version_constraint = "^4.0.0"
parent_theme = "default"

parent_theme に親テーマのディレクトリ名を指定することがポイントです。子テーマに存在しないテンプレートやアセットは、親テーマのものが使用されます。

  1. 必要なテンプレートだけをオーバーライド

変更したいテンプレートだけを子テーマの view/ ディレクトリに配置します。

  1. ファイルの所有者を変更
sudo chown -R www-data:www-data /var/www/html/omeka-s/themes/my-custom-theme

Advanced Searchモジュール対応テーマ

Advanced Searchモジュールを使用する場合、テーマ側での対応が必要なことがあります。筆者はOmeka S: Advanced Searchモジュールに対応したテーマを探すで対応テーマの一覧と選択のポイントを紹介しています。

テーマの更新とメンテナンス

テーマの定期的な更新も重要です。筆者はOmeka Sのテーマ更新とモジュール改修でテーマとモジュールの更新作業について紹介しています。

まとめ

本章では、Omeka Sのテーマシステムの構造、テーマの選択、CSSカスタマイズ、子テーマの作成方法、Google Analyticsの統合、多言語化について解説しました。

テーマのカスタマイズにより、デジタルコレクションの視覚的なプレゼンテーションを自在に制御できます。まずはCSSカスタマイズから始め、必要に応じて子テーマの作成に進むことをお勧めします。筆者が公開しているBootstrap 5テーマをベースにカスタマイズするのも一つの選択肢です。

次章では、Omeka Sに関する有用なリソースを紹介します。

関連記事