リンク文字の下に下線を引くには（リンク文字を青く、大きく、太く）

こんにちは、パソコンワンポイントレッスン！

PCインストラクターの川上です。

実は、こういったご質問とても多いです^^!!

リンク文字の下に下線が引けません。

単純にその都度、リンク文字の下に下線を引くのであれば、
（あ、文字の下に引くから下線、なので、本来であれば、リンク文字に下線を引く、でいいのでしょうが^^;ま、突っ込まないでくださいませ～(^^♪）

『記事中の文章に下線や蛍光マーカーを引くには』

こちらの過去記事をご参照いただければ、と思いますが･･･。

ブログ本文に書いたリンク文字すべてに下線をつけるには、CSSで設定するとよいですね。

その際に、あなたのアメブロデザインが「CSS編集用デザイン」になっている方は、
※この確認は、「マイページ」内の「デザインの変更」をクリックするとわかります。

「適用中のデザイン：」が「CSS編集用デザイン」かそれ以外か↓
が確認できます。

「CSS編集用デザイン」になっている方は、「CSSの編集」リンクをクリックして、

下に出てくるCSSソースの一番下に、こちらのコードをさっくりコピペしてくださいませ↓

/*　　記事、メッセージボードのリンク文字　　*/
.articleText a,.skinMessageBoard a{
font-size:16px; /*文字サイズ*/
font-weight:bold; /*文字太く*/
color:#0000FF; /*文字青色*/
text-decoration:underline; /*下線有り*/
}

あとは、「保存」を押して、ブラウザを更新（F5キー）するとOKです。

文字の大きさを変更したくない人は、

font-size:16px; /*文字サイズ*/

は削除してくださいませ。
（または、削除しないでfont-size:1em;　に変更してもOKです）

また、リンク文字を太くしない場合は、

font-weight: bold; /* 太字に */

を削除してください。
（または、削除しないで、font-weight: normal; 　に変更してもOKです）

ただし、
リンク文字に影をつけたい場合は、

text-shadow: 1px 1px 3px #333;/* 文字に影を */

を追加いただくとOKです。

あ、それから･･･、やっぱり･･･
リンク文字に下線がいらない場合は、

text-decoration:none; /*下線なし*/

にしてくださいませ^^;

結局、リンク文字に全部設定したい方はこちらのコードを↓

/*　　記事、メッセージボードのリンク文字　　*/
.articleText a,.skinMessageBoard a{
font-size:1.2em; /*文字サイズ*/
font-weight:bold; /*文字太く*/
color:#0000FF; /*文字青色*/
text-decoration:underline; /*下線有り*/
text-shadow: 1px 1px 3px #333;/* 文字に影を */
}

また、アメブロのデザインが、「CSS編集用デザイン」でない方は

フリースペース編集　か　フリープラグインに

追加するとよいです。

･･･で、さて、今回ご質問いただいた方は、うまくいったのでしょうか～↓↓↓

北海道まで習いに行きたい♪パソコンの先生｜東京・高輪で幸せになるレッスン・カウンセリング!

また、リンク文字についてのこちらの記事もどうぞご参照くださいませ～～↓↓↓

『リンクの文字色って記事の中だけ青、サイドバーは別の色って出来たりするのでしょうか？』

以上、リンク文字の下に下線を引くには、でした。

LIDS札幌・ライフデザインスクール
川上雄大

Home｜ profile｜ school｜お問合せ