elementaryOSを萌え化

moeledesktop.jpg
elementary OS を台無し萌え萌えにして、Moelementary OS にしてみました(Freya)。

elementaryOS は Mac OS X を意識した作りになっており、独特の操作感があります。
Ubuntu をベースにしているので、インストールの方法は全く同じだし、日本語化などの点でも比較的使いやすいと言えます。(ライブCDの部屋に日本語化済みのがあるらしいです。)
また、はじめから入っているアプリはかなり絞られているので、シンプルなのが好きな人に向いているかもしれません。(Ubuntu と同様にアプリの追加ができます。)

elementary の開発者はデザインや操作性にはかなりこだわりがあるようで(=ユーザーによるカスタマイズを好まない。)、デフォルトではテーマやアイコンなどを変更できるツールは入っていません。
そんなこともあり、萌え化にはちょっと手間がかかり、まだ、完全にできていない部分もあります。(まあ、開発者にとっては、萌え化などもってのほかかもしれません。)

なお、記事の修正や追加は大歓迎です。
また、不具合などありましたら、Moelementaryぷろじぇくとに投げてください。



最新版「Loki」での状況

moelementarylokidesktop.jpg

前バージョン「Freya」に比べ、Moe テーマを適用した時の不具合の多くが解消されてますが、これは OS のバージョンアップによるものよりも、Moe テーマの改善によるところが大きいと思われます。
ただ、いろいろ不具合が残っており、見栄えと使い勝手をよくするためには、Moe テーマの設定ファイルそのものに手を加えたり、一部画像ファイルを差し替えたりする必要があります。

  • よくなったところ [#la9d6710]
    • 専用の追加ファイルや特に手を加えなくてもウィンドウの「閉じる」等ボタンがちゃんとハート型で表示される。
    • アプリの違いによる見栄えの差異がだいぶ解消されている。
    • 「ターミナル」を開いた時に見えていた変な黒い棒がなくなった。

  • 調整を要するところ [#df2e3c68]
    • ウインドウの上隅が黒くなっている(透過処理がうまくいっていない?)。
    • ウインドウの「<(戻る)」、「>(進む)」ボタンが大きすぎる(おそらく画像の差し替えで対応可能)。
    • ファイルマネージャーのフォルダ階層を示す「>」が枠からはみ出している。
    • ファイルマネージャーなどはウィンドウの縁まで白いので、ウインドウを重ねて表示したときに区別しづらい。
(細かい部分の不具合の原因を特定し、修正を施し、一層の完璧さを追求することに喜びを感じるタイプの人にはたまらないと思います。どなたかチャレンジしませんか?)

  • OS 自体でよくなったところ [#x8f40a14]
    • Scratch(デフォルトのテキストエディタ。プログラミングツールではない。)で日本語が使えるようになった。

  • 相変わらずのところ [#d1f47e7c]
    • 日本語入力するためには、手動で fcitx-mozc をインストールする必要がある。
    • 日本語入力に切り替えるたびに、上部のパネルが動いて煩わしい(mozc の画像アイコンを小さいものに差し替えれば解消する。)

ざっくりした萌え化手順

  • 今回も「Elementary Tweaks」のインストールが必須です。が、その前に Loki では初期状態だと ppa の追加ができないので、それ用の部品をインストールします。
$ sudo apt install software-properties-common

  • ppa を追加して、「Elementary Tweaks」をインストールします。
(よくあることですが、前バージョン Freya とは ppa が異なります。気をつけてください。)
$ sudo add-apt-repository ppa:philip.scott/emlementary-tweaks
$ sudo apt update
$ sudo apt install elementary-tweaks


  • moebuntu から Moe-Pink9.tar.gz をダウンロード>展開し、できたフォルダ(Moe-Pink9)を管理者権限で /usr/share/themes フォルダにコピーします。

  • 同様に moebuntu から MoePinkIcons_150719.tar.gz をダウンロード>展開し、できたフォルダ(MoePinkIcons)を管理者権限で /usr/share/Icons フォルダにコピーします。

  • 「システム設定」にあらたに「Tweaks」が追加されているので、これを開きます。
  • 「Appearance」タブで「GTK+」を「Moe-Pink9」に、「Icons」を「MoePinkIcons」に変更します。
moelementarylokitweak.jpg
  • ついでに、「最小化」ボタンも欲しければ、「Layout」を「Windows」などにします。

  • 壁紙の変更方法は変わりありませんが、もしデスクトップが真っ黒になってしまうような場合は、壁紙にしたい画像を /usr/share/backgrounds フォルダにコピーする(もちろん管理者権限で)するのが、手っ取り早いでしょう。

  • ターミナルの背景色は、 「Tweaks」の「Terminal」>「Background color」から変更可能です。ただしこのままでは透過の設定ができないので、次の手順で透過可能にします。
    • 「Moe-Pink9」の「GTK-3.0」>「gtk-wedgets.css」を開き、最後の方に次の通り追記します。
//************
/* Terminal *
/***********/
PantheonTerminalPantheonTerminalWindow.background {
background-color: transparent;
}

    • 「システム設定」>「Tweaks」>「Terminal」>「Background color」を開き左下「作成した色」のしたの「+」をクリックすると、パレットが現れ、任意の色と透過を作成できます。

  • 「システム設定」>「ユーザーアカウント」でユーザーの画像を変更すると、ログイン時のユーザー画像も変更できます。
moelementarylokiuser.jpg

ログイン画面(部分)
moelementarylokilojin.jpg


Freya(現行バージョン)の場合

(多分、前バージョンの Luna でも同様の手順でできると思います。)

下準備

  • ターミナルを開き、次のように入力して Elementary Tweaks と dconfエディターをインストールします。
sudo add-apt-repository ppa:mpstark/elementary-tweaks-daily
sudo apt-get update
sudo apt-get install elementary-tweaks dconf-tools

(最初の $ は入力しません。)

なお、開発中の Moe-Pink7 及び Moe-Pink8 は、そのまま elementary OS に適用すると、未解決の不具合が多いので、今のところおすすめできません。

moeleextruct.jpg

  • お好みの画像を用意して「ピクチャ」あるいは「Pictures」フォルダに入れておきます。

テーマとアイコンの萌え化

ここでは、moelementary-parts から設定ファイルや画像ファイルを(上書き)コピーしていきます。
moele-tools.jpg
大体こんな感じ

1 まずテーマを少し修正します(Moe-Pink6 テーマでやってますが、他の Moe テーマでも同様です。)。
  • moelementary-parts/gtk.css を Moe-Pink6/gtk-3.0/gtk.css に上書きコピーします。念の為、元の gtk.css をバックアップしておくことをお勧めします。

  • 同様に pantheon-apps.css を Moe-Pink6/gtk-3.0 フォルダにコピーします。

  • entry-toolbar.png を Moe-Pink6/gtk-3.0/assets/entry-toolbar.png に上書きコピーします。

2 次にアイコンセットを修正します。
(アイコンセットのアップデートにより修正作業は不要となりました。)

3 テーマとアイコンを指定のフォルダに入れます。
  • ホームフォルダに移り CTRL + H で隠しファイルが表示できるようにします。
elmhome.jpg

  • ホームフォルダ上で右クリック→ New → Folder で .themes と .icons というフォルダを作ります。
elmnewfolder.jpg

  • Moe-Pink6 を .themes に移動します。

  • 同じように MoePinkIcons_150503 を .icons に移動します。

4 Elementary Tweaks でテーマとアイコンを変更します。
  • 左上のアプリケーションか下のドックから System-Settings > Tweaks を開きます。
elemsettings.jpg

  • GTK+ Theme: で Moe-pink6 を Icon Theme: で MoePinkIcons_150305 を選びます。
elmtweaks.jpg

壁紙を萌え化します。

  • 壁紙にしたい画像をダブルクリックして、画像ビューアを立ち上げます。ビューアに表示されている画像の上で、右クリックすると、選択肢に「画像を壁紙にするがありますので、それで選択します。

別の方法
  • System Settings > Desktop を開きます。

  • ウィンドウの左下で Pictures を選びます。
elmwallpaper.jpg

  • 壁紙にしたい画像を選択します。
 
  • 必要に応じ右下で Centered , Zoom など調整します。

ターミナルのカスタマイズ

●ターミナル(端末)の背景の色合いをテーマに合わせて変えてみます。
変更前のターミナル
moeleterm.jpg

  • 左上のアプリケーションメニューから「dconf エディター」を開き、左側のタグで org > pantheon > terminal > settings を選んでいきます。

  • 右側の窓に設定項目の名称と値が表示されますので、background(背景)と foreground(文字)を適当な値に変更します。
背景色は萌え化参考資料の各カラーの一番濃い色を参考にしてください。文字色は自分で見やすいと感じる色がよいでしょう。例では、background = #ff33f4、foreground = #c0ffee です。
elmdconfeditor.jpg

  • 適用後のターミナル
elmcoloredterm.jpg

dconf エディターは、ターミナル以外にもいろいろいじれそうです。
いじりすぎておかしくなってしまったときには、一番下の「デフォルトにリセット」ボタンを押すと元の状態に戻ります。その代わりその項目の変更はすべて消えますが。

●ターミナル背景の透過の程度の変更方法
  • Sysytem Settings > Tweaks > Applications > Terminal を開き、Opacity の数値を変えて、好みの透過度にします。
数値が小さくなるほど、より透過するようになります。
eletermtrans.jpg

その他

Mozc のアイコンサイズ変更について
fcitx-Mozc を導入すると、日本語入力するときに上部のパネルの幅が微妙に広がるかもしれません。

そのような場合は、管理者権限で /usr/share/fcitx/mozc/icon 内の mozc.png を moelementary-parts の mozc.png で差し替えると直ります。
mozc-24.png
24x24 ピクセルであれば他の画像でもできます。

不具合

  • 「閉じる」ボタン等がハートになってくれません。
  • 上部のパネルが何かの拍子にピンク色になったり、透明になったりします。
  • 一部のアプリケーションのチェックボックスの枠が表示されません。
  • (elementary OS 自体の不具合)デフォルトのテキストエディタ Scratch では、日本語入力ができません。Leafpad など別のエディタをインストールしましょう。
  • (elementary OS 自体の不具合)Firefox のスタートページの検索窓に文字を入れても検索できません(私だけ?)。
  • (多分 elementary OS 自体の不具合)ファイルマネージャでファイルの移動などを行うとそのファイルのアイコンの残像がいつまでもカーソルにつきまといます。一度 ctrl + alt + F1(F1 〜 F6 のどれでもいいです。)で画面から抜けだして、ctrl + alt + F7 で戻ると直りますが、なんだか間抜けです。


デフォルトのデスクトップテーマを直接編集しての萌え化

elementary OS のデフォルトテーマを編集することで、結構高度に萌え化できましたので、参考に手順を書いておきます。萌え化参考資料の色見本を参考にして他の色にもできます。
freyashot.jpg
freyabutton.jpg
萌え化例。一番のポイントは、「閉じる」等ボタンのハート化です。(ただし、ターミナル等には適用できてません。)

手作業による萌え化手順

  • Moe-Pink8 テーマを入手します。

  • /usr/share/themes/elementary フォルダをホームフォルダにコピーします。

  • フォルダ名を elementary から適当な名前(仮に Moelementary-Pink とします。)に変更します。

  • Moelementary-Pink フォルダの metacity-1 をフォルダごと捨てます。

  • 代わりに Moe-Pink8 の metacity-1 をコピーします。

  • gtk-3.0 フォルダを開きます。

  • gtk-dark.css と gtk-widgets-dark.css の2つを捨てます。
  (これらのファイルがあるとターミナルなどが黒くなってしまうので。)

  • gtk.css ファイルを次のように編集する。(ほとんどの箇所が # 以下の3文字あるいは6文字の置き換えです。なお、今後の色指定については、「萌え化参考資料」の色見本を参考に行ってください。)
 26行目
@define-color base_color #fffdff;
 (ベースとなる背景色、ごく薄く)

 41行目
@define-color titlebar_color #fea5fa;
 (タイトルバー、2番目に薄く)

  • gtk-widgets.css ファイルを次のように編集します。
  98行目
background-color: alpha (#ff33f4, 0.7);
  (ツールチップが黒いのを濃いピンクに)

  3306行目
border-radius: 8px 8px 0 0;
  (ウインドウ上部の丸みを強めるため、4pxから8pxに)

  3443行目
border-radius: 8px 8px 0 0;
  (3306行目と合わせて8pxに。そうしないと角が汚くなる。)

  3445行目から3447行目
box-shadow: 0 0 0 1px alpha (#ff33f4, 0.3),
0 14px 28px rgba(255,51,244,0.35),
0 10px 10px rgba(255,51,244,0.22);

  (ウインドウ枠とその周辺の影をピンクに。なお、rgba(255,51,244,0.22) の 255,51,244 は、赤、緑、青の割合で、gcolors2 などのカラーチェッカーでわかる。)

  886行目に次をコピペ
.titlebar.header-bar .button.titlebutton {
  color: transparent;
   background-clip: padding-box;
   border: 0px solid #ffffff;
   icon-shadow: 0 1px rgba(255, 255, 255, 0.1);
   border-radius: 0px;
   padding: 0px 2px;
   box-shadow: none;
}
.titlebar.header-bar .button.titlebutton.close {
  background-image: url("../metacity-1/icon_close.png");
}
.titlebar.header-bar .button.titlebutton.close:hover {
  background-image: url("../metacity-1/icon_close_u.png");
}
.titlebar.header-bar .button.titlebutton.minimize {
  background-image: url("../metacity-1/icon_minimize.png");
}
.titlebar.header-bar .button.titlebutton.minimize:hover {
  background-image: url("../metacity-1/icon_minimize_u.png");
}
.titlebar.header-bar .button.titlebutton.maximize {
  background-image: url("../metacity-1/icon_maximize.png");
}
.titlebar.header-bar .button.titlebutton.maximize:hover {
 background-image: url("../metacity-1/icon_maximize_u.png"); 
}

  (ボタンをハート型画像に置き換える。)

  • apps.css を次のように編集します。
  277行目
color: #fea5fa;
  (上部パネルの文字をピンクへ)

  • 以上の編集作業が終了したら、Moelementary-Pink フォルダを /usr/share/thmes にコピーします(要管理者権限)。

  • tweaks で Metacity テーマと gtk テーマを Moelementary-Pink に変更します。

さらに、テーマの gtk-3.0/assets 内の画像ファイルをピンク系に変更できるとよいのですが、SVG 形式の画像ファイルの編集方法は私にはわかりません。


その他の小技

「最小化」ボタンが欲しい!という場合

elementary-tweaks の Button Layout を Windows あるいは OS X にします。

  • 最終更新:2016-10-09 05:59:01

このWIKIを編集するにはパスワード入力が必要です

認証パスワード