Cinnamonテーマにスパイスを効かせよう――意外と簡単な自作テーマ入門

Linuxデスクトップを自分好みにカスタマイズしたいと思ったことはありませんか?でも、完璧なテーマがどうしても見つからない——そんな経験、きっとあるはずです。

もし現在のデスクトップ環境がCinnamonなら、オリジナルのテーマを作るのは驚くほど簡単です。特別なツールも必要なく、シンタックスハイライト機能付きの普通のテキストエディタがあれば十分です。

Cinnamonは2011年にGnome Shellのフォークとして登場して以来、大きく進化を遂げてきました。かつてはGnomeに依存していましたが、今では独自の基本アプリケーション一式を備えた完全なスタンドアロン型デスクトップ環境になっています。このガイドは最新のLinux Mint(バージョン17.1「Rebecca」)に同梱されるCinnamon 2.4をベースにしていますが、ここで作るテーマはCinnamonを搭載するあらゆるLinuxディストリビューションで利用できます。

Cinnamonテーマの仕組みを理解する

Cinnamonテーマは「シンプルでありながら複雑」です。矛盾しているように聞こえますよね?シンプルなのは、テーマ全体がCSSで書かれているから。複雑なのは、テーマファイルが非常に巨大で、ドキュメントがあまり整備されていないからです。ほとんどの場合、どのルールがどのデスクトップ要素に影響するのか推測できますが、一部は試行錯誤が必要になります。CSSにある程度慣れていれば作業はスムーズですが、そうでなくても心配いりません。オンラインには分かりやすいチュートリアルが豊富にあり、短期間で学べます。

重要なポイントとして、Cinnamonテーマはウィンドウの枠線やボタンなどアプリケーション側の要素は変更しません。これらはGTKテーマが管理しており、別途ダウンロードが必要です。Cinnamonテーマそのものが影響するのは、メインメニュー(Mint Menu)、パネル、ツールチップ、通知、アプレット、そして一部のダイアログだけです。

準備を整える

Cinnamonテーマの作り方は大きく分けて2つあります。ゼロからコードを書く方法と、既存のテーマをテンプレートとして使う方法です。今回は圧倒的に簡単な後者のアプローチを採用します。ただし、改変したテーマを再配布する場合はライセンス制限を必ず確認してください。通常は作者に連絡して許可をもらえば十分です。

CSSに手を付ける前に、何をどう変えたいのか具体的な計画を立てておくのがおすすめです。この記事では例として、デジタル時計のサイズ変更、メニューのフォントと背景色の変更、パネルの半透明化を行います。目に優しい配色にしたいなら、無料のオンラインカラースキームツールを活用するとよいでしょう。

忘れてはいけないのが「依存関係」のある変更です。たとえばパネルの背景をダークから白に変えたら、パネル上のボタンやアプレットの色も合わせて変更しなければなりません。さもないと、以前は暗い背景の上に白かった要素が見えなくなってしまいます。ダークテーマを作りたいなら、最初からダークカラーのテンプレートを選ぶのが賢明です。

テンプレートを選ぶ

おすすめはプロジェクトのGitHubページで入手できるデフォルトのCinnamonテーマです。deviantARTコミュニティでは素晴らしいCinnamonテーマが公開されており、公式のLinux Mint Spicesページや老舗のGnome-Look.orgからもダウンロードできます。

デフォルトテーマを使いたい場合、それらは次のいずれかの場所にあります。

/home/$USERNAME/.themes

または

/usr/share/themes

後者のディレクトリにあるテーマは全ユーザー(rootを含む)が実行するアプリケーションに適用され、/home/$USERNAME配下のテーマは特定のユーザーにのみ適用されます。作業中のテーマはホームディレクトリに置いておくのがおすすめです。完成したら、次のコマンドでシンボリックリンクを作成すればOKです。

sudo ln -s /home/username/.themes/ThemeName /usr/share/themes/ThemeName

テーマによっては「gtk-2.0」「gtk-3.0」というサブフォルダが含まれていることがあります。これはCinnamonテーマに加えてGTKテーマも同梱していることを意味しますが、今回必要なのは「cinnamon」フォルダだけです。

その中にさらにサブフォルダがあるかもしれません。そこにはアセット(デスクトップ要素のスタイリングに使える小さな画像)が入っています。たとえばMint Menuに背景画像を設定するなら、その画像をここに置きます。今回編集するのは「cinnamon.css」というファイルです。さっそく開いてみましょう。

テーマファイルの構造

ここではデフォルトテーマの一つである「Linux Mint」を使用します。かなり長大なCSSファイルですが、幸いコード内のコメントが道しるべになってくれます。コメントはコードをセクションごとに区切っており、各セクションがそれぞれのデスクトップ要素に対応しています。主なセクションは以下の通りです。

• PopupMenu(popupMenu.js):すべてのポップアップメニュー、パネルの右クリックメニュー、さらにメインメニューにも影響
• Panel(panel.js):名前の通りパネル関連
• Desklets(desklet.js):デスクトップウィジェット向け。Applets(applet.js):パネル上のウィジェット向け
• Looking Glass:グラフィカルなデバッグインターフェース(cinnamon-looking-glass)の外観を変更
• Menu(menu.js):メインメニュー(MintMenu)のみに適用
• Window list(windowList.js):パネルの開いているウィンドウ一覧に適用

Cinnamonテーマを実際に改造する

まずは小さな変更をいくつか加えて、やり方をつかみましょう。CSSの編集に慣れてきたら、複数の要素を一度に変更したり、新しいアセットを作成したりして、テーマを根本から作り変えることも可能です。まずは変更前の状態をご覧ください。

パネルの背景色と透明度を変更する

「cinnamon.css」内で#panelで始まる行を探します。

グラデーションを単色+透過に置き換えます。以下の記述を削除し、

background-gradient-start
background-gradient-end
background-gradient-direction

代わりに次の行を追加します。

background-color: rgba(152,13,13,0.6);

RGBa形式で色を指定すれば、色と透明度を一行でまとめて管理できて便利です。括弧内の最後の数値が透明度で、0が完全な透明、1が完全不透明です。

Cinnamonのパネルは左・中央・右の3つのエリアに分かれています。新しいアプレットをドラッグしたときの各エリアのハイライト色は個別に設定でき、#panelLeft:dnd、#panelRight:dnd、#panelCenter:dndの値を変更することで調整できます。

メインメニューの色・透明度・フォントを変更する

メインメニューは「PopupMenu」と「Menu」という2つのセクションで制御されています。前者の変更はすべてのポップアップメニューに反映されます。「Menu」セクションにはお気に入り、カテゴリ、場所、検索ボックスに関する設定が含まれます。そのため、色と透明度は.popup-menu-boxpointerで変更します。

先ほどのパネルと同じRGBa値をコピーして-arrow-background-color:の後に追加し、ボーダーの幅を2pxに増やして色をグレーに変更しました。フォントについては、「cinnamon.css」冒頭のfont-familyの値を修正します。これはテーマ全体に影響しますが、要素ごとに個別に上書きすることもできます。変更前はこちら。

そして変更後がこちら。

パネルのデジタル時計を大きくする

時計はパネルアプレットですが、Window ListやCalendarと違って、テーマファイル内に固有の外観設定を持っていません。汎用の「Applets」設定を変更する必要があり、その結果はメニューボタンのテキストサイズなど、個別調整できない他のパネルアプレットにも及びます。

時計を大きくするには.applet-labelを探してfont-sizeの値を増やします。ここでfont-familyを変更すれば、先ほどメインメニュー向けに設定したフォントを上書きすることもできます。この例では時計をサンセリフ体にし、ポップアップメニューはセリフ体のままにしました。

時計をクリックすると表示されるCalendarアプレットの見た目を変えたい場合は、「Date applet」セクションを参照してください。たとえば.datemenu-date-labelでは、カレンダーアプレット上部のテキスト(画像では「Sunday March 8...」)のサイズ・色・フォントを変更できます。

変更後のバージョンは決して美しいとは言えませんが、どんな変更ができるかは伝わるはずです。

「Menu」ボタンと時計が大きくなり、色も変わり、フォントも変わりました。次のステップとしては、実行ダイアログ、セッション終了ダイアログ、通知など、目立たないインターフェース要素を仕上げていくとよいでしょう。

テストとさらなる学習

テーマファイルを/home/$USERNAME/.themes/ThemeNameに置き、「すべての設定 → テーマ → デスクトップ」ダイアログでそのテーマを有効にすれば、変更をリアルタイムでプレビューできます。

変更がすぐに反映されない場合は、Alt+F2で「実行」ダイアログを開き、rと入力してEnterを押せばCinnamonを再起動できます。もちろん、すべての編集を済ませてからテーマを適用し、修正箇所を確認する方法でも構いません。

基本をマスターしたら、Linux MintフォーラムにはCinnamonテーマ制作に関するアドバイスが豊富にあります。他のユーザーやテーマ制作者からフィードバックをもらうこともできます。多くの創作活動と同じく、習うより慣れろです。テーマを作る(または編集する)ほど上達していき、いつしか「CSSこそ我が道、トラブルなんて無縁」になるでしょう。Cinnamon開発チームが公式の詳細なテーマドキュメントを提供してくれる日が来ることを願っています。