« よくある質問集 | トップページ | 基本4:自分のブログのCSSファイルを確認する »

2006/05/12

第28回:リンクの装飾を設定してみよう

リンクを設定した文字列は色を変えたり、下線を付けたりして他の文字列とハッキリ区別したほうが読者にも分かり易く親切ですし、クリックして貰いやすくなります。
ココログでは管理画面の「デザイン」→「テーマの変更」からもリンク文字の色や下線の有無、文字の太さなどの簡単な設定が出来ますが、 CSSを利用すればもっと細かく多彩な設定が出来るようになります。

今回は下記で例に挙げた設定のCSSをそれぞれご紹介します。
※リンク先はよく使うブログ検索サイトにしてみました(笑)クリックすると別窓で開くようにしてあります。

 

手順

  1. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    ※「カスタムCSSを編集」は、リッチテンプレート適用時には利用できません。
    CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください
    ※カスタムテンプレートの作り方は
    第3回: カスタムテンプレートを作ってみよう
    を参照して下さい。
  2. 「編集」画面のCSS記述欄にリンク装飾用のCSSを記述する。

    1. カーソルを乗せると文字が太文字になる

    /*通常の状態*/
    a:link{
    font-weight:normal; /*文字の太さ:通常*/
    color:#cc3399;
    text-decoration : none;
    }
    /*訪問済み*/
    a:visited{
    font-weight:normal;
    color:#000099;
    text-decoration : none;}
    /*カーソルでポイントした時*/
    a:hover{
    font-weight: bold; /*文字の太さ: 太字*/
    color:#cc3399;
    text-decoration : none;

    2. カーソルを乗せると背景に色が付く

    /*通常の状態*/
    a:link{
    color:#333366;
    text-decoration : none;
    }
    /*訪問済み*/
    a:visited{
    color:#999999;
    text-decoration : none;
    }
    /*カーソルでポイントしたとき*/
    a:hover{
    color:#333366;
    text-decoration : none;
    background-color:#9999ff; /*背景色*/
    }

    3. リンクの下線を点線にする

    /*通常の状態*/
    a:link{
    color:#ff3300;
    border-bottom:1px dotted #009900;/*罫線(下側) に点線*/
    text-decoration : none;/*テキスト装飾:なし (←これを付けないと通常の下線が付いてしまう)*/
    }
    /*訪問済み*/
    a:visited{
    color:#999900;
    border-bottom:1px dotted #cccccc;
    text-decoration : none;
    }
    /*マウスでポイントしたとき*/
    a:hover{
    color:#99cc00;
    border-bottom:1px dotted #666600;
    text-decoration : none;
    }

    4. カーソルを乗せると文字の位置が移動する

    /*通常の状態*/
    a:link{
    color:#660099;
    text-decoration : none;
    }
    /*訪問済み*/
    a:visited{
    color:#ff66ff;
    text-decoration : none;
    }
    /*マウスでポイントしたとき*/
    a:hover{
    color:#9900ff;
    text-decoration : none;
    position:relative; top:3;left:3;/*文字が動く方向と範囲*/
    }

    5. カーソルを乗せると背景画像が表示される

    /*通常の状態*/
    a:link{
    color:#ff9933;
    text-decoration : none;
    }
    /*訪問済み*/
    a:visited{
    color:#009900;
    text-decoration : none;
    }
    /*マウスでポイントしたとき*/
    a:hover{
    color:#000000;
    text-decoration : none;
    background-image:url(http://~);/*背景画像の指定*/}

    6. 枠線を付けてボタン風に表示

    /*通常の状態*/
    a:link{
    text-decoration : none;
    color : navy;
    border-top : 1px solid #cccccc;
    border-right: 3px solid #999999;
    border-left : 1px solid #cccccc;
    border-bottom: 3px solid #999999;
    padding:3px;
    }
    /*訪問済み*/
    a:visited{
    text-decoration : none;
    color : navy;
    border-top : 1px solid #cccccc;
    border-right: 3px solid #999999;
    border-left : 1px solid #cccccc;
    border-bottom: 3px solid #999999;
    background-color:#e3e3e3;
    padding:3px;
    }
    /*マウスでポイントしたとき*/
    a:hover{
    text-decoration : none;
    color : navy;
    border-top: 3px solid #999999;
    border-left: 3px solid #999999;
    border-right : 1px solid #cccccc;
    border-bottom : 1px solid #cccccc;
    padding:3px;
    }

    ※通常時(マウスポイントしていないとき)は罫線の下と右を太くて濃い線、マウスでポイントしたときはその逆(上と左を濃く太く) にすることで擬似的な立体感と動きが表現できます。
    ※但し、これはボタンらしく見せるために文字の周囲に余白を設定してしまっているので、通常の文章の中では使いにくいかも… ^^;

    ※上記を参考にしてリンク設定用CSSを全て半角英数で記述して下さい。
    ※色や線の種類、太さなどはご自分で自由に変更して下さい。 
  3. 「変更を保存」ボタンを押す。
    ※「確認」ボタンを押せば保存前に出来上がりを確認出来ます。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
上手くできましたか?

ここがポイント

  • リンクはその状態によって4つの定義済みクラスを持っています。
    a:link : 通常のリンク(未訪問状態)
    a:visited : 訪問済みのリンク
    a:hover : マウスでポイントした状態
    a:active :  クリックして該当サイトに繋がるまでの間の状態
    上記で書いたCSSのようにそれぞれの状態に別々の要素を適用することが可能です。
    但し、複数の状態を同時に指定する場合は、上記の並び順を間違えないようにしましょう。
    (順番が前後すると、指定した装飾が上手く反映しなくなることがあります。省略するのは大丈夫です)
  • サイドバーと本文(記事部分) のリンク装飾を別々に指定することも出来ます。
    その場合、サイドバーのリンクプロパティに「.sidebar」を付けて
    .sidebar a:link{~}
    .sidebar a:visited{~}
    といった感じで指定して下さい。
  • 上記の例ではリンク文字の色もCSSの中で指定していますが、ココログの場合「デザインの編集」→「テーマの変更」 部分で指定した方が管理しやすいと思います。
  • この他にも、色や線の種類、太さなどをデザインに合わせたリンク表示を工夫してみて下さい。
    尚、「通常の状態(未訪問)」と「訪問済みリンク」は、ハッキリと区別出来るように変化を付ける、 また文章として読む場合にも読みにくくならないような色をそれぞれ選択しましょう。

お世話になりました

■素材サイト「IMAGE」 様<No.5のリンクの背景画像>
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


|

« よくある質問集 | トップページ | 基本4:自分のブログのCSSファイルを確認する »

カスタマイズ」カテゴリの記事

エントリー部分」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

takoさん こんにちわ
リンクの修飾、色々テストしてみました。6番はちょっと(⌒▽⌒;)ですが 他の奴はどれもいいかなぁ~と思ったんですが・・・
実際にやってみると少し問題が(って僕だけでしょうか?)
管理人本人はリンクがどれか理解してますけど、訪問者はどれがリンクかわかんないですよね。確かにカーソルを乗せるとリンクに修飾が付くのでわかりますが、ぱっと見ではどれがリンクかわかりにくいですよね~その中で3番はぱっと見てそれがリンクになってるのが訪問者にもわかりますよね。そしてただの下線よりお洒落だし~
特に本文の文字に色んな色を使った場合、他の方法ではいくら文字色を工夫しても、リンクが埋もれてしまうと思って”下点線”にしました。やってみるとこれが一番しっくりしました。

投稿: hibiki | 2006/05/23 14:59

■hibikiさん
こんにちは。コメントありがとうございます。

>ぱっと見ではどれがリンクかわかりにくい

一応、私の基本概念としては「リンク文字と通常の文字は色が違って当たり前」って前提で書いているのでそんなに「変」って感じはしないんですよね(笑)
私の場合、「ここはリンクになってるよ」と主張したい、でも文字の太さを変えるのはイヤ(Boldの文字って、基本的にあまり好きじゃないので(^^;)ってなると、どうしても「色」で区別するしかなくなってくるんですよね。
なので、デザインを決めるときは、未訪問リンクと既訪問リンクの色を何色にするかが(地味ですが)結構悩むところだったりします。
今使ってる「渋赤」→「灰青」の変化はかなり気に入ってます。
その分、通常の文字色を変えることは出来ませんが、基本的に文字色を変えない人なので(たま~に赤で強調するくらいですかね)あまり問題ありません。

border-bottomを使った下線は確かにスッキリしていて可愛いので私も好きなのですが、デザインによっては余計な部分にまで下線がついてしまい、「邪魔!」と思うこともあったりします(汗)

いずれにしても上記で出した例が全てではなく、各管理人さんそれぞれの好みとセンス、アイディア次第でどうにでも出来ると思いますので、いろいろ試してみるといいと思います。
(これはどのカスタマイズも殆どそうなんですけどね(笑))

投稿: tako→hibikiさん | 2006/05/23 15:44

tako様

いつもお世話になっています!またまた質問で恐縮なのですが、今回tako様のサイトの様にタイトルとサブタイトルにリンクの装飾をしようと思ったのですが何故か何も反映されません・・・色々挑戦しましたが残念ながら私の力では無理っぽくお力を貸していただきたく宜しくお願い致します。適用したCSSは以下の通りです。

/*タイトルのリンク指定*/

/*通常の状態*/
#banner h1 a:link{
color:#ffff66;
border-bottom:1px dotted #ff9900;/*罫線(下側) に点線*/
text-decoration : none;/*テキスト装飾:なし (←これを付けないと通常の下線が付いてしまう)*/
}
/*訪問済み*/
#banner h1 a:visited{
color:#ffff66;
border-bottom:1px dotted #ff9900;
text-decoration : none;
}
/*マウスでポイントしたとき*/
#banner h1 a:hover{
color:#cc0000;
border-bottom:1px dotted #ff9900;
background-color:#ffff00; /*背景色*/
text-decoration : none;
}

/*通常の状態*/
#banner h2 a:link{
text-decoration : none;
color : navy;
border-top : 1px solid #cccccc;
border-right: 3px solid #999999;
border-left : 1px solid #cccccc;
border-bottom: 3px solid #999999;
padding:3px;
}
/*訪問済み*/
#banner h2 a:visited{
text-decoration : none;
color : navy;
border-top : 1px solid #cccccc;
border-right: 3px solid #999999;
border-left : 1px solid #cccccc;
border-bottom: 3px solid #999999;
background-color:#e3e3e3;
padding:3px;
}
/*マウスでポイントしたとき*/
#banner h2 a:hover{
text-decoration : none;
color : navy;
border-top: 3px solid #999999;
border-left: 3px solid #999999;
border-right : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
padding:3px;
}

タイトルとサブタイトルの位置も若干変更したくtako様のCSSを参考にさせて頂き挑戦しましたがこれも上手いきませんでした・・・画像だけは上手く貼れるのですがそれ以外はどうもタイトル部分だけ上手く反映されません、お忙しいと思いますのでお時間の空いた時で結構ですどうか宜しくお願い致します。

投稿: ジャック | 2006/12/11 11:06

■ジャックさん
こんにちは。

ご質問の件ですが、該当のCSSそのものではなく直前に書いてある

#banner{

background-image:url(http://happy-life888.cocolog-nifty.com/tubasa.jpg); /*タイトル画像の設定*/
background-repeat:no-repeat; /*タイトル画像の繰り返し(なし)*/
background-position:center; /*タイトル画像の位置(右上)*/
height:170px; /*タイトル部分の高さ*/

の最後の閉じ記号( } )が抜けているのが影響していると思います。

このCSSの最後に閉じ記号を入れて保存し直してみて下さい。
多分、反映すると思います。

「タイトルとサブタイトルの位置変更」は

#banner{padding-top: 120px;}

のことでしょうか?
これでうまくいかないようでしたら、

#banner h1
#banner h2

にそれぞれ別々にpaddingを設定してみては如何でしょうか。
※検証していないので間違っていたらごめんなさい。何かありましたら再度ご連絡下さい。

投稿: tako→ジャックさん | 2006/12/11 13:09

tako様

早速のお返事ありがとうございます!ご指摘の通り追加しましたらきちんと表示されました^^どうやらご指摘以降のCSS全てに影響が出ていたみたいでそれ以外の不具合もきちんと修正されました。位置の修正についてもおそらくこれで出来るとおもいます、どうもありがとうございました。

投稿: ジャック | 2006/12/11 18:09

■ジャックさん
こんにちは。
上手く行ったようで何よりです。

CSSやHTMLの閉じ忘れはよくあるミスなのですが、それによる影響はかなり大きいので注意が必要です。
書き始めるときに、まず最初と最後を書いておいて、その中に詳細を書いていく、といった手順にするとモレが防げると思います。

ご参考まで。

投稿: tako→ジャックさん | 2006/12/12 07:12

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/1775640

この記事へのトラックバック一覧です: 第28回:リンクの装飾を設定してみよう:

» 私のブログ(ココログ)カスタマイズ [***Country Netlife***]
参考になったHP・ブログのご紹介です。 ありがとうございます。《カラー》 TAG [続きを読む]

受信: 2008/01/26 16:33

« よくある質問集 | トップページ | 基本4:自分のブログのCSSファイルを確認する »