全体的な文字色を変えよう
文字色の指定は、個別にも設定できます。
個別設定をしない限りここで設定した色が反映されます。
※使うデザインによっては最初から個別設定してあるものもあるので注意してください
※個別設定についてはそれぞれの設定の方法を確認してください
/*—–Common—–*/ （上の方にあります） その中の #333333 を変えます
| /*—–Common—–*/ |
| #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#333333; } |
#333333 というのは色の指定です。好きな色の色番号に変えましょう。
その時、「#FF0000」というふうに、＃を必ず入れましょう。
↓ カラーはこちらを参考にしてください ↓
文字のリンク色を変えよう
使うデザインによって変わる場所が違います。
/*—–Common—–*/ （上の方にあります） その中の #FFFFFF を変えます
| /*—–Common—–*/ |
| a:link { text-decoration:none; color:#FFFFFF; } a:visited { text-decoration:none; color:#FFFFFF; } a:active { text-decoration:none; color:#FFFFFF; } a:hover { text-decoration:underline; color:#FFFFFF; } |
| ・a:link は ページ全体のリンク（まだ開いてない部分の色） ・a:visited は ページ全体のリンク（一度開いたことがある部分の色） ・a:active は ページ全体のリンク（その部分を選択しているときの色） ・a:hover は ページ全体のリンク（マウスを乗せているときの色） noneは下線なし underlineは下線あり |
文字リンクの下線を変えよう
リンクが貼っている文字の下の下線も指定することができます。
/*—–Common—–*/ （上の方にあります） その中の #FFFFFF を変えます
| /*—–Common—–*/ |
| a:link { text-decoration:none; color:#FFFFFF; } a:visited { text-decoration:none; color:#FFFFFF; } a:active { text-decoration:none; color:#FFFFFF; } a:hover { text-decoration:underline; color:#FFFFFF; } |
| /*—–Common—–*/ |
| a:link { text-decoration: none; color:#008100; border-bottom: 1px #A70303 dotted;} a:visited { text-decoration: none; color:#008100; border-bottom: 1px #A70303 dotted;} a:active { text-decoration: none; color:#008100; border-bottom: 1px #A70303 dotted;} a:hover { text-decoration: none; color:#008100; border-bottom: 1px #A70303 dotted;} |
| text-decoration: none; | 下線なしという意味。必ず〔none〕にします |
| color:#008100; | 文字色。お好きな色を指定してください。 |
| border-bottom: 1px #A70303 dotted; | border-bottom: 1px #A70303 dotted; ・1px 線の太さ。数字は任意で ・#A70303 下線の色。色 は任意で ・dotted 下線の種類。 下線の種類は任意で solid（普通の線） double（二重の線） groove（谷型の線） ridge（山型の線） inset（凹型） outset（凸型） |
文字リンクは自分が変えたい部分のみ変更も可能です。
私は、「記事本文」のみ変えることが多いです。
＊記事本文のみ変えるときは、全体のリンクの設定は通常通りにして、記事本文の下線変更のためのタグを書き加えます。
| 記事本文のリンク色（下線変更のためのタグ） |
| .articles-body a:link{ text-decoration: none; color:#008100; border-bottom: 1px #A70303 dotted;} .articles-body a:visited{ text-decoration: none; color:#008100; border-bottom: 1px #A70303 dotted;} .articles-body a:active{ text-decoration: none; color:#008100; border-bottom: 1px #A70303 dotted;} .articles-body a:hover{ text-decoration: none; color:#008100; border-bottom: 1px #A70303 dotted;} |
↓ 悩んだ時はこちらを参考にしてください ↓
文字色・文字サイズ・文字位置・字体
文字色をかえよう 文字の色をかえるには、所定の場所に以下のタグを入れます。 color: #000000;赤文字部分を変えることにより、色が変わります。 ↓ カラーはこちらを参考にしてください ↓ 挿入場所全体的な設定#container ...
harbotsfield2nd.com
2021.03.18
線(border)
線の種類と記述方法 ブログをカスタマイズするときに欠かせないタグのひとつがこの border です。 borderの指定をかえることでかなり印象がかわってくるため上手に使いたいタグですね。 記述方法 記入方法はこの2つを覚えましょう。 左右...
harbotsfield2nd.com
2021.03.18
スポンサーリンク
