2013年11月01日


Google Chroem の自分用テーマを超簡単に作成する方法

環境準備

とにかく、元となるようなテーマをインストールします。( 後でいろいろ変更すれば良いです )

インストールされたテーマデータを複写

『C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\Default\Extensions』

に移動して、タイムスタンプよりインストールされたばかりのフォルダに入ります。



必要なのは、images フォルダ全てと、manifest.json です。これらをどこか好きなフォルダにコピーします。

テーマ用背景画像を images フォルダにコピー

jpg でも png でもどちらでもかまいません。そのファイル名を manifest.json の中の theme_ntp_background の値として変更します。
      "images": {
         "theme_button_background": "images/theme_button_background.png",
         "theme_frame": "images/theme_frame.png",
         "theme_frame_inactive": "images/theme_frame_inactive.png",
         "theme_frame_incognito": "images/theme_frame_incognito.png",
         "theme_ntp_background": "images/UrbanFuture4_1.jpg",
         "theme_tab_background": "images/theme_tab_background.png",
         "theme_tab_background_incognito": "images/theme_tab_background_incognito.png",
         "theme_tab_background_v": "images/theme_tab_background_v.png",
         "theme_toolbar": "images/theme_toolbar.png",
         "theme_window_control_background": "images/theme_window_control_background.png"
      },

他はとりあえずそのままにしておいて、他のファイルは自分用のパッケージを作成してからゆっくり変更して下さい。

manifest.json の変更

インストール済みの manifest.json には必要無い部分が含まれているので、以下のようなエントリのみにします( manifest_version が無い場合は追加して下さい )
{
   "manifest_version": 2,
   "name": "DAZ3D / sworc",
   "theme": {
      "colors": {
         "bookmark_text": [ 232, 232, 232 ],
         "button_background": [ 255, 9, 9 ],
         "control_background": [ 70, 0, 0 ],
         "frame": [ 4, 4, 4 ],
         "frame_inactive": [ 4, 4, 4 ],
         "frame_incognito": [ 4, 4, 4 ],
         "frame_incognito_inactive": [ 0, 0, 0 ],
         "ntp_background": [ 0, 0, 0 ],
         "ntp_header": [ 70, 0, 0 ],
         "ntp_link": [ 255, 9, 9 ],
         "ntp_link_underline": [ 255, 9, 9 ],
         "ntp_section": [ 70, 0, 0 ],
         "ntp_section_link": [ 255, 9, 9 ],
         "ntp_section_link_underline": [ 255, 9, 9 ],
         "ntp_section_text": [ 186, 186, 186 ],
         "ntp_text": [ 186, 186, 186 ],
         "tab_background_text": [ 4, 4, 4 ],
         "tab_text": [ 232, 232, 232 ],
         "toolbar": [ 56, 56, 56 ]
      },
      "images": {
         "theme_button_background": "images/theme_button_background.png",
         "theme_frame": "images/theme_frame.png",
         "theme_frame_inactive": "images/theme_frame_inactive.png",
         "theme_frame_incognito": "images/theme_frame_incognito.png",
         "theme_ntp_background": "images/UrbanFuture4_1.jpg",
         "theme_tab_background": "images/theme_tab_background.png",
         "theme_tab_background_incognito": "images/theme_tab_background_incognito.png",
         "theme_tab_background_v": "images/theme_tab_background_v.png",
         "theme_toolbar": "images/theme_toolbar.png",
         "theme_window_control_background": "images/theme_window_control_background.png"
      },
      "properties": {
         "ntp_background_alignment": "center",
         "ntp_background_repeat": "no-repeat",
         "ntp_logo_alternate": 1
      },
      "tints": {
         "background_tab": [ -1.0, 0.5, 0.75 ],
         "buttons": [ 1.0, 0.0, 1.0 ],
         "frame": [ -1.0, -1.0, -1.0 ],
         "frame_inactive": [ -1.0, -1.0, 0.75 ],
         "frame_incognito": [ -1.0, 0.2, 0.35 ],
         "frame_incognito_inactive": [ -1.0, 0.3, 0.6 ]
      }
   },
   "version": "1.0"
}

パッケージ作成とインストール

Google Chrome の chrome://extensions/ を開いて、デベロッパーモードをチェックして、拡張機能のパッケージ化で、パッケージを作成します。出来上がったパッケージは、拡張子が crx になります。出来上がったら、Google Chrome にドラッグ & ドロップするとインストール完了です。

細かいチューニング方法

オプションの詳細(英文)で細かい設定をチェックして、現在インストール済みのオプションを変更して状況を確かめます。

変更するには、Google Chrome を終了させて『C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\Default\Preferences』を開いて manifest.json の内容がコピーされた部分を変更します。インストール先の manifest.json は変更しても状態は変化しません。Preferences の内容を変更したら、インストール先の Cached Theme.pak を削除して Google Chrome を起動すると変更されているばすです。(Cached Theme.pak は、Google Chrome 起動毎に作成されるので、この処理を繰り返して完成させます)

全ての変更が終わったら、パッケージ用の manifest.json に内容をコピーして再度パッケージ化すれば、オリジナルのテーマパッケージが完成します。





posted by at 2013-11-01 01:05 | Comment(0) | Google | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します