2013年6月6日木曜日

Plone 3 or Plone 4 でロゴの変更方法から眺める外観カスタマイズ | NO BIG DEAL

Plone 3 or Plone 4 でロゴの変更方法から眺める外観カスタマイズ | NO BIG DEAL:

Plone の外観の変更方法はいくつかありますが、ロゴなどほんの一部を手軽に変更したいという事であれば ZMI から変更をかけるのがオススメです。ZMI からロゴを変更する方法はいろんなサイトでも紹介されているのですが、ここではロゴの変更方法を通して他の場所も変更できる人になれるよう Plone の画面形成の仕組みも含めて紹介したいと思います。
ながーく書いていますがやる事はこれだけです。
「ZMI で [ロゴを変えたいサイト]/portal_skins/custom に “logo.png” というイメージを追加する」
あっという間に終わる作業ですが、仕組みを理解しながら進めると応用がきくのでよかったら読んでみてください。

Plone のロゴのファイル名を確認する

ロゴを変更したい。どこを変更すれば?と自力で探すには、まずは今画面に表示されている Plone のロゴファイル名を知らなくては。
カスタマイズ前の Plone のサイトを開いて、ソースコードを確認すると、(画像は Chrome のディベロッパーツールの画面)ファイル名は “logo.png” であることが分かります。
ファイル名が分かったので、次はこのファイルをどこで読み込んでいるか探してみましょう。
Plone の外観 (Skin) の設定について
Plone は好きな「テーマ」を作ったりインストールしてベースとなる外観を変更でき、Plone デフォルトのサイトもインストーラに含まれているテーマが適応されています。
ZMI にログインして [ロゴを変えたいサイト] > portal_skins > propertiesタブを開きます。下の方へスクロールするとデフォルトテーマが表示されています。Plone4デフォルトでは “Sunburst Teme” というテーマが適応されていることが分かります。
同画面の上方では各テーマが適応されたときにフレームワークがどのような順番で表示すべきファイルを検索するかの順番が示されています。今は “Sunburst Teme” が設定されているので3番目の欄を眺めると、テーマ自身を定義していると思われる “sunburst *” よりも何よりも “custom” が先頭にありますね。これは、例えばロゴであれば “logo.png” というファイルを “custom” から順に検索する事を意味しています。つまり、”custom”に定義すればどんな設定よりも優先して適応されるという事です。
ロゴ画像を置き換えてみる
では plone.png ははたしてどこから引っ張って来た画像なのでしょうか? [ロゴを変えたいサイト] > portal_skins > find タブへ移動して with ids:logo.png で検索を実行してみましょう。
logo.png は見つかりましたか?複数ヒットしても、ファイル名の前に * が付いているものが実際に参照されているファイルです。ロゴを変えるにはそのファイルを変更すれば良いので、迷わず そのファイルをクリック。現在表示されているロゴに間違いことを確認してカスタマイズをクリック。”File Data” として新しいロゴファイルを指定してアップロードすればロゴが置き換わります。

'via Blog this'

0 件のコメント:

コメントを投稿