最近はレイさんやトレノさんもブログをはじめているので、参考になるかな？と思ったので、なにをどう修正したかをエントリー。
リンクの下線については、スタイルシートを修正することで変更できます。他にも文字の色など、こいつをいじるといろいろとブログのデザインを変更することができます。
ちなみにここをいじりまくるとどんだけ変わるかというのは『Wao&Warnデザイン−けっこう変えてたのね』をみてもらえるとわかるかと思います。
Wao&Warnの場合、ほとんどがスタイルシートの変更でカスタマイズしてます。最近は、このSeesaaブログもHTMLを編集できるようになりましたが、かつてはHTMLがいじれなかったのでスタイルシートでの修正が主でした。
本題にもどって修正方法。今回はリンクの色と下線の設定について説明します。
Seesaaの場合は管理ツールの「デザイン」→「スタイルシート」を選択すると、スタイルシートの選択画面が現れます。
スタイルシートをみてみると、なにやら暗号みたいな文字がいっぱいならんでいますが、これが各種設定になっております。
まずは、この中からリンクの設定部分を探してみます。
リンクの設定は
a{ 〜 }
という部分で行われています。a、つまりアンカータグについての設定をしますよ〜をいう宣言です。{}で囲まれた部分が具体的な設定内容になります。
Wao&Warnの場合では
a{
color:#5555aa;
text-decoration: none;
}
という感じになっております。「color」で文字色を「text-decoration」で下線の設定をします。
色についてはRGBというきまりで設定をしてあげなければなりません。#のあとの二桁が赤の強さ、その次の二桁が緑の強さ、最後の二桁が青の強さになります。
ただ、こんなことがわかっても数字だけで調整なんてできません。Waoの場合はツールを使ってRGBを調べてしまいます。もちろん、そういったツールがないひともいると思うので、そんなときは一撃必殺JavaScript日本語リファレンスさんの『カラー名／カラーコード対応表』のようなサイトを参考にするとよいかと思います。
また、追加で
a:hover{
color:#5555aa;
text-decoration: underline;
}
という設定を追加しました。これはなにかというと、リンクにポインタを合わせたときの設定です。色は変えてませんが、ポインタを合わせたときに下線がでるように「underline」の設定をいれています。もちろんcolorの設定をかえれば、ポインタを合わせたときに色も変わります。
また、ブログでは個所個所ごとの設定もできます。エントリーのヘッダ部分を参考に説明します。
.title{
font-weight:bold;
color:#ffffff;
padding-left:5px;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
margin:0px;
background:#5555aa;
}
.title a{
color:#ffffff;
text-decoration: none;
}
.title a:hover{
color:#c4d1ff;
text-decoration: none;
}
「.〜」の部分がブログレイアウトの「場所」を表します。エントリータイトルは「title」というように定義されています。実際は、必ずしもこうなっているわけではありませんが、ブログの一般的なテンプレートではこうなっているので、これで説明は十分かと思います。
自身のブログのスタイルシートにこの部分をみつけたら、ここを修正することでエントリーのタイトル表示を変更できます。
.title{
font-weight:←フォントの強さ。ようは太字にするかってトコロです。
color:←文字色。RGBで指定してあげましょう。
padding-left:←文字の左側の空き。
padding-top:←文字の上側の空き。
padding-right:←文字の右側の空き。
padding-bottom:←文字の下側の空き。
margin:←マージン。
background:←タイトルの背景色。
}
Wao&Warnではタイトル文字を太字、色を白、背景を青に設定しております。また、ちょっと特殊な指定をしているので、ここではしておりませんが、ここに追加で
font-size: [任意の数字]px;
を設定すると文字のサイズを変更できます。
また「.title a」「.title a:hover」でタイトル部分のリンク設定を行っています。
タイトル部分は下線を表示させると、ちょっと変だったので下線なしにしています。そのかわりポインタを合わせたときに水色に文字色がかわるように設定しました。
カンタンでしょ？もしよかったら、ご自身のブログで試してくださいね。ブログはデザインをいじっても楽しいですよ！
若干ですが自分のﾌﾞﾛｸﾞもいじりましたんで良ければ見てみてくださいヽ(´ー｀)ノ
といっても記事のﾀｲﾄﾙ部分をいじったり、INDEXﾍﾟｰｼﾞの軽量化の為に追記形式にしたり、記事の貼り付け画像を50kbに固定したりした程度ですがｗ
その為画像が少し汚くなってるけど気にしないでｗ
タイトル文字が大きくて色つけたぶん、かなり見やすくなったよね。
ちょっとした変更だけでもけっこう印象（印章って変換された…）かわるからフシギ。
エントリーするのも楽しいけど、レイアウトいじるのもけっこう楽しいんだよねｗ