マウスホバー時にリンクを半透明化させない方法(新CSS)

アメブロの新CSS編集用デザインでは、テキストリンク、画像リンクともにマウスホバー時（マウスカーソルをリンクに重ねた時）に半透明化されるようになっていますが、リンクである(クリックできる)ことがわかりやすくなる反面、

• ヘッダー画像が透けて背景色が見えてしまう
• マウスホバー時にバナー画像を切り替えたら薄くなってしまう

などの問題もあります。

ここでは、これら問題の対策のため、マウスホバー時にリンクが半透明化する効果を無効にするカスタマイズ方法をご紹介します。

なお、このカスタマイズは、CSSの編集で行いますので、やり方がわからない場合は先に確認しておいて下さい。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

マウスホバー時のリンクの半透明化を無効にする

カスタマイズは簡単で、以下のコードをCSSの末尾に追加するだけです。

/************************************************
  新CSS：リンクのマウスホバー時の半透明化を無効にする
************************************************/
a:hover, /* リンク全般 */
.skin-headerTitle:hover, /* ヘッダー */
.skin-tileItem a:hover, /* タイル(トップページ) */
.skin-btn:hover, .skin-btnPrimary:hover, /* ボタン(メインカラム) */
.skin-btnSide:hover, .skin-btnSidePrimary:hover, /* ボタン(サイドバー) */
.skin-widget .skin-linkList a:hover, /* リンクリスト(サイドバー) */
.skin-widget .skin-linkListToggle:hover, /* リンクリスト(サイドバー) */
.skin-archiveNavTabs li a span:hover, /* 記事一覧ページのタブ */
.____dummy____ { /* ダミー */
  opacity: 1.0;
}

これで、主なリンクは半透明化しなくなると思います。

半透明化させないようにすると、リンクであることが分かりにくくなる場合もありますので、コード内のコメント（注釈）を参考に、半透明化を無効にしたくない部分の設定は外して下さい（「ダミー」の行は設定として有効なものではなく、他の設定をどれでも削除しやすいように入れてあります）。

また、opacity: 1.0;の数値を変えると、半透明化の度合い（不透明度）を自由に変更することもできます（1.0が完全不透明で、0.0が完全透明）。

まとめ

以上、マウスホバー時にリンクを半透明化させないようにするカスタマイズ方法をご紹介しました。

基本的に、CSSにコードをコピペするだけでできますので、よかったら参考にして下さい。