ようやっと完了した。
そもそも、タイトルにアイコンを添えたかっただけなのだが、
既定の、文字でのタイトル表示では、ブラウザにより表示位置がズレ、画像と組み合わせられない。
安易に対応しようと、タイトルを画像として作成し、レイアウト設定でヘッダを、画像のみにしてしまうと、
ブログの説明キャプションが表示されなくなってしまう。
で、テキストのタイトルを透過させて対応しようとしたが、IE限定の拡張機能だった為、断念。
そこで、テンプレートHTMLのヘッダを構築する部分を見てみた。
以下は、その処理部を抜粋したもの。
<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="おきつねさまのひまつぶし (Header)" type="Header">
<b:includable id="main">
<b:if cond="data:useImage">
<b:if cond="data:imagePlacement == "REPLACE"">
<div id="header-inner">
<a expr:href="data:blog.homepageUrl" style="display: block">
<img expr:alt="data:title" expr:height="data:height" expr:id="data:widget.instanceId + "_headerimg"" expr:src="data:sourceUrl" expr:width="data:width" style="display: block"/>
</a>
</div>
<b:else/>
<div expr:style=""background-image: url(\"" + data:sourceUrl + "\"); "+ "background-position: "+ data:backgroundPositionStyleStr + "; "+ data:widthStyleStr+ "min-height: " + data:height + "px;"+ "_height: " + data:height + "px;"+ "background-repeat: no-repeat; "" id="header-inner">
<div class="titlewrapper" style="background: transparent">
<h1 class="title" style="background: transparent; border-width: 0px">
<b:include name="title"/>
</h1>
</div>
<b:include name="description"/>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id="header-inner">
<div class="titlewrapper">
<h1 class="title">
<b:include name="title"/>
</h1>
</div>
<b:include name="description"/>
</div>
</b:if>
</b:includable>
<b:includable id="title">
<b:if cond="data:blog.url == data:blog.homepageUrl">
<data:title/>
<b:else/>
<a expr:href="data:blog.homepageUrl">
<data:title/>
</a>
</b:if>
</b:includable>
<b:includable id="description">
<div class="descriptionwrapper">
<p class="description">
<span>
<data:description/>
</span>
</p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
|
なるほど、
上記で５行目の
<b:if cond='data:useImage'>
|
で、タイトル画像の有無を分岐。
画像アリの場合は次行の
<b:if cond="data:imagePlacement == "REPLACE"">
|
で、ヘッダ中の文字列を排しているコトが判る。
そして、タイトルを除くキャプションの表示は
<b:include name='description'/>
|
で、処理している。
だったら、１３行目にある
の直前に、その１行を貼り付けて、処理的なトコロは解決。
タイトル画像の下に、キャプションが表示されるようになった。
元々タイトル画像はヘッダサイズに合わせたものだったので、このままではナンだか間延びして見える。
MSPaintでチョイと高さを低くして対応。
ココで判ったのは、タイトル部分の高さの設定が、HTML中には含まれていないと云うコト。
どうやらBloggerサイドでキャッシュしているようだ。･･･ソレがナンだ と云われそうだが、コレが結構重要で、
つまり、タイトル画像表示フレームのサイズをテキストレベルで指定できないのだ。
で、このまま高さを下げた画像で処理させると、フレームサイズにあわせ、高さが強制的に拡大されてしまう。
っても、対処は簡単、WYSIWYG(Bloggerのタイトル画像設定画面)で、タイトル画像を再度設定し直すと解決する。
つか、タイトルと説明キャプションを、ひとまとめでしか設定できないって時点で、どうなのかね？
そもそも、
・ページタイトル＆キャプション表示・タイトル背景画像アリ／ナシ
・タイトル画像表示のみ表示
と云う、排他的指定しかできないから、こう云う不便が生じる。 GUIとしては かなり考えモノ･･･
・ページタイトル表示／非表示設定
・背景画像指定
・キャプション表示／非表示設定
これらは全く別個に設定できるようにするのが本筋だろう。
