テーマ | デジタルアーカイブシステムの技術ブログ

Omeka Sでは、テーマを使ってサイトの外観をカスタマイズできます。テーマはサイトごとに異なるものを設定でき、既存のテーマを利用するだけでなく、独自のテーマを開発したりカスタマイズしたりすることも可能です。本章では、テーマの選択・カスタマイズ方法について解説します。

テーマの概要

Omeka Sのテーマは、themesディレクトリに配置されます。各テーマは、PHPテンプレートファイル、CSS、JavaScript、画像などのアセットで構成されています。

テーマの一覧を視覚的に確認できるページが用意されています。詳しくは、Omeka Sのテーマの一覧を視覚的に確認するページを作成しました。を参照してください。また、一覧ページの作成プログラムについては、Omeka Sのテーマの一覧を視覚的に確認するページを作成するプログラムを参照してください。

テーマのインストール

テーマのインストール手順は、モジュールと同様に簡単です。

cd /var/www/html/omeka-s/themes/
git clone https://github.com/omeka/theme-xxx.git
# または
wget https://github.com/omeka/theme-xxx/releases/download/vX.X.X/theme-xxx.zip
unzip theme-xxx.zip

インストール後、管理画面の各サイトの「テーマ」タブから、使用するテーマを選択します。

Bootstrap 5テーマ

筆者が開発したBootstrap 5ベースのOmeka Sテーマは、レスポンシブデザインに対応し、現代的なUI/UXを提供します。

Bootstrap 5テーマの特徴

レスポンシブデザイン: スマートフォン、タブレット、PCに対応
カスタマイズ性: Bootstrap 5のユーティリティクラスを活用
モジュール対応: Mappingモジュールなど主要なモジュールに対応

MappingモジュールへのBootstrap 5テーマの対応については、Bootstrap 5テーマのMappingモジュール一部対応を参照してください。

テーマのカスタマイズ

CSSのオーバーライド

テーマのデザインを微調整する最も簡単な方法は、CSSのオーバーライドです。テーマの設定画面でカスタムCSSを入力できるテーマもあります。そうでない場合は、テーマディレクトリ内のCSSファイルを直接編集します。

/* ヘッダーの背景色を変更 */
header {
    background-color: #2c3e50;
}

/* サイトタイトルのフォントサイズを調整 */
.site-title {
    font-size: 1.8rem;
    font-weight: bold;
}

/* アイテム一覧のサムネイルサイズを変更 */
.resource-list .thumbnail img {
    max-width: 150px;
    max-height: 150px;
}

テーマの多言語化

テーマの表示テキストを多言語に対応させる方法については、Omeka Sテーマの多言語化を参照してください。

多言語化では、テーマ内のPHPテンプレートで$this->translate()関数を使用し、翻訳ファイル（.poファイル）を作成します。

<!-- テンプレートでの多言語化例 -->
<h2><?php echo $this->translate('Browse Items'); ?></h2>

子テーマ（チャイルドテーマ）の作成

既存のテーマをベースに新しいテーマを作成する場合、子テーマの仕組みを利用できます。子テーマでは、親テーマのテンプレートやアセットを継承しつつ、必要な部分だけをオーバーライドします。

子テーマの基本的なディレクトリ構成は以下の通りです。

theme.iniファイルで親テーマを指定します。

[info]
name = "My Child Theme"
version = "1.0.0"
author = "Your Name"
description = "A child theme based on Default theme"
parent_theme = "default"

日本語検索への対応

テーマによっては、日本語検索に関して不具合が発生する場合があります。日本語検索の不具合を回避するFoundation Sテーマについては、日本語検索の不具合を回避するFoundation Sテーマを作成しました。を参照してください。

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

Advanced Searchモジュールに対応したテーマを探す方法については、Advanced Searchモジュールに対応したテーマを探すを参照してください。

テーマの更新

テーマの更新と関連するモジュールの改修については、Omeka Sのテーマ更新とモジュール改修を参照してください。

テーマを更新する際は、カスタマイズした内容が上書きされないよう、事前にバックアップを取ることを推奨します。子テーマを使用している場合は、親テーマのみを更新すれば、カスタマイズ内容は維持されます。

Google Analytics 4の追加

テーマにGoogle Analytics 4（GA4）のトラッキングコードを追加する方法については、Omeka SにGoogle Analytics 4 gtag.jsを追加するを参照してください。

テーマのlayout.phtmlファイルの<head>セクションに以下のコードを追加します。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

テーマの概要#

テーマのインストール#

Bootstrap 5テーマ#

Bootstrap 5テーマの特徴#

テーマのカスタマイズ#

CSSのオーバーライド#

テーマの多言語化#

子テーマ（チャイルドテーマ）の作成#

日本語検索への対応#

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

テーマの更新#

Google Analytics 4の追加#

関連記事#