さとぴーの選択範囲

短時間で投稿できるものを中心に記事にしていこうかと。

ブログテンプレート リンク下線ありと下線なしの混在

はじめてのFC2ブログカスタマイズ

FC2ブログにはあらかじめ多くのデザインテンプレートが用意されています。気に入ったデザインを選択するだけで簡単に見た目を変更する事が出来ますが、慣れてくると自分好みにカスタマイズしたいと思う方も大勢いると思います。FC2ブログは自由にHTMLとCSSを編集出来ますので知識さえあれば思い通りにアレンジする事が可能です。(FC2ブログカスタマイズ解説ページより)
当初よくわからなかったブログで使われているスタイルシートがどのような役割になっているのかどんな指定をしているのか少しづつわかって来たので、またちょっとカスタマイズしてみました。FC2ブログの解説ページとは記述がちょっと違いますが、リンクの下線表示のある部分と下線なしの部分両方をひとつのブログ内に作ってみました。

理由は、記事本文にあるリンクが下線なしの場合リンクだとわかりにくい配色だったので、目にうるさいのは多少仕方が無いとして、本文部分は下線つきリンクにしようと思ったからです。

最初に、リンクの下線有りに書き換え、H1、H2タグは下線無し、そのほか属性指定されている部分を探して、横メニューはリンク下線無しに。
横メニューも下線ありでもいいかもしれないと当初思いましたが、ものすごく目にうるさくなってしまい、下線を消す為いろいろ試行錯誤となりました。

実際に記述を変更したCSSの該当部分

/************************************/
/* リンクの色 */
a{ color: #003366;
text-decoration: underline;
}
a:hover{ color: #66FF99;
}
h1 a{
text-decoration: none;
}
h2 a{
text-decoration: none;
}

リンクは下線付きに H1 H2 は下線なしに。

.menuText a{
text-decoration: none;
}

クラスで指定されている横サイドバーのメニューテキストは下線なしへ。