moebuntuテーマファイルの作り方

★画像アップ先の不調により、過去のエントリーで画像が見られないものが多数あります。もし画像の見たいものがありましたらご連絡いただければ復活するようにします。

独自にテーマファイルと作りたい人のためにmoebuntuテーマファイルの作り方の概要(手順)をお伝えします。Ubuntuのテーマを元にしますが他のディストリのテーマも似たような感じだと思いますので参考にしてみてください。また、moebuntu wikiの方にMoeppyぷろじぇくとカラー部会という形でtapaboyさんがPuppy Linuxのテーマファイル(JWMとGTK2)についての説明がありますのでそちらも参考になると思います。

moebuntu使用カラー一覧

moebuntu wikiの萌え化参考資料にmoebuntuテーマで使用しているカラー一覧があります。

moebuntuテーマの作り方


下準備 1

実機を使ってそのままやってもいいのですが、確認で何度もログアウトしたりするのでVirtualBoxなどの仮想環境に弄りたいOS(この場合Ubuntu)をセットすることをオススメします。


使用するアプリ

必ずしも必要ではありませんが、「Bluefish」と「Meld」をUbuntuソフトウェアセンターからインストールしておきます。


Ubuntuのテーマファイル

*Ubuntuのテーマファイルの「gtk-3.0」部は仕様が固まっていないためほぼ半年ごとのバージョンアップで修正が必要になりますのでご注意ください。FedoraのGnome Shellなんかもそうかもしれません(?)。


Ubuntuの場合「usr/share/themes」の中に「Ambiance」がありそれがデフォルトのテーマファイルとなります。このテーマファイルの内容を編集することでmoebuntuの各カラーテーマが作られています。


下準備 2

まず「Ambiance」のコピーを取って適当なフォルダ名(テーマ名)に変えます。つぎに中にある「index.theme」をエディターで開いて編集します。ここさえ編集すればとりあえずテーマファイルとしてきちんと認識されます。


moebuntuテーマの作り方

修正する場所は基本「Ambiance」となっている部分です。その他必要があれば「IconTheme=」のところを使いたいアイコンテーマ名にします。Moe-Pink5テーマの場合だと以下のようになります。

moebuntuテーマの作り方

同様にして「Ambiance」>「metacity-1」の中の「metacity-theme-1.xml」も「Ambiance」の部分を変え必要に応じてクレジット周りも修正します。


各ファイルの編集

「Ambiance」フォルダ内には「gtk-2.0」「gtk-3.0」「metacity-1」「unity」のフォルダがありその中に各種設定ファイルがあります。

*moebuntuのテーマファイルの場合はそれに付け加えて「openbox-3」「xfwm4」などもありますが、これはLubuntuやXubuntu対応用のファイルです。

gtk-2.0 - 「gtkrc」

エディターで開くと冒頭に以下のような記述があり、この「#ffffff」などが基本的なカラー設定で、その色を変えることでgtk-2.0を使った部分は変更できます。ただしその下の設定ファイル内にも「#ffffff」などの色設定がある場合があります。


gtk-color-scheme = "base_color:#ffffff\nfg_color:#4c4c4c\ntooltip_fg_color:#ffffff\nselected_bg_color:#f07746\nselected_fg_color:#FFFFFF\ntext_color:#3C3C3C\nbg_color:#F2F1F0\ntooltip_bg_color:#000000\nlink_color:#DD4814"

設定した色の細かい調整はその後に出てくる設定ファイルをいじります。たとえば

bg[SELECTED] = shade (1.0, @selected_bg_color)

という記述の場合「@selected_bg_color」が「nselected_bg_color:#f07746」のことで、「 shade (1.0,」がその濃さの調整などとなります。数値を大きするれば明るく(薄く)小さくすれば暗く(濃く)なります。またうまく調整できない場合は「shade (1.0, @selected_bg_color)」の部分に直接「#f07746」と色を指定することもできます(確か)。

*「apps」内のファイルももしかしたらいじる必要があるかもしれません(Ubuntuでは必要ない気がします)。

gtk-3.0内

最近のUbunruはgtk-3.0化が進行しているのでかなりの部分は「gtk-3.0」内の複数のファイルをいじる必要があります。基本的なやり方は「gtk-2.0」の場合と同じです。その中でもメインとなるのが、「settings.ini」「gtk-main.css」「gtk-widgets.css」この3つです。それ以外「apps」内のファイルも多少いじる必要があります。それと「assets」内のファイルは画像ファイルで色をGimpなどでいじる必要がありますが、これがけっこう面倒です。


効率のいい変更の仕方

テーマによって使う色はある程度限られているので、色変えするときは複数のファイルをまとめて処理すると効率的です。そこで役立つのが「Bluefish」エディター。置換処理するときに複数のファイルを横断して処理することができるのでオススメです。

moebuntuテーマの作り方


使用しているカラーを調べる

使われている色の殆どは「gtk-3.0」内の「settings.ini」「gtk-main.css」に「#xxxxxx」という形であるのでそれぞれの色がどんな色なのかを調べます。Webブラウザーで検索するのがって取り早いです。色の確認したら当たりをつけてその色をわかりやすい全然別の色に変換して実際にテーマに適用してみます。元々使用中のテーマを色変えした場合はすぐには反映されないので、一度ログアウトします。これで色の変わった部分がわかればその色がどの部分に影響する色なのかを確認することができます。基本的にはこれの繰り返しで色を特定して好きな色に変えていきます。


微調整をする

ここからより難易度が高くなります。上記の色変換でいい感じになればいいのですが、おそらくより薄く・濃くしたい部分が出てくると思います。とくにUbuntuデフォルトの「Ambiance」のように黒っぽいテーマをmoebuntuのような明るいテーマに変える場合は顕著です。その場合テーマファイルの本文からいじるべき部分を探しださなくてはなりません。ヒントとなるのは本文中に「/* ○○○ */」という説明書きと「@selected_bg_color」などの色設定です。


たとえば「setting.ini」に出てくる「nbg_color:#f2f1f0」の「nbg_color」は「@bg_color」のことで、その色が「#f2f1f0」に設定されていることを差します。また、「gtk-main.css」にでてくる「@define-color bg_color #f2f1f0;」なども同様です。

微調整したい部分の設定を特定するには上記から割り出した怪しい部分をわざとブロックごと「/* */」でくくってコメントアウトしてテーマを適用し直します(一度ログアウト)。これで想定した部分に変化があれば“ビンゴ”です。違う部分に変化があればそのあたりに関する設定部分とわかります。とくに変化がなければ、(気がついていない部分と思われますが)元に戻しておきます。場所が特定できればそこで設定されている数値を修正します。また場合によっては「@define-color bg_color」を「@fg_color」に変えたり、直接「#xxxxxx」と指定することもできます。



効率のいいやり方

上記の通り微調整すべき場所を特定するのはけっこう根気のいる作業になります。そこで効率的なのは「Meld」というマージツールを使って2つのファイルを比較することです。たとえば「Ambiance」の「gtk-widgets.css」と「Moe-Pink5」の「gtk-widgets.css」を「Meld」で開いてみると以下のようになります。

moebuntuテーマの作り方

この「gtk-3.0」部は「Moe-Pink5」は「Ambiance」を改良したものなので基本同じですが、違っている部分は上記の通りブルーで色付けされます。つまりこの違っている部分が何らかの訳あって弄った部分とわかるのです。これを手がかりにすればいじるべき箇所の特定がスムーズに行くと思います。また違うテーマの場合であっても似た構造のものを比較することで特定しやすくなるかもしれません。



弄った部分はメモを取っておく

一度弄ってみたところは別途メモを取っておくことをオススメします。たとえば上記の変更した部分を以下のようにメモっておきます。これで後からもう一度変更したくなった時にすぐにその箇所を見つけられるようになります。また、弄ったけど変化がなかった部分も同様にメモっておくと後で役立つかもしれません。変化のなかった部分は元に戻すことを忘れずにしましょう。

●177~180(行) ○○○ボタンが○○○だった時の色
.button:active {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (#FEA5FA),
                                     to (#ffccff));




以上が大体の流れです。他のOSのテーマファイルなどでも同様のやり方でできると思いますのでチャレンジしてみてください。そして萌え化した場合はぜひ提供してください。


参考資料

このエントリーを書いている時に参考になりそうなところを見つけました。おもに「metacity」の部分ですがわりと詳しく説明されているようなので参考にしてみてください。またもしなにかほかに参考になりそうなサイトなどありましたら教えてください。

GNOMEの自作テーマをつくろう!(基礎知識編)

*けっこう古いですが、「ぽえりな」も参考になるので、テーマを弄りたい人は一冊持っていてもいいかもしれません。

ぽえりなぽえりな
(2004/07)
Linux萌え萌え大作戦、武礼堂 他

商品詳細を見る

関連記事

テーマ : Linux
ジャンル : コンピュータ

コメントの投稿

非公開コメント

プロフィール

TOY

Author:TOY
萌え萌えmoebuntu
ようこそ!
moebuntuサイト
moebuntu wiki
お気軽にコメントください。

Auto-Translate
最新記事
最新コメント
tweet
萌え萌えAD




月別アーカイブ
10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01 
カテゴリークラウド
RSSリンクの表示
リンク
QRコード
QRコード
最新トラックバック