FC2ブログカスタマイズ 〜タイトルのリンクカラー〜

上記を実現させるHTML ソースと CSS ソースを記載すると以下のソースになります。

HTML ソース

<a id="aka" href="<%url>" accesskey="0" title="<%blog_name>">赤くしたい文字</a><a id="kuro" href="<%url>" accesskey="0" title="<%blog_name>">黒くしたい文字</a>

CSS ソース

div#branding h1 a#aka:link , div#branding h1 a#aka:visited {
	color : #f00;/* 赤 */
}

div#branding h1 a#kuro:link , div#branding h1 a#kuro:visited {
	color : #000;/* 黒 */
}

div#branding h1 a#aka:hover , div#branding h1 a#aka:active ,
div#branding h1 a#kuro:hover , div#branding h1 a#kuro:active {
	color : #ff9;
	border : none;/* ボーダーを表示しない */
}

上記の HTML ソースを全てコピーし HTML 編集画面のタイトル部分 <h1> から </h1> 内のソースと置換後、赤くしたい文字と黒くしたい文字に任意の文字（ブログ名）と書き換えてください。

次に CSS ソースも全てコピーし、スタイルシート編集画面の適当な場所にペーストしてください。

以上で実現可能だと思います。

●追記〔２００７年１２月８日〕
本日記事を読み返しタイトル部分を思い切って画像にしてしまうのも一案かと思ったので追記です。検索エンジンのクローラ視点で考えると、上記の方法はあまりお薦めできない部分があります。と言うのも、当ブログ名で説明させて頂くと「は」と「じめてのブログデザイン」と言う言葉でリンクされているとクローラに解釈されると思うのです。

画像に変更し alt 属性にブログ名を入れておいた方が、おそらくクローラには好かれると思います。SEO が気になる方は画像の方が良いのかな？なんて思えたので、念のため画像に変更する場合のソースを載せておきます。

タイトルを画像に変更する時のHTML ソース

<a href="<%url>" accesskey="0" title="<%blog_name>"><img src="画像のパス" alt="<%blog_name>" /></a>

上記の HTML ソースを全てコピーし HTML 編集画面のタイトル部分 <h1> から </h1> 内のソースと置換し、画像のパスへはご使用になる画像の URL を入れれば OK です。

また、FC2ブログにアップロードした画像の URL の調べ方は、ファイル管理画面で使いたい画像のサムネイルをクリックすると別ウィンドウに画像だけが表示されるので、その時ブラウザのアドレスバーに画像の URL が表示されています。

画像のロールオーバー（マウスカーソルを乗せた時に画像を変更させる技術）については色々な方法がありますので、Google で検索してみてください。そのうち当ブログでも記事としてご紹介したいと考えています。

●追記〔２００８年３月３１日〕
行頭１文字だけ色を変更するなら :first-letter 擬似要素を使う方法も考えられます。

下の CSS ソースをスタイルシート編集画面の適当な場所にペーストします。

.fst1:first-letter {
	color : #f00;/*赤*/
}

次に上のソースの赤い部分、クラス名（fst1）を適用したい要素のクラス属性の値として指定します。下がそのサンプルソースです。

<h1 class="fst1"><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>

しかし、この方法だと Firefox だとマウスオーバー後には通常のリンクカラーになってしまい、Netscape ではリンクカラーで設定しているカラーで表示されます。つまりリンクカラーが指定されている箇所では :first-letter 擬似要素は適用されないようです。

IE や Safari Opera では着色可能でした。

画像を使用する方法がやっぱり良いのかも。