タイトル処理改変･･･

ようやっと完了した。

そもそも、タイトルにアイコンを添えたかっただけなのだが、
既定の、文字でのタイトル表示では、ブラウザにより表示位置がズレ、画像と組み合わせられない。

安易に対応しようと、タイトルを画像として作成し、レイアウト設定でヘッダを、画像のみにしてしまうと、
ブログの説明キャプションが表示されなくなってしまう。

で、テキストのタイトルを透過させて対応しようとしたが、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"">     
                            <!--Show just the image, no text-->     
                            <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/>     
                            <!--      
                            Show image as background to text. You can"t really calculate the width     
                            reliably in JS because margins are not taken into account by any of     
                            clientWidth, offsetWidth or scrollWidth, so we don"t force a minimum     
                            width if the user is using shrink to fit.     
                            This results in a margin-width"s worth of pixels being cropped. If the     
                            user is not using shrink to fit then we expand the header.     
                            -->
                            <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'/>    
で、処理している。
 
だったら、１３行目にある
    <b:else/>    
の直前に、その１行を貼り付けて、処理的なトコロは解決。
タイトル画像の下に、キャプションが表示されるようになった。

元々タイトル画像はヘッダサイズに合わせたものだったので、このままではナンだか間延びして見える。
MSPaintでチョイと高さを低くして対応。

ココで判ったのは、タイトル部分の高さの設定が、HTML中には含まれていないと云うコト。
どうやらBloggerサイドでキャッシュしているようだ。･･･ソレがナンだ と云われそうだが、コレが結構重要で、
つまり、タイトル画像表示フレームのサイズをテキストレベルで指定できないのだ。
で、このまま高さを下げた画像で処理させると、フレームサイズにあわせ、高さが強制的に拡大されてしまう。

っても、対処は簡単、WYSIWYG(Bloggerのタイトル画像設定画面)で、タイトル画像を再度設定し直すと解決する。

つか、タイトルと説明キャプションを、ひとまとめでしか設定できないって時点で、どうなのかね？

そもそも、

・ページタイトル＆キャプション表示・タイトル背景画像アリ／ナシ
・タイトル画像表示のみ表示

と云う、排他的指定しかできないから、こう云う不便が生じる。 GUIとしては かなり考えモノ･･･

・ページタイトル表示／非表示設定
・背景画像指定
・キャプション表示／非表示設定

これらは全く別個に設定できるようにするのが本筋だろう。