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

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

Posted at May 8,2006 11:53 PM
Tag:[Blog, Customize, JavaScript]

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

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

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

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

1.スクリプトの追加

必要なテンプレートに下記のスクリプトを追加します。挿入位置は任意ですが、必ず 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 では全角・半角混合のタイトルでも正常に分割することを確認しています。

2.スタイルの追加

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

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

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

3.タイトルを 3 分割する

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

<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 追記
3項を追加しました。

関連記事
トラックバックURL


コメント

Yujiroさん、

タイトルの真ん中の文字だけを違う色に指定する場合はどうすれば良いのでしょうか?つまり、始めと真ん中と終わりと3分割ということになります。ただし、始めと終わりの文字色は同じで構いません。

[1] Posted by kunio : January 10, 2007 9:48 AM

>kunioさん
こんばんは。
ご質問の件につきましては3項を追加致しました。参考になれば幸いです。

[2] Posted by yujiro : January 11, 2007 11:25 PM

Yujiroさん、

ありがとうございます。
無事バナー文字色を指定することができるようになりました。

[3] Posted by kunio : January 12, 2007 9:20 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)