あめつくのブログ

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

アメブロのサイドバーのリンク文字色を変更する(css)

広告

ここでは、アメブロのcssを編集して“アメブロのサイドバーのリンク文字色”を変更する方法を説明します。

【変更前】

【変更後】

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

広告

サイドバーのリンク文字色を変更する(css)

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

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

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

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

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

/*サイドバーのリンク文字色(まとめて色指定)*/
div.skinMenuBody a,
div.freespaceArea a,
div.plugin a{
color:#666666;
}

上の赤枠のcssを利用すると、まだ見ていないページ/既に見たページなどの文字色を同じ色にすることができます。もし、まだ見ていないページや既に見たページなどの文字色を別々にしたい場合は、下の赤枠のCSSの方を利用してください。

赤文字の部分を変更すると文字色を変更できます。色の変更方法は「アメブロ cssで色を指定する方法」を参考にしてください。

/*サイドバーのリンク文字色(個別に色指定)*/
div.skinMenuBody a:link,
div.freespaceArea a:link,
div.plugin a:link{
color:#FF0099; /*未訪問のリンク*/
}
div.skinMenuBody a:visited,
div.freespaceArea a:visited,
div.plugin a:visited{
color:#666666; /*訪問済みのリンク*/
}
div.skinMenuBody a:hover,
div.freespaceArea a:hover,
div.plugin a:hover{
color:#FFCC00; /*カーソルがのっている時のリンク*/
}
div.skinMenuBody a:active,
div.freespaceArea a:active,
div.plugin a:active{
color:#33FF00; /*クリック中のリンク*/
}

ちなみに、上の赤枠のCSS(個別に色指定)を利用すると、下の2つの画像のようになります。

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

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

ここまでの手順(サイドバーのリンク文字色をまとめて指定する方法)を動画にしました。よかったら参考にしてください。

 

以上、CSSでアメブロのサイドバーのリンク文字色を変更する方法でした!

広告

関連記事

コメント

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

  • コメント (0)

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

カテゴリー