小粋空間  -  a cheap joke and a play on words site

ブログタイトルを分割してCSSで異なるスタイルを設定する

ブログタイトルは Movable Type/Serene Bach 等のブログツールや FC2ブログ/Seesaa ブログ等のブログサービスに関わらず、HTMLページとしては概ね下記のようなマークアップが生成されます。

<h1><a href="?">First Weblog</a></h1>

つまりこのブログタイトルは、ツールがHTMLを自動生成するため、文字の途中にHTMLタグを埋め込んで任意のスタイルを設定する、というようなことができません。

このエントリーでは、ブログタイトルを2分割して前半と後半で異なるスタイルを設定可能にするカスタマイズをご紹介します。 このカスタマイズを行うことでスクリーンショットのように「First Weblog」という文字に対して、「First」と「Weblog」に異なるスタイルを設定することができます。

１．スクリプトの追加

必要なテンプレートに下記のスクリプトを追加します。挿入位置は任意ですが、必ず h1 タグよりも後方に挿入してください。

<script type="text/javascript">
//<![CDATA[
var number = 5;
var title = (document.getElementsByTagName('h1'))[0].childNodes[0].innerHTML;
(document.getElementsByTagName('h1'))[0].childNodes[0].innerHTML =
'<span class="titleA">' + title.toString().substring(0,number) + '</span>' + '<span class="titleB">' + title.toString().substring(number) + '</span>';
//]]>
</script>

赤色の数字は分割する任意の文字数を設定します。「5」の場合は最初の5文字と残りの文字に分割します。全角・半角それぞれ1文字を「1」として計算してください。Windows のIE/Firefox/Opera では全角・半角混合のタイトルでも正常に分割することを確認しています。

２．スタイルの追加

スタイルシートに下記の設定を追加します。

.titleA {
    color: #ffffff;
}
.titleB {
    color: #000000;
}

titleA が文字前半、titleB が文字後半のスタイルに対応します。上記は文字色のみの設定ですが、フォントやフォントサイズ等の各種文字装飾を追加すれば、バリエーション豊かな表示が可能になります。

３．タイトルを 3 分割する

１項のスクリプトを下記のように修正します。追加部分を青色で示していますが、そのままコピーしてください。

<script type="text/javascript">
//<![CDATA[
var number1 = 3;
var number2 = 6;
var title = (document.getElementsByTagName('h1'))[0].childNodes[0].innerHTML;
(document.getElementsByTagName('h1'))[0].childNodes[0].innerHTML =
'<span class="titleA">' + title.toString().substring(0,number1) + '</span>' + '<span class="titleB">' + title.toString().substring(number1,number2) + '</span>' + '<span class="titleC">' + title.toString().substring(number2) + '</span>';
//]]>
</script>

スタイルシートも追加します。

.titleA {
    color: #ffffff;
}
.titleB {
    color: #000000;
}
.titleC {
    color: #ff0000;
}

2007.01.10 追記
３項を追加しました。