リンクの文字を変更する

スポンサーリンク


2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。

今回のスキンは先ほど完成したんですが、まだカスタマイズ法を書いていなかったので書いていきます。

この記事では、リンクの文字色変更について。
リンクの色をピンクにします。また、マウスが乗った時は背景色も黄色に変わるようにします。

左右サイドバーの幅を入れ替えるでも説明しましたが、ファンブログの3カラムスキンのbodyの中はこういう構造です。

id=”container”

ヘッダ
id=”header”
id=”main”

id=”wrapper”

左サイドバー
id=”sidebarLeft”
200px
記事部分
id=”entries”
500px

右サイドバー
id=”sidebarRight”
160px

フッタ
id=”footer”

今回は、記事のある真ん中部分だけaタグのリンク色を加工します。
つまり、idがentriesの部分にだけスタイルシートが適用されるようにします。

以前書きましたが

#entries a{
    括弧の中でスタイルを指定
}

という風に、半角スペースで区切ってあると#entriesの中にあるaにはという意味になります。これが

#entries,a{
    括弧の中でスタイルを指定
}

と、半角のカンマで区切ると、#entriesとa(の両方)にはという意味になってしまいます。

今回は#entriesの中にあるaにだけスタイルを適用させたいので、1つ目の書き方と同じ半角スペースで区切ります。

#entries a{ //普段の状態
	color:#f0f;  //文字の色をピンクに
	text-decoration:underline;  //文字に下線を引く
}
#entries a:hover{  //マウスが乗った時
	color:#f0f;  //色は同じくピンク(マウスが乗っても文字の色は変わらない)
	background:#ffa;  //背景色を黄色にする
	text-decoration:none;  //文字の下線をなくす
}

適用結果がこの下の行のリンクになります。(クリックしても何も起こらないようにしています)

クリックしてもどこにも飛びませんが、色だけはスタイルシートの指示通りに変わります


関連コンテンツ

スポンサーリンク

「リンクの文字を変更する」への1件のフィードバック

  1. こんばんは^^
    今度は 色に。。と思い
    読んでいました。。
    Tomさんのすごさは 
    ピカいちですね。。
    なんなく すらすら。。
    自分の解っていない所が
    解ってきた気がします。。
    改めて ありがとうです

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください