Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】リンクの設定を変更する(文字色の変…

【Seesaaブログ新デザインシステム】リンクの設定を変更する(文字色の変更など)

Seesaaブログのリンクの設定
■Seesaaブログのリンク設定を変更
■文字色を変更
■リンク文字に下線を付ける
■CSSの「a」「a:hover」を編集  

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」は、デフォルトの場合(何も変更していな状態の場合)、リンクが付けられた文章は「水色」で表示されます。
マウスをリンク部分に乗せると「下線」が出て、水色が少し薄くなります。


デフォルトの場合
Seesaaブログのリンク部分のスタイル



私はこの水色があまり好きではありませんので、リンクの文字色を青色に変更し、それがリンクであることを示すために常に下線を付けるようにします。
そして、マウスをリンク部分に乗せた時には文字色が灰色に変わるように設定して強調したいと思います。


編集後のイメージ
編集後のリンク部分のスタイル




ブログのリンク設定を変更する(「a」「a:hover」を編集)


マウスをリンク部分に乗せることをCSS(スタイルシート)では「hover」で表現します。リンクは「a」タグです。
なので、リンク部分を変更したいのであれば、スタイルシートの「a」や「a:hover」タグを編集することになります。



ということで、CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「a」を探します。
「a」タグはCSSの最初の方(47行目ぐらい)にも記述されていますが、これは何も変更しません。無視して次の「a」タグ記述を探します。
テンプレートがデフォルトのままだと367行目ぐらいにあります。



CSSの該当部分に以下の「編集後」のコードをコピーして貼り付けてから「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


<元コード>
リンク部分のスタイルシート編集画面


<編集後>
a {
color: #2B5782;
text-decoration: underline;
}

a:hover {
color: #A9A9A9;
text-decoration: underline;
}


●リンク部分には通常時でも下線が表示されるように、「a」(通常時)の「text-decoration: none;」を「text-decoration: underline;」に変更しました。
●「a:hover」(マウスをリンク部分に乗せた時)の文字色を、ハッキリとわかるように灰色にしました。



コード編集後のCSS(a)と実際のページ


編集後のリンク部分のスタイルシート

編集後のリンク部分




次の記事の紹介

次の記事では、Seesaaブログのトップページの記事を線で囲む方法を説明します。


【Seesaaブログ新デザインシステム】トップページの記事を線で囲んで境目をわかりやすくする
Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」のトップページは、メインとサイドの境目がよくわかりません。というかシンプルすぎてどこにも境目がありませんね。もう少し記事部分を見やすい感じにしたいなぁと思った‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。