目次

【アメブロカスタマイズ】マウスホバー時にリンクを半透明にしない（薄くしない）方法

  • アメブロのヘッダー画像がマウスホバー時に薄くなる（半透明になる）のが困る。
  • アメブロのリンクにマウスカーソルを重ねた時に色が薄くならないようにしたい。

「新CSS編集用デザイン」向けです

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

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

そこで、当記事では、アメブロのマウスホバー時にリンクが半透明になってしまう効果を無効にするカスタマイズ方法をご紹介したいと思います。

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

CSSを編集してアメブロをカスタマイズをする手順
アメブロをカスタマイズするための専用のデザイン「CSS編集用デザイン」に用意されている「ブログデザインCSS」を編集してアメブロをカスタマイズする手順について説明します。

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

それでは早速ですが、以下のコードをCSSの末尾に追加してください。

/* マウスホバー時にリンクを半透明にしない */
a:hover, /* リンク全般 */
.skin-headerTitle:hover, /* ヘッダー */
.skin-tileItem a, /* タイル(トップページ) */
.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 { /* 記事一覧ページのタブ */
  opacity: 1.0;
}

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

まとめ

以上、アメブロのマウスホバー時にリンクを半透明化しない（薄くしない）ようにするカスタマイズ方法をご紹介しました。

よかったら参考にして下さい。

(準備中)
(準備中)