浜松ブラスバンド定期演奏会2008

よしくにの所属する浜松ブラスバンドの定期演奏会にいってきました。アクトシティ中ホール。残響多めのホールでした。2階席にした方がよかったかなぁ。

ゲスト指揮者＆ソリストのデヴィッド・キングはイケメンでしゃべりも楽しい人でした。もちろんコルネットの腕も文句なし。

よしくにはシンバルがとても上手くてとてもびっくりしましたが、一番驚いたのはプリンシパルの人の背の高さ。2mはあろうかという長身で、後ろの人が完全に隠れてしまうような感じでした。

演奏会後は中田島砂丘で日の入りを堪能し、定番のうなぎを食べて帰ってきました。

疲れたけど充実した一日でした。

カテゴリ: Nagosui

2008/11/17

Glossy Horizontal Menuを使う

PloneのIRCでGlossy Horizontal Menuを使いたいという人がいたので教えていたら途中でどっかにいってしまったので、悔しさのあまりここに書いておくことにします。

基本的には他のメニューも同じように使えるはずです。

マークアップの確認と変更

サンプルとPloneの間でマークアップが異なっていると適用できませんので、サンプルと同じようなマークアップになるようにHTMLを確認しておきます。

Ploneのglobalnavは下記のようになっています。

<tal:tabs tal:condition="view/portal_tabs"
          i18n:domain="plone">
    <h5 class="hiddenStructure" i18n:translate="heading_sections">Sections</h5>

    <ul id="portal-globalnav">
        <tal:tabs tal:repeat="tab view/portal_tabs"><li tal:attributes="id string:portaltab-${tab/id};
                            class python:view.selected_portal_tab==tab['id'] and 'selected' or 'plain'">
            <a href="" 
               tal:content="tab/name"
               tal:attributes="href tab/url;
                               title tab/description|nothing">
                Tab Name
            </a></li></tal:tabs>
    </ul>
</tal:tabs>

talで書かれているので見にくいかもしれませんが、レンダリングされると下記のようになります。

    <ul id="portal-globalnav">
        <li id="portaltab-index_html" class="selected">
            <a href="http://nagosui.org/PloneSkin" title="">ホーム</a></li>
        <li id="portaltab-Members" class="plain">
            <a href="http://nagosui.org/PloneSkin/Members" title="ユーザのホームディレクトリ">ユーザ</a></li>
        <li id="portaltab-news" class="plain">
            <a href="http://nagosui.org/PloneSkin/news" title="このサイトのニュース">ニュース</a></li>
        <li id="portaltab-events" class="plain">
            <a href="http://nagosui.org/PloneSkin/events" title="このサイトのイベント">イベント</a></li>
        <li id="portaltab-test" class="plain">
            <a href="http://nagosui.org/PloneSkin/test" title="">test</a></li>
    </ul>

一方今回のサンプルでは下記のようになっています。

<ul class="glossymenu">
    <li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>
    <li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>
    <li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li>    
    <li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li>    
    <li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li>    
    <li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li>    
</ul>

両者の間で異なっているのは、サンプルの方ではタブの名前が<b>でマークアップされている点です。そこでPloneのtalを、タブの名前が<b>でマークアップされるように変えてやります。

「ZMI→portal_view_customizations→plone.global_sections」を下記のように変更します。

<tal:tabs tal:condition="view/portal_tabs"
          i18n:domain="plone">
    <h5 class="hiddenStructure" i18n:translate="heading_sections">Sections</h5>

    <ul id="portal-globalnav">
        <tal:tabs tal:repeat="tab view/portal_tabs"><li tal:attributes="id string:portaltab-${tab/id};
                            class python:view.selected_portal_tab==tab['id'] and 'selected' or 'plain'">
            <a href="" 
               tal:attributes="href tab/url;
                               title tab/description|nothing">
                <b tal:content="tab/name">
                    Tab Name
                </b>
            </a></li></tal:tabs>
    </ul>
</tal:tabs>

※<b>を使いたくない人もいるかと思いますが、とりあえずここではそのまま使うことにします。

CSSのカスタマイズ

CSSの方の変更は、

画像のアップロード
既存のglobalnavスタイルの削除
サンプルCSSの適用

という3点を行います。

画像のアップロード

メニューで使う画像をアップロードしておきます。今回のサンプルでは3枚の画像を使うことになっています。ここでは青色のメニューを適用するために、サンプルサイトから「menub_bg.gif」「menub_hover_left.gif」「menub_hover_right.gif」をダウンロードしておきます。

「ZMI→portal_skins→plone_styles→custom」フォルダへ行き、右上のドロップダウンメニューから「Image」を選び、各画像をアップロードします。

既存のglobalnavスタイルの削除

既存のスタイルはpublic.cssに記述されています。「ZMI→portal_skins→plone_styles→public.css」をクリックし、「customize」ボタンを押します。

/* The global section tabs. */
#portal-globalnav {...

という部分を探して、「#portal-globalnav」で始まるスタイルをすべて削除します。削除が完了したら「Save Changes」ボタンを押します。

サンプルCSSの適用

サンプルのスタイルはploneCustom.cssに記述することにします。「ZMI→portal_skins→plone_styles→ploneCustom.css」をクリックし、「customize」ボタンを押します。

サンプルCSSをコピペして、「.glossymenu」を「#portal-globalnav」に、「.current」を「.selected」に、（画像名の）「menur」を「menub」に変更します。すると下記のようになります。

#portal-globalnav{
    position: relative;
    padding: 0 0 0 34px;
    margin: 0 auto 0 auto;
    background: url(menub_bg.gif) repeat-x; /*tab background image path*/
    height: 46px;
    list-style: none;
}

#portal-globalnav li{
    float:left;
}

#portal-globalnav li a{
    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 46px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;    
}

#portal-globalnav li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}

#portal-globalnav li.selected a, #portal-globalnav li a:hover{
    color: #fff;
    background: url(menub_hover_left.gif) no-repeat; /*left tab image path*/
    background-position: left;
}

#portal-globalnav li.selected a b, #portal-globalnav li a:hover b{
    color: #fff;
    background: url(menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

最後に「Save Changes」ボタンを押せばOK。

サイトを確認してみると下記のように見えるはずです。