はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

2007/11/07 Wed [Edit]

ブログで配布しているデザインテンプレートをご使用中の方から下記のようなご質問を頂きました。

タイトルに色付けしたんですが、カーソルを持って行くとタグが見えてしまいます。 なんとかこの色使いのままタグの表示を消せないでしょうか?

早速、ご質問頂いた方のブログHTML ソースを確認させて頂きました。また、タイトル部分にカーソルを持って行きました。今回、当方 Mac の Firefox にての確認でしたので、タグは表示されず、色使いも白の単色で表示されており、ご質問者様の実現されたいカスタマイズとも現状の不具合とも異なった表示結果でした。

しかし HTML ソースとご質問内容から推測すると、以下のことを実現されたいのだと判断しました。

  • ブログのタイトルの行頭1文字だけを赤くし、他の文字を黒とする。
  • ブログのタイトルはホームへのリンクとする。

これを実現するにはまずタイトル部分で変数 <%blog_name> は使用できません。おそらくこれはご理解頂けていると判断しました。更に HTML ソースを確認したところ <font> タグを使用し着色されていました。

<a> タグ内のテキストの着色には CSS で定義する必要があります。もしも、<a> タグを使用しない場合、つまりハイパーリンクとしないテキストでしたら <font> タグで着色されても良いのですが、その場合でも CSS で指定された方が今後の管理が楽になります。

※当ブログで配布中のデザインテンプレートが解決策の対象となっています。

上記を実現させる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 ソースも全てコピーし、スタイルシート編集画面の適当な場所にペーストしてください。

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

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

画像に変更し 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 で検索してみてください。そのうち当ブログでも記事としてご紹介したいと考えています。

追記〔2008年3月31日〕
行頭1文字だけ色を変更するなら :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 では着色可能でした。

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

Prev
フリーランスのWEBデザイナーになる前に目を通しておきなサイ
Top
はじめてのブログデザイン
Next
FC2ブログ変数 ~記事の移動~

Comments

NARU

ありがとうございます。

さっそく編集してみました。

これで思い通りのブログに仕上がったので大満足です。

P.S.

これからも素敵なテンプレート作って下さいね。

(ピンクデザインのがシンプルですごく気に入ってます。)

どういたしまして^^

NARUさんこんばんは☆

即興と言いますか即席で記事にしたので解り辛い部分もあったと思いますが、無事カスタマイズ成功されたようで何よりです。

お褒めのお言葉、本当に嬉しいです♪
最近は少々仕事が忙しいのでブログの更新やテンプレートの制作に手を伸ばせずにいるのですが、お言葉を励みに色々なテンプレート制作を頑張って行きたいと思います!

また、何かありましたらお気軽にコメントください^^

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。