【luminous】マウスオーバー時のオーバーレイカスタマイズ

超軽量画像拡大スクリプトLuminousをFC2で使う方法

画像拡大スクリプト と言えば Lightbox(ライトボックス) や Colorbox(カラーボックス) などが有名どころですが、今回おすすめするのは Luminous(ルミナス) です。 FC2ブログで利用するための各ファイル導入の仕方、コードの書き方などのベーシックな内容に加え、速度強化用のコード記載の仕方や画像が拡大できることをわかりやすくするための追加CSSなど。 初心者向けになるべく事細かに説明したいと思います。 今回は...

vanillaice000.blog.fc2.com

非常に対象範囲が狭くなってしまいますが

• 弊テンプレートを利用している
• luminousを導入している
• マウスオーバー時にオーバーレイ表示させている

という方へ向けての記事です。オーバーレイの見た目のカスタマイズについてです。

デフォルトスタイル

上記ブログカードの紹介記事にあるオーバーレイの初期設定は以下の通りです。

こちらの内容はブログカードの記事で取得してください。

共通html

<a class="luminous" href="画像アドレス" aria-label="クリックで拡大">
  <img src="画像アドレス" width="横実寸" height="縦実寸" style="width: 初期表示サイズpx;" alt="代替テキスト" loading="lazy">
</a>

画像アドレス については a要素内と img要素内の2箇所に記します。基本は双方「同じアドレス」を入れることになりますが、ページ負荷に配慮して別々に指定しても構いません。というか本来はその使い方が有効です。

img要素には原画とは別でサイズ縮小(CSSによるものではなく画像編集での縮小)を行った画像を指定、a要素には原画を指定。原画の方はクリックされて初めてデータ取得が行われますので、ページスピードに配慮するならばこちらの方法を取られると良いですね。

さらに知識の有る方はアートディレクションを行ったり、source要素やsrcset属性を利用してレスポンシブ・dip対策を行うこともできます。

共通CSS

.luminous {
  display: inline-block;
  position: relative;
}

共通CSSの下に以降で紹介する好みのデザイン内容をペーストしてください。

ホバー時のアニメーション速度は テンプレートの指定に依存 します。独自に速度指定したい場合は .luminousセレクタの position: relative; の下に transition: 数値s ease-in-out; を追加してください。数値の単位は「秒」です。ミリ秒指定は .8s など小数点を使用してください(小数点以前の 0 は不要です)

円形アイコン

.luminous::before {
  content: "";
  opacity: 0;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: auto;
  background: rgba(0,0,0,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke='rgb(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cpolyline points='9 21 3 21 3 15'%3E%3C/polyline%3E%3Cline x1='21' y1='3' x2='14' y2='10'%3E%3C/line%3E%3Cline x1='3' y1='21' x2='10' y2='14'%3E%3C/line%3E%3C/svg%3E") center center /25px 25px no-repeat;
  transition:inherit;
}
.luminous:hover::before {
  opacity: 1;
}

アイコンはdataURIで表示しています。円形の背景色を変更するには backgroundプロパティ内の rgba(0,0,0,.6) を変更してください。

アイコンの色変更は同じく backgroundプロパティの rgb(255,255,255) を変更(dataURIのstroke属性の値に指定されています)

下からスライドアニメーション

.luminous::before {
  content: "クリック拡大";
  opacity: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: .5em;
  background: rgba(0,0,0,.6);
  color: white;
  font-size: 12px;
  text-align: center;
  transition:inherit;
  transform: translateY(100%);
}
.luminous:hover::before {
  opacity: 1;
  transform: translateY(0);
}

上からのスライドに変更するには bottom: 0; を top: 0; に変更、transform: translateY(100%); を transform: translateY(-100%); に変更。

テキスト量は画像表示面積と相談してください。

下線

.luminous::before {
  content: "";
  box-sizing: border-box;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 0;
  height:  8px;
  background: rgb(112,88,163);/* 下線の色 */
  transition:inherit;
}
.luminous:hover::before {
  width: 100%;
}

.luminous::before に right: 0; と margin: auto; を追加すると中心から左右に向かって線が出るようになります。

まとめ

デフォルトのCSS内容だと大判画像の場合に少し疎ましい印象があるかもしれません。そんな場合は自分の好みに合うスタイルに変更してくださいね。