記事内のリンクを自動で強調する方法

今回は、記事の中にあるリンクを自動的に強調する方法をご紹介します。

リンクはクリックしてもらうためにあるものなのです。

って分かりきった事ですが、
なかなかクリックしてもらえないのがもどかしいものなのです

だったら、クリックしてもらえられるように分かりやすくしてあげましょう。

記事の中のリンクとは？？
アメブロをカスタマイズするその前に…
このようなものです。

では、記事内リンクの書き方をここで簡単にご紹介。

①【記事を書く】の中にある【リンク】ボタンをクリック。

②下の画像のような入力画面が出てきます。
　　・テキストにリンクしたい文章を入力します。
　　・URLに飛び先のページURLを入力します。
　　・リンク先の表示方法を選択します。
　　　（通常、自分のブログ内へのリンクなら同じウィンドウ、
　　　　違うブログやサイトへは新しいウィンドウを選択します。）

　　入力し終えたら、【リンク】ボタンをクリック。

③すると、下のようにリンクがついた文章が出てきます。

これで終了です。

このリンクを、
あなたのブログの読者に
分かりやすくするためのカスタマイズ

　CSS編集画面でタグを追加する方法 はこちらです。

『追加するタグ』はこちらから。

↓↓↓この下から↓↓↓
/* 記事内リンク */
.subContents a{
font-weight: Normal; /*文字の太さ*/
font-size: 13px;　/*文字サイズ*/
text-decoration: underline; /*文字の装飾*/
color: #0000ff; /*文字色*/
}

/*これより下はリンクに矢印を重ねた時に変化させるためのタグです*/
/*もし要らない場合はここも含めて削除してください*/
.subContents a:hover{
font-weight: Normal; /*文字の太さ*/
font-size: 13px; /*文字サイズ*/
text-decoration: underline; /*文字の装飾*/
color: #990000; /*文字色*/
}
/* 記事内リンク・ここまで */

↑↑↑この上まで↑↑↑

赤文字の部分を変更することにより、あなたの好みのスタイルに変更できます。

赤文字の部分の変更方法
文字サイズを変更する
文字を装飾する
文字色を変更する
文字の太さを指定する

【ミニカスタマイズ】文字の太さを指定する

今回は、文字の太さを指定する方法をご紹介します。

記事の中の文字であれば、文字の太さを指定できるのですが、
今回紹介する方法で、あなたのアメブロ全ページの文字に指定する事ができます。

そのタグは、

font-weight: ●●● ;

●●●に入力するコードは、
　・ bold　（太字）
　・ normal　（指定なし）

このどちらかを入力すれば文字の太さの指定ができます。

例） リンク文字を太字に指定するには、

↓↓↓この下から↓↓↓
/*リンク文字を太くする*/
a {
font-weight: bold;
}
/*リンク文字を太くする・ここまで*/
↑↑↑この上まで↑↑↑

これをCSS編集画面にタグを追加する だけでOKです。

また、●●●に、９段階の数値で指定する方法もあります。
　
　・100　… 最も細い
　・200
　・300
　・400 … normal と同じ太さ
　・500
　・600
　・700 … と同じ太さ
　・800
　・900 … 最も太い

１００が最も細く、９００が最も太くなります。

記入例）
a {
font-weight: 500;
}

<< 関連記事 >>
【ミニカスタマイズ】文字サイズを変更する
【ミニカスタマイズ】文字を装飾する
【ミニカスタマイズ】文字色を変更する

【ミニカスタマイズ】文字色を変更する

文字の色を変更すると、あなたのアメブロの印象がかなり変化します。

といっても、記事内の文字は【記事を書く】画面で編集できるのです。

ここでは、アメブロ全ページに適用するためにCSSを編集する方法をご紹介します。

文字色を指定するタグは、
color: ●●● ;

●●●に入力するコードとしては、
　・ #000000　（黒色）
　・ #ffffff　（白色）
　・ #0000ff　（青色）
　・ #ffff00　（黄色）
　・ #800080　（赤色）

といったコードを入力すれば、文字色を変更できます。

例） リンク文字の色を青色に変更するには、

↓↓↓この下から↓↓↓/*リンク文字色の指定*/
a {
color: #0000ff;
}/*リンク文字色の指定・ここまで*/
↑↑↑この上まで↑↑↑

これをCSS編集画面にタグを追加する だけでOKです。

もっと色のコードを知りたい方は、こちらのサイトで探し出せます。

原色大辞典～ブラウザで名前が定義されている140色の色名と16進数

<< 関連記事 >>
文字サイズを変更する
文字を装飾する