ploneサイトを作成すると、このようなロゴが左上に表示されます。このロゴを自分が作成したファイルと入れ替えます。

目次

• ロゴを作成する[create]
• ロゴファイルをアップロードする[upload]
• ロゴを設定する[setting]
• お気に入り用アイコンをアップロードする[favicon]

ロゴを作成する[create]

まずはロゴを作成します。ロゴの作成は自分で一から作ったり、ツールを使ったりして、自分の気に入ったものを作成してください。(無責任)

ちなみに、私は Gimp for Windows を使用して作成しています。

ロゴ&バナー無料自動作成 などのサイトを利用するのも手だと思います。

それから TypeNow.net に面白いフォントがありますので、ここから好みのフォントを持ってくるのもよいと思います。

とりあえず、ここで作成したファイルは logo.png という名前の画像ファイルということにしておきます。

ロゴファイルをアップロードする[upload]

次に作成したファイルをZopeサーバにアップロードします。

アップロードする場所は、ploneサイトの直下ではありません。

1. ploneの下の portal_skins の下の custom フォルダに移動します。

   

   初期状態では、このフォルダには何もアイテムは存在しません。

   

2. このフォルダに Image を追加します。

   

   先ほど作成したファイルを参照して指定し、追加します。Titleには適当な名前を指定してください。(必須ではありません)

   

3. これで、ロゴファイルがアップロードされました。

   

ロゴを設定する[setting]

これだけでは、ロゴファイルは変更されません。次にPloneサイトに対して、ロゴファイル名が logo.jpg から logo.png に設定を変更する必要があります。

1. base_properties を開く

   Plone サイトの色やフォント、ロゴに関する設定は portal_skins/plone_styles の下の base_properties というアイテムに設定されています。このアイテムを選択して開きます。

   

   この画面が base_properties の中身になります。3行目に logoName という項目が存在し値が logo.jpg に設定されているのがわかります。

   

   しかし、この画面を見てのとおり、入力フィールド等がないため、値の変更ができません。また、アイテムの種類を表すアイコンも、変更できないことを表すために鍵のマーク( )が付いてます。

   なぜ、値の変更ができないかというと、この base_properties というアイテムはWindowsやLinuxのファイルシステム上のファイルとして存在しているからです。実際のファイルは以下の場所にあります。

   • CMFPlone/skins/plone_styles/base_properties.props
2. base_properties をカスタマイズする

   このアイテムを変更するための仕組みが Plone には用意されています。そのためには変更したいアイテムで Customize ボタンをクリックします。

   

   すると、base_properties の内容が portal_skins/custom の下にフォルダのプロパティという形でコピーされます。

   

   これで、カスタマイズができるようになったので、logoName の値を logo.png に変更して保存します。

このように、Ploneサイトをカスタマイズするには、以下のような手順になります。

1. 設定の元となっているアイテムを portal_skins の下から探す。
2. アイテムを参照して Customize ボタンを押して custom フォルダにコピーを作成する。
3. コピーしたアイテムを修正する。

お気に入り用アイコンをアップロードする[favicon]

ロゴファイルをカスタマイズしたので、ついでにお気に入り用アイコン favicon.ico ファイルもカスタマイズします。

Ploneサイトの初期設定では、お気に入りアイコンとして Plone のアイコンが使用されています。これを自分のサイト用アイコンに入れ替えます。

この手順はロゴファイルのアップロードとほぼ同様です。あらかじめ favicon.ico というファイルを用意し、Ploneサイトの下の portal_skins/custom フォルダにImageアイテムとして追加します。

あとは、Web browserでお気に入りのアイコンが変更になっていることを確認します。browserがキャッシュを読み込んで表示する場合があるので、browserの再起動やキャッシュの消去が必要な場合があります。

Ploneではさまざまな部分に対して柔軟にカスタマイズを行なうことができます。 しかし、逆に柔軟にカスタマイズができるために、ほとんどの部分を変更することが可能で、どこにどのような修正項目が存在するかがわかりづらくなっています。

ここでは、Ploneサイトをカスタマイズするときに、よく設定を変更すると思われるアイテムについて説明します。

目次

• Properties[prop]
• portal_propertyes[portalprop]
• portal_skins[skins]

Properties[prop]

ここでは、Ploneサイトに関する属性を設定することができます。

また、一部の項目については、Ploneの設定画面からも行なうことが可能です。 Ploneの設定画面へのアクセス方法は以下のとおりです。

1. 管理ユーザでログインした状態でPloneサイトにアクセスし、ploneの設定 を選択します。

   

2. Ploneの設定画面が表示されるので、ポータルの設定 を選択します。

   

3. ポータルの設定画面が表示されるので、必要な項目があれば修正して保存します。

   

設定項目は以下のとおりです。

• title, description このPloneサイトのタイトルと説明文を記述します。
• email_from_address, email_from_name このPloneサイトからメールを送信する場合のFromのメールアドレスと名前を記述しま。
• validate_email ここをチェックすると、ユーザ登録する場合に自動的にパスワードを設定してメールでお知らせするようにします。
• left_slots, right_slots Ploneの画面でコンテンツの左右にどの portlet を表示するかを指定します。ポートレットの変更については ポートレットのカスタマイズ を参照してください。

  この項目はポータルの設定画面からは変更できません。

portal_propertyes[portalprop]

ここにはポータルに関する4種類の属性が存在します。設定を変更することがよくあるのは site_properties だけだと思います。(他をどのように設定すべきかあまり知らないだけですが)

site_properties で変更する可能性がある主な項目を以下に記述します。

• localTimeFormat 日時を表示するときのフォーマットを指定します。初期設定では %Y-%m-%d となっています。
• localLongTimeFormat 日時を表示するときの長い形式のフォーマットを指定します。初期設定では %Y-%m-%d %H:%M となっています。
• default_language サイトの言語を指定します。日本語のサイトの場合は ja を指定します。
• ext_editor 外部エディタを使用できるかどうかを設定します。チェックをはずすと外部エディタが使用できなくなります。外部エディタについては エディタを使って編集 を参照してください。

portal_skins[skins]

ロゴを変更する でも説明した通り、Ploneサイトの見た目を変更するのは、主に portal_skins の下にあるアイテムを custom フォルダにコピーして編集することになります。

portal_skins フォルダの下で主にカスタマイズのために修正するアイテムが入っているフォルダについて説明します。

• custom 自分でカスタマイズしたアイテムを入れます。
• plone_images 各種画像ファイルが入っています。
• plone_portlets 各種portletのPage Templateが入っています。
• plone_styles Ploneサイトの基本属性や各種cssが入っています。 自分のサイト用の独自 CSS の設定は ploneCustom.css を使用して行います。
• plone_templates Ploneサイトの画面を構築する、基本的なPage Templateが入っています。全体の構成を大きく変更する場合は base_template 等をカスタマイズします。

目次

• portletを変更[change]
• portletの一覧[list]

portletを変更[change]

Ploneサイトの初期状態では左右にportletが表示されます。この状態ではコンテンツを表示する領域が狭くなるので、左側にのみportletを表示するようにします。また、カレンダーとログイン用のportletは使用しないので削除します。

• 左側に表示するportlet: portlet_navigation, portlet_recent
• 右側に表示するportlet: なし

1. PloneサイトのPropertiesを表示します。

   

2. 以下のように値を変更して保存します。
   • left_slots

     here/portlet_navigation/macros/portlet
     here/portlet_recent/macros/portlet
     

   • right_slots: なし

   

3. 変更終了後Ploneサイトにアクセスし、左右の表示が変更されていることを確認します。

   

portletの一覧[list]

portal_skins/plone_portlets にある、portletの名前とその内容を以下に説明します。他に ○○_slot という名前のものもありますが、これは古いバージョンの plone で使われていたものなので、気にしなくていいです。

• portlet_calendar 月単位のカレンダーを表示します。イベントアイテムが生成されると、日付の色が反転して表示されます。また、日付の上にカーソルを持っていくと、イベントの詳細が表示されます。

  

• portlet_events 現在日から近いイベントアイテムの一覧が表示されます。

  

• portlet_favorites ユーザがお気に入りに登録したアイテムの一覧が表示されます。

  

• portlet_login ログイン用の入力フォームが表示されます。

  

• portlet_navigation アイテムのナビゲーション情報が表示されます。

  

• portlet_news ニュースアイテムの一覧が新しい順番に表示されます。

  

• portlet_prefs Ploneの設定に関する項目が表示されます。管理者のみ表示できます。

  

• portlet_recent 最近公開したアイテムの一覧が表示されます。ログインすると表示されます。

  

• portlet_related アイテムのプロパティにキーワードが設定されている場合、同じキーワードが設定されているアイテムの一覧が表示されます。

  

• portlet_review 公開するために審査を待っているアイテムの一覧を表示します。サイトの管理者やレビュワーはここに入っているアイテムの内容をチェックし、公開するか却下するかなどの判断をします。なお、一人でサイトを管理する場合は必要ありません。

  

画面左上のロゴの下表示されているポータルタブの項目を変更します。

ここではメンバータブを表示しないようにし、新規にblogを表示するタブを作成します。

目次

• メンバータブの非表示[invisible]
• blogタブの追加[add]

メンバータブの非表示[invisible]

ここでは、初期状態ではポータルタブの一番右側にある メンバー タブを表示しないようにします。

1. Zopeの管理画面を表示し、portal_actions にアクセスします。

   

2. すると portal_actions が表示されます。ここには、Ploneのどこでどのような操作ができるかのアクションが定義されています。

   

3. ここに Members という名前のアクションが定義されているので、このアクションの Visible? チェックボックスのチェックをはずします。

   

4. 次に、画面の一番下の方までスクロールして Save ボタンをクリックし、設定を保存します。

   

5. ploneサイトに再度アクセスすると、 メンバー タブが表示されなくなっていることが確認できます。

   

blogタブの追加[add]

次に、/takalog という相対パスでアクセスできる、blog という名前のタブを作成します。タブを新規に作成するためには、portal_actions にアクセスしてアクションの追加を行なう必要があります。

1. Zopeの管理画面を表示し、portal_actions にアクセスします。

   

2. 画面の一番下に Add an action というフォームがあるので、以下の項目を記述して Add ボタンをクリックします。

   

   設定項目の詳細は以下のとおりです。

   • Name アクションの名前(表示される文字列)を指定します。日本語の指定も可能です。
   • Id アクションのIdを指定します。英数字のみが使用できます。
   • Action アクションとして何が実行されるかを指定します。 この場合はploneサイトのURLから相対パスで /takalog にアクセスするために、string:$portal_url/takalog と指定します。
   • Condition このアクションを実行可能とする条件がある場合は記述します。今回は常に実行可能なので記入する必要はありません。
   • Permission アクションを実行できる権限を設定します。誰でも実行可能なので View を指定します。
   • Category アクションが属するカテゴリを指定します。このカテゴリによって表示される場所が変わります。タイトル下のタブの場合は portal_tabs というカテゴリを指定します。
   • Visible? アクションを表示するかどうかをチェックします。
3. ploneサイトに再度アクセスすると、 blog タブが表示されているが確認できます。なお、blog と小文字で表示されているのはploneのCSSの初期設定によるものです。

   

以上で、ポータルタブの変更は終了です。同じような手順で、他のアクションについても追加、変更、削除を行なうことができます。

「最近の公開」portlet(portlet_recent)は、最近公開したアイテムを5件まで表示してくれる便利な portlet です。

しかし、これをサイトの新着情報変わりに使おうとすると、以下の不満になるので変更しようと思います。

• ログインしないと表示されない
• 5件しか表示されない
• アイテムの種類がわからない
• 表示されている日付が更新日時ではなく作成日となっている

portletの変更

以下にカスタマイズの手順を記述します。

1. zopeの管理画面で portal_skins/plone_portlets にアクセスします。

   

2. 変更したいportlet、portlet_recent を選択して開きます。

   

3. ソースが表示されるので、Customize ボタンをクリックして custom フォルダーにコピーを作成します。

   

4. あとはコピーしたソースファイルを変更するだけです。

   私が変更したソースの例を portlet_recentソース においておきます。

5. 画面を再表示し、portletの変更が反映されていることを確認します。

ここでは、ploneサイトの色とフォントを変更する方法について記述します。

目次

• フォントと色の変更方法[how]
• フォントを変更[font]
  • フォントのサンプル[sample]
• 色を変更[color]
  • 基本[basic]
  • リンク関連[link]
  • 編集関連[edit]
  • その他[other]

フォントと色の変更方法[how]

ploneサイトのフォントや色を変更するためには、どこをどのように変更すればよいかについて説明します。

ploneサイトの色やフォントの設定は、CSS(Cascading Style Sheet)で行なわれています。

ploneサイトの色やフォントを変更するためには、ロゴの変更 で説明した base_properties のプロパティの値を変更します。

また、実際にここで変更したフォントや色についての設定は、plonePresentation.css というcssファイル上で定義されて見た目を変更しています。

フォントを変更[font]

フォントは初期状態では、 "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif と設定されています。

なお、フォントを設定する項目は2種類あります。

• fontFamily 全体的に使用されるフォント。
• headingFontFamily heading(見出し)に使用されるフォント。

ここをどのように変更するかは好みの問題なのですが、ここでは Verdana, Arial, sans-serif と設定することにします。

フォントのサンプル[sample]

主なフォントのサンプルです。

• serif あいうえおアイウエオABCDEabcde
• sans-serif あいうえおアイウエオABCDEabcde
• cursive あいうえおアイウエオABCDEabcde
• fantasy あいうえおアイウエオABCDEabcde
• monospace あいうえおアイウエオABCDEabcde
• Verdana あいうえおアイウエオABCDEabcde
• Lucida あいうえおアイウエオABCDEabcde
• Helvetica あいうえおアイウエオABCDEabcde
• Arial あいうえおアイウエオABCDEabcde

色を変更[color]

色もフォントの変更と同様に base_properties で値を変更します。

色の設定項目と初期設定の値を以下に載せます。

基本[basic]

• fontColor Black
• backgroundColor White
• globalBorderColor #8cacbb
• globalBackgroundColor #dee7ec
• globalFontColor #436976

リンク関連[link]

• linkColor #436976
• linkActiveColor Red
• linkVisitedColor Purple

編集関連[edit]

• contentViewBorderColor #74ae0b
• contentViewBackgroundColor #cde2a7
• contentViewFontColor #578308
• notifyBorderColor #ffa500
• notifyBackgroundColor #ffce7b

その他[other]

• evenRowBackgroundColor #f7f9fa
• oddRowBackgroundColor transparent
• discreetColor #76797c
• helpBackgroundColor #ffffe1
• inputFontColor Black

ここでは、下記のようなploneサイトのフッターの表示を変更する方法について説明します。

目次

• フッターの定義[define]
• フッターの変更[footer]
• colophonの変更[colophon]

フッターの定義[define]

まず最初に、フッターがどこに定義されているかを探す必要があります。 フッターの定義を探すために、main_template というPage Templateを参照します。 Zopeの管理画面で、portal_skins/plone_template を選択します。

次に、ploneのページの全体の構成が記述してある、mainn_template を選択して参照します。

main_template を参照すると、一番下の方に以下のように記述してある部分があります。:

      <metal:block i18n:domain="plone">
        <div id="portal-footer" metal:use-macro="here/footer/macros/portal_footer">
          Footer
        </div>

        <div id="portal-colophon" metal:use-macro="here/colophon/macros/colophon">
          The colophon area - contains details about the production of
          the site. Typically "powered by" buttons, standards, tools used.
        </div>
      </metal:block>

この記述を読むと、フッター部分は footer と colophon の2ヶ所で定義されていることがわかります。(use-macro の部分です。)

定義されている部分がわかったので、以下でそれぞれの部分を編集します。

フッターの変更[footer]

まずは、上の部分 footer の定義を変更します。 footer も plone_templates に定義してあります。 Customize ボタンをクリックして、custom フォルダにコピーを作成します。

このサイトでは以下のように変更しました。:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
      i18n:domain="plone">
    <body>

    <div id="portal-footer" metal:define-macro="portal_footer">
      Copyright &copy; 2005 -
      <span tal:define="now modules/DateTime/DateTime" tal:content="now/year" />
      by
      <a href="http://takanory.net">takanori</a>
    </div>

    </body>
    </html>

colophonの変更[colophon]

続いて動揺に下の部分 colophon の定義を変更します。 colophon も plone_templates に定義してあります。 Customize ボタンをクリックして、custom フォルダにコピーを作成します。

このサイトでは以下のように変更しました。:

    <html xmlns="http://www.w3.org/1999/xhtml"
          xml:lang="en" lang="en"
          i18n:domain="plone">

    <head><title></title></head>
    <body>

    <div id="portal-colophon" metal:define-macro="colophon">
      Powered by
      <a href="http://vinelinux.org">Vine Linux</a> /
      <a href="http://zope.org">Zope</a> /
      <a href="http://plone.org">Plone</a>
    </div>

    </body>
    </html>

上記の変更により、以下のようにフッターが変更できました。

目次

• アイテムに対する議論の許可[item]
• タイプに対する議論の許可[type]
• 匿名ユーザがコメント追加[anonymous]
• 匿名ユーザでも名前を設定[username]
• 注意点[caution]

アイテムに対する議論の許可[item]

ある特定のアイテム(例えばこの文書)に対してコメントが付けられるようにするには、まず プロパティ タブをクリックします。

すると、このアイテムに対するプロパティ(metadataという言い方もします)の設定画面が表示されます。ここにはキーワードや公開年月日の著作権などの様々な入力欄があります。

このアイテムに対してコメントが付けられるようにするには、 'このアイテムの議論を許可する' という設定項目の値を 'デフォルト' から 許可する に変更します。

すると、このように コメントを追加 ボタンが表示されるようになります。 このボタンをクリックすることにより、特定のアイテムに対してコメントをつけられるようになります。

タイプに対する議論の許可[type]

上記の方法でアイテムに対してコメントを付けられるようにする設定はわかりました。しかし、この方法ではploneサイト上の全てのアイテムに対して同様の処理を行なわないといけないため、非常に大変です。

そのような場合、ploneではアイテムの種類(タイプ)毎にコメントを付けられるかの設定を行ないます。 (その値が、デフォルト としてアイテムに反映されます。)

その設定を行なうためには、zopeの管理画面を開いて portal_types を選択します。

すると、このploneサイトで扱えるアイテムの一覧が表示されます。 ここで、コメントを付けられるようにしたいアイテムの種類(タイプ)を選択します。 ここでは Document( = 文書)を選択しています。

Document タイプの詳細を表示すると、Allow Discussion? というチェックボックスがあります。ここが、この種類(タイプ)のアイテムのコメントを付けられるかどうかの初期値となっています。ここをチェックして保存します。

このように設定すると、このploneサイト上の全ての文書タイプのアイテムに対して、コメントを追加 ボタンが表示されるようになります。

匿名ユーザがコメント追加[anonymous]

初期設定ではコメントの追加は、ploneサイトのメンバーでなければ実行できません。もし、ログインしていない状態でコメントをつけられるアイテムを表示した場合には コメントを追加するためにログイン というボタンが表示されます。

このように表示されるのは、ploneの初期設定ではコメントの追加は匿名ユーザに対して許可されていないからです。 もしも匿名ユーザでもコメントを書き込みできるようにするためには、権限の変更を行なう必要があります。 権限の変更はzopeの管理画面でploneサイトのトップのアクセスした状態で Security タブをクリックします。

この、セキュリティ設定の画面では Manager, Member 等の各ロール(ユーザが属するグループのようなもの)ごとに、許可する操作をチェックしています。

コメントを追加する操作は Reply to item なので、ここを Anonymous (匿名)でも書き込みができるようにチェックボックスをチェックして保存します。

すると、このサイトのように文書に対して匿名でもコメントが追加できるようになります。

匿名ユーザでも名前を設定[username]

ここまでの設定で匿名ユーザもコメントを書けるようになりましたが、↓のコメントに書いてある通り匿名の場合は必ず「投稿者 無名ユーザ」と表示されるようになっていました。

そこで、匿名ユーザでも(信頼性はないけれど)名前を書けたほうがいいだろう、ということでカスタマイズしてみました。

なお、下記の設定変更の例は plone 2.1 をベースに書いているので、いじるポイントは近いと思いますが plone 2.0.x ではちょっと違う感じになると思います。

まず、コメントを書く込むためのスクリプト /portal_skins/plone_form_scripts/discussion_reply をカスタマイズします。

まず、if username or password: にぶらさがっている部分をばっさり削除かコメントアウトします。ここは匿名ユーザがユーザ名とパスワードを指定したときに入ってくる部分ですが「コメント書き込み時に初めて認証などしない!!」とわりきってばっさり削除です。

次にユーザ名を取得している部分を変更します。元のコードでは下記のように認証されたユーザのユーザ名を取得しています。

creator = mtool.getAuthenticatedMember().getUserName()

ここを単純に入力フォームに入力されたユーザ名を設定するようにします。

creator = username

これで、コメント追加時に匿名ユーザは自分の名前を指定してコメントを書き込めるようになります。

また、このサイトではついでに /portal_skins/plone_forms/discussion_reply_form もカスタマイズして、パスワード入力フォームを表示しないようしています。

匿名ユーザでのコメント追加のテスト用文書を作成しました。 コメント追加テスト からどうぞ。

注意点[caution]

匿名でコメントを追加できるようにするのは、書き込みが気安く活発になる反面、下記のような危険性があるので注意が必要だと思います。

• 誰がどのコメントを書いたのかわからない
• 外部に公開するサイトの場合、コメントSPAMの危険性にさらされる

とりあえずこのサイトでは、文書とファイルに対しては、匿名ユーザによるコメントを許可しておこうと思います。 なにか問題があったらやめるかも知れませんが。

イベントを作成するときには、イベントの種類 が設定できます。 しかし、初期状態では選択肢は英語のものしか存在しません。

ここでは、ここに表示される内容を日本語の選択肢に変更する手順について説明します。

1. この情報は portal_metadata に設定されています。 zopeの管理画面でploneサイトのルートにある portal_metadata を選択します。

   

2. portal_metadata を開いたら、値が設定してある Elements タブをクリックします。

   

3. 次に、Subject をクリックします。

   

4. Subject エレメントを表示すると、Event に対して Appointment 等の見たことのある単語が設定されています。

   

5. ここを任意の項目に書き換えて、Update ボタンをクリックします。

   

6. 設定が終了したあとにイベントを作成すると、 イベントの種類 の選択肢が日本語のものに変更されていることが確認できます。

   

目次

• RSS配信コンテンツを作成[create]
  • スキンの作成[skin]
  • フォーマットを確認[check]
  • ソースの変更[modify]
• headerを変更[header]

RSS配信コンテンツを作成[create]

RSSは色々と規格が存在するようで、今回は RSS 1.0 と RSS 2.0 に対応するようにします。

スキンの作成[skin]

1. 最初に以下の2つのソースコードをダウンロードします。
   • index.rdf(RSS 1.0)
   • index.xml(RSS 2.0)
2. 次にzopeの管理画面を開き、portal_skin/custom フォルダにアクセスします。

   

3. Page Templateアイテムを追加します。

   

4. ダウンロードしたファイルを指定して、'Add and Edit'ボタンをクリックしてPage Templateアイテムを作成します。

   

5. すると以下のようにエラーメッセージが表示されますが、これは Content-Type が text/xml ではなく text/html となっているためです。 (画像の右上をチェックしてください。)

   

6. Content-Type を text/xml に変更して保存すると、以下のようにエラーメッセージが表示されなくなります。

   

7. 上記の処理を繰り返し index.rdf, index.xml という2つのアイテムを作成します。

   

フォーマットを確認[check]

作成した2つのファイルが配信する内容が、フォーマット的に正しいかを Feed Validator を使用してチェックします。

下記のURLを使ってチェックして、フォーマットに問題がないことを確認しました。

• http://feedvalidator.org/check.cgi?url=http://takanory.net/index.rdf
• http://feedvalidator.org/check.cgi?url=http://takanory.net/index.xml

ソースの変更[modify]

配信対象となるのは、最近公開(published)したアイテムを新しい順に15件としています。 件数や対象とするアイテムの種類を限定したい場合は、両方のソースの下記のアイテムを検索する部分を書き換えてください。:

      <tal:search tal:define="results python:here.portal_catalog.searchResults(
        sort_on='modified',
        sort_order='reverse',
        review_state='published')[:15]">

まずは、検索部分について説明します。

• 対象となる件数を変更する場合は [:15] の部分の数字を変更します。
• 対象とするアイテムの種類を限定する場合は、portal_type という条件を追加します。 例えば、文書とフォルダのみを対象とする場合は以下のように変更します。:

        review_state='published', portal_type=['Document','Folder'])[:15]">
  

headerを変更[header]

次に、RSS情報へのリンクをHTMLのヘッダに入れるために、ploneのヘッダを定義している部分を変更します。

1. zope管理画面を開き portal_skins/plone_templates にアクセスします。

   

2. header を選択して Customize ボタンをクリックして、編集用に custom フォルダにコピーします。

   

3. コピーした header に以下のようにRSS情報へのリンクを追加します。

   変更前:

       <!-- Basic crude style for Netscape4.x - This can be removed
            if you don't want the special NS4 look - it will still work,
            just be plain text instead. Column layout for Netscape4.x included -->
       <link rel="Stylesheet" type="text/css" href="" tal:attributes="href string:$portal_url/ploneNS4.css" />
   

   変更後:

       <link rel="alternate" type="application/rss+xml" title="RSS 1.0" href=""
             tal:attributes="href string:$portal_url/index.rdf" />
       <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href=""
             tal:attributes="href string:$portal_url/index.xml" />
   
       <!-- Basic crude style for Netscape4.x - This can be removed
            if you don't want the special NS4 look - it will still work,
            just be plain text instead. Column layout for Netscape4.x included -->
       <link rel="Stylesheet" type="text/css" href="" tal:attributes="href string:$portal_url/ploneNS4.css" />
   

4. 変更後に plone サイトの任意のページを表示し、ヘッダにリンク情報が表示されていることを確認します。 また、 Firefox で表示すると、ライブブックマークに追加するための表示が出るようになります。

   

目次

• 偶数行の色を変更[evencolor]
• 表示幅の変更[columnwidth]
• 行間の幅の変更[padding]

偶数行の色を変更[evencolor]

plone の portlet を表示するときに、偶数行には色がつくようになっています。 この色は初期状態では #f7f9fa という薄い水色になっています。

この色だとこのサイトの他の色と合わないので、変更します。

色を変更するために、portal_skins/custom/base_properties にアクセスします。 (custom フォルダに base_properties が存在しない場合は、 /portal_skins/plone_styles/base_properties にアクセスして Customize ボタンをクリックしてコピーを作成します。) 次に、Properties タブをクリックして、プロパティを表示します。

portlet の偶数行の色は evenRowBackgroundColor というプロパティに設定してあります。 ここでは値を #e9ebb1 に変更します。

変更を保存して portlet を再表示すると、偶数行の背景色が変更されていることが確認できます。

表示幅の変更[columnwidth]

次に、portlet の表示幅を変更します。 blog エントリーなどでタイトルを表示すると、たくさん改行されて窮屈な感じが吸うrので、portlet の表示幅を標準よりも広げようと思います。

portlet の表示幅は portal_skins/custom/base_properties の columnOneWidth (左側の表示幅)と columnTwoWidth (右側の表示幅)というプロパティで設定しています。

ここでは、左側の portlet の表示幅を広げるので、columnOneWidth プロパティの値を初期値の 16em から 24em に変更します。

行間の幅の変更[padding]

最後に、portlet の中の行間が広く高さをとるので、この幅を狭くします。

この行間の幅は今まで設定してきたプロパティではなく、plone.css に記述してあります。 しかしここでは、plone.css は直接編集しないで ploneCustom.css に記述を追加する形で設定を変更します。

base_properties と同様に portal_skins/plone_styles にアクセスし、 ploneCustom.css を custom フォルダにコピーします。

次に、ploneCustom.css に以下のように記述します。:

    /* <dtml-var "enableHTTPCompression(request=REQUEST, debug=1, css=1)"> (this is for http compression) */
    /* <dtml-with base_properties> (do not remove this :) */
    /* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either :) */

    .portletContent {
      padding: 0.3em 0.5em;
    }

    /* </dtml-with> */

真中の .portletContent が追加した記述で、余白を上下に 0.3em 左右に 0.5em とるように指定しています。(初期値ではどちらも 1em となっています。)

これらの変更により、 portlet は以下のように表示されるようになりました。

Google Adsense は、自分が持っている Web のコンテンツと一緒に、Google さんがそのコンテンツの内容にあった広告を表示してくれる仕組みです。

で、その広告がクリックされると広告収入がちょっとだけ入ったりするんですが、まぁとりあえず自分のサイトの内容にどれだけマッチした広告が表示されるかを見ていても、なかなか楽しいです。

コンテンツ向け Adsense

まずはコンテンツに連動して Google Adsense が表示されるようにします。

以前は google adsence ポートレットを入れてみた に書いたとおり、 Ploneのサイト構築メモ 2 --- コンテンツの配置とタブ --- Emerge Technology にある portlet を使っていました。 でも、portlet が縦に長くなりすぎてコンテンツと関連しているって感じがでないので、コンテンツの下に表示するようにしてみました。

実際に Google Adsense を表示するためのコードは portal_skins の plone_template/main_template をカスタマイズして記述します。

変更前:

                </div>

              </metal:block>

            </td>
            <!-- end of main content block -->

変更後:

                </div>

                <div id="content">
                  <div class="documentContent" id="region-content">
                    <h1>Google Adsense</h1>
                    <script type="text/javascript"><!--
                    google_ad_client = "pub-8733335389423940";
                    google_ad_width = 336;
                    google_ad_height = 280;
                    google_ad_format = "336x280_as";
                    google_ad_type = "text";
                    google_ad_channel ="";
                    google_color_border = "FFFFFF";
                    google_color_bg = "FFFFFFF";
                    google_color_link = "436976";
                    google_color_url = "436976";
                    google_color_text = "000000";
                    //--></script>
                   <script type="text/javascript"
                     src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                    </script>
                  </div>
                </div>

              </metal:block>

            </td>
            <!-- end of main content block -->

google_ad_client や色の指定のパラメータなどは、環境に合わせて適宜変更してください。

検索向け Adsense

次に、plone の右上の検索ボックスを検索向けの AdSense に変更します。

plone 2.1 では検索結果を動的に表示してくれる LiveSearch という機能があるんですが、日本語処理とかがちょっと微妙だったりします。 というわけで、ためしに検索ボックスも Google Adsense のものに変えてみます。

方法は簡単で zope の管理画面で global_searchbox という Page Template をカスタマイズして使用します。

カスタマイズの方法は通常通り protal_skins/plone_templates にあるものをコピーしてから編集する形でも構いませんが、ここでは global_searchbox のソース をそのまま利用して portal_skins/custom フォルダに global_searchbox という名前の Page Template を作成します。

なお、このコードをコピーして使用する場合、サイトに合わせて変更した方がいいポイントは以下の通りです。

• domains の値(value)に自サイト名を入れます。
• 2つ目のラジオボタンに自分のサイト名を入れます。
• client の値に自分の Google Adsense の ID を入れます。
• cof の値に自分のサイトロゴやカラーに合わせてカスタマイズした値を入れます。

このサイトのコンテンツは plone と COREBlog によって記述しております。 その全コンテンツを Google Sitemaps という形式で出力して、Google に正しくクロールしてもらおうと思います。

その方法は、 sitemaps.xml という名前の Page Template を、plone サイトのルートフォルダに作成します。

実行結果は http://takanory.net/sitemap.xml を参照してください。

なお、Page Template を作成するときに Content-Type を text/xml に変更することを忘れないで下さい。

とりあえず Sitemaps の登録は Google Sitemaps のページでアカウントを作成し、そこから行う必要があるようです。

コードの解説

sitemaps.xml のコードは Add a Google Sitemap のページに書いてあるコードを参考に作ってあります。

カスタマイズのポイントは以下の通りです。

• 6行目の portal_type で対象とする plone のコンテンツの種類を指定してあります。この内容を plone サイトにあわせて修正します。Topic や News Item が対象になるサイトもあると思います。
• 7行目の review_state で visible は対象としない場合は、リストからはずします。
• 17〜20行目では、コンテンツの種類が File の場合とそれ以外の場合で、対象とする URL を変更してあります。
• 25行目からが COREBlog 対応の部分です。COREBlog のアイテムの名前を適宜 blog 等に修正してください。

内容はとくにありません。

---

(注)ここに書いた手順を行うよりも PloneLightboxJS プロダクトを使うほうが、今は楽だと思います。

---

plone 2.1 ではフォルダにたくさんある画像をアルバムっぽく見せるための atct_album_view という表示形式が最初からついています。

ここでは、その atct_album_view をカスタマイズして、 Lightbox JS というものを使用して、Web 2.0 っぽく表示させる方法について説明します。

目次

• ダウンロード[download]
• javascript を登録[javasciprt]
• css を追加[css]
• lighbox.js を使う[use]
• atct_album_view をカスタマイズ[album]

ダウンロード[download]

Lightbox JS のページから以下の4つのファイルをダウンロードします。

ダウンロード後、ZMI から portal_skins/custom/ にこれらのファイルをアップロードします。

• lightbox.js lightbox の本体の javascript です。File として保存します。
• lightbox.css lightbox が使用する css です。File として保存します。
• overlay.png 影として使用する画像です。Image として保存します。
• loading.gif 読み込み中に表示する gif です。Image として保存します。

javascript を追加[javasciprt]

つぎに、アップロードした lightbox.js を plone に登録します。

javascript を登録するために、ZMI で portal_javascripts をクリックします。

すると、plone 2.1 に登録されている javascript の一覧が表示されます。

ここに、lightbox.js を追加します。ID に lightbox.js と記述して Add ボタンをクリックします。他の項目は初期状態のままです。

これで、lightbox.js もマージされた javascript が plone のサイトで読み込まれるようになります。

css を追加[css]

同様に lightbox.css も plone に登録します。

css を登録するために、ZMI で portal_css をクリックします。

そして lightbox.js のときと同じように、lightbox.css を追加します。 CSS Media には screen と記述します。他の項目は初期状態のままです。

これで、lightbox.css がマージされた css を plone サイトが読み込むようになります。

lighbox.js を使う[use]

ここまでの設定で lightbox.js を plone サイトで使えるようになっています。

ちなみに、上のほうにある lightbox.js と lightbox.css の追加画面は lightbox を使用しているため、画像をクリックすると周辺がグレイになって拡大画像が表示されるようになっています。

この部分は StructuredText で以下のように記述してあります。:

    <a href="../images/lightbox02.png" rel="lightbox">
    "Add lightbox.js":img:../images/lightbox02.png/image_preview
    </a>

このように、リンク先に画像を指定して rel="lightbox" という記述を追加すると、 lightbox を使用して表示するようになります。

atct_album_view をカスタマイズ[album]

最後に atct_album_view をカスタマイズして、アルバムの画像を lightbox を使用して表示するようにします。

portal_skins/ATContentTypes に移動して atct_album_view を開き、Customize ボタンをクリックして custom フォルダにコピーを作成します。

そして 41, 42 行目あたりを以下のように変更します。

変更前:

          <a tal:define="id python:int(b_start)+int(repeat['image'].number()-1)"
             tal:attributes="href string:${image/absolute_url}/view;
                             title image/Description">

変更後:

          <a tal:define="id python:int(b_start)+int(repeat['image'].number()-1)"
             tal:attributes="href string:${image/absolute_url}/image_large;
                             title string:${image/title} ${image/Description}" rel="lightbox">

変更した内容は以下の通りです。

• 画像をクリックしたときのリンク先が ${image/absolute_url}/view (画像の表次ページ) となっているのを ${image/absolute_url}/image_large (最大 768x768 の画像)に変更します。

  リンク先はオリジナルの画像でもいいんですが、PC 上で 1600x1200 の画像とか表示してもしょうがないかなと思い、とりあえず image_large にしています。

• lightbox で title の中身をキャプションとして表示するようになったので、画像の title と Description を使うように変更します。
• rel="lightbox" という記述を追加して、lightbox を使用するように変更します。

以上で、atct_album_view が lightbox を使用して拡大画像を表示するようになりました。

実際の動作は 写真のページ で画像をクリックして確認してみてください。