Ploneのロゴのｃｓｓを見る

Ploneのロゴはカスタマイズできましたが、このロゴはどのように表示されているのでしょうか。まずはcssを見てみます。

 Plone.cssより抜粋

#portal-logo {
 background: url(&dtml-portal_url;/&dtml-logoName;) no-repeat;
 border: 0;
 margin: 0.75em 0em 0.75em 1.5em;
 padding: 0;
}

#portal-logo a {
 display: block;
 text-decoration: none;
 overflow: hidden;
 border: 0;
 margin: 0;
 padding: 0;
 padding-top:  <dtml-var "_[logoName].height">px;
 height: 0px !important;
 height /**/:  <dtml-var "_[logoName].height">px;
 width: px;
 cursor: pointer;
}

まずわかるのは、このロゴが背景画像として表示されていることです。#portal-logo {}内の、背景を指定している「url(&dtml-portal_url;/&dtml-logoName;)」の部分がそれです。

＊「&dtml-portal_url;」や「&dtml-logoName;」という表記はそれぞれ、「<dtml-var portal_url>」や「<dtml-var logoName>」と同じです

＊「logoName」は /TestPlone/portal_skins/plone_styles/base_properties で「logo.jpg」が指定されています

背景画像は普通クリックできませんが、#portal-logo a {}内で、これをブロック表示し（display: block;）、この領域のカーソルをポインタにすることによって（cursor: pointer;）、あたかもこのロゴをクリックしているかのように見せています。

このロゴが背景画像だとすると、その背景の上に乗っている実体は何なのか？そしてその実体はどこにいってしまったのか？その答えは、#portal-logo a {}内の「overflow: hidden;」にあります。

overflowは「はみだし」を制御するもので、ここでは「hidden」を指定していますので、「はみだし部分は隠す」という意味になります。そこでこのはみだし部分を表示してみます。表示するにはこのoverflowの指定をコメントアウトしてやればOKですな。

overflow: hidden;　→　/* overflow: hidden; */

としてやりませう。

そうすると、このロゴ部分はどうなるか。

overflow: hidden;　の場合（デフォルト）

(-ω- )

/* overflow: hidden; */　の場合（コメントアウト）

（゜д゜）ｙ＼〟

姿を現したなヾ(*`Д´)ノ

本来はサイトのタイトルが表示されるはずですが、表示する場所がはみだしていて、overflowの指定によって隠されているんですね。

つまり、#portal-logoの表示領域の高さは、

    height /**/:  <dtml-var "_[logoName].height">px;

と、指定してあるとおり、logoName（実体はロゴ画像であるlogo.jpg）の高さしか無いんだけど、

    padding-top:  <dtml-var "_[logoName].height">px; 

と、パディングトップをこれまたlogoNameの高さのぶんだけ取っているので、表示領域からはみだしてしまう。これをoverflowの指定によって隠しているので見えなくなっている、という仕掛けになってるのですな。

まぁ、ありがちな仕掛けです。ユーザビリティ（音声リーダ、テキストブラウザなどへの対応）を考慮して、ということですな。ここではoverflowを利用していますが、他にも例えば、

    text-indent: -10000px;

こんなふうに横にすっとばしてやる手もあります。