あめつくのブログ

  • このエントリーをはてなブックマークに追加

アメブロカスタマイズ 記事本文のリンク文字色の変更(css)

広告

ここでは、アメブロのcssを編集して「記事本文のリンクの文字色を変更する方法」を説明します。

なお、cssを編集するにはブログデザインを「CSS編集用デザイン」にする必要があります。ブログのデザインをCSS編集用デザインにする方法は、「アメブロのcssを編集するための設定」を参考にしてください。

広告

アメブロ記事本文のリンクの文字色を変更する方法

マイページ右上の「アメーバのサービス一覧」をクリックします。
サービス一覧(PC編)

[デザインの変更]をクリックします。
デザインの変更(PC編)

[cssの編集]をクリックします。

cssの編集画面が表示されます。ここから、記事本文のリンクの文字色を変更するためのcssの編集に入ります。

まず、下の赤枠の内容をコピーします。これが記事本文のリンクの文字色を変更するためのcssです。赤文字の部分を変更すると文字色を変更できます。色の変更方法は「アメブロ cssで色を指定する方法」を参考にしてください。

.articleText a:link{color:#0033FF;} /*未訪問のリンク*/
.articleText a:visited{color:#FF0099;} /*訪問済みのリンク*/
.articleText a:hover{color:#FFCC00;} /*カーソルがのっている状態のリンク*/
.articleText a:active{color:#33FF00;} /*クリックされている状態のリンク*/

上記内容を補足します。
リンクの文字色は、リンクの状態ごとに色を変更することができ、4つの状態があります。

4つの状態は、以下の通りです。

未訪問状態のリンク
まだクリックされていないリンクのことです。
訪問済み状態のリンク
クリック済みのリンクのことです。
マウスカーソルがのっている状態のリンク
これは、そのままです。リンク文字の上にカーソルがのっている状態です。
クリックされている状態のリンク
これも、そのままです。リンク文字がマウスでクリックされている状態です。

これらは、さきほどの赤枠内の各行に対応しています。

よくわからない場合は、このまま作業をすすめてください。 作業後、リンクにマウスカーソルをのせたり、リンクをクリックしたり、実際に自分で操作してみれば、ここで言っている内容がわかると思います。

コピーした内容はcssの一番下の部分に貼り付けます。
貼り付けが終わったら、[保存]ボタンをクリックして追加したcssを保存します。

保存できたらブログを表示し、ブラウザの更新ボタンをクリックします。
(古いデータが残っていると変更したcssが反映されませんので、ブラウザの更新ボタンをクリックして最新の状態に更新します。)

以上、「アメブロカスタマイズ 記事本文のリンク文字色の変更(css)」でした!!

広告

関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

カテゴリー