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

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

カスタマイズ HTML, CSS, JavaScript
2019/05/06
8
vanillaice (Akira)
vanillaice (Akira)
初心者向けCSSTipsLuminous

ページに滞在したまま画像をその場で拡大表示させる luminous に関する記事です。

2021年9月5日
「共通html」ソースコードの内容にWAI-ARIA, loading属性など加筆しました。

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

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

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

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

  • 弊テンプレートを利用している
  • 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::beforeright: 0;margin: auto; を追加すると中心から左右に向かって線が出るようになります。

まとめ

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

Related post

Comments  8

M
2019/05/06 (Mon) 21:51

W3Cのエラーについて

Akira様 こんばんは。

Akira様の記事を読んで以来、いつもluminousを使わせてもらってます。

luminousを使うと、W3Cのほうでいつも「Error: Stray end tag source.」と表示されるのですが、
これは気にしなくてもよいものでしょうか?

いろいろと調べたのですが、解決するに至らず、そのまま放置してます(;^ω^)

vanillaice (Akira)
Akira
2019/05/06 (Mon) 21:58

To Mさん

Mさん、こんばんは (o'ω')ノ

それは「luminousを使ったから」ではなく単純に「htmlを間違えている」だけですよ。
source要素に終了タグはありません。img要素と同じくvoid element(空要素, 終了タグを持たない要素)です。

M
2019/05/06 (Mon) 23:00

To Akiraさん(お返事不要)

Akira様

お返事ありがとうございます。

ガーン!!そうでした(;^ω^)

助かりました。ありがとうございます(o*。_。)o

神代
2021/10/31 (Sun) 17:52

こちらの記事の画像表示について

Akiraさん、こんにちは!
先日、Luminousを導入してみました。

しかし、私の環境だけでしょうか?こちらの記事の「デフォルトスタイル」と「下からスライドアニメーション」の画像?の箇所がぐるぐる表示で読み込まれていないようです。
ご確認をお願いします。

vanillaice (Akira)
vanillaice (Akira)
2021/11/01 (Mon) 00:14

To 神代さん

こんばんは ('0')/
修正しました。お知らせありがとうございます :)

神代
2021/11/01 (Mon) 14:03

To vanillaice (Akira)さん

修正ありがとうございます。
早速、「下からスライドアニメーション」を使わせていただきました。
ただ、サンプルと違って、「クリックで拡大」部分が画像のちょい下から出てきてしまうのですよね。

例えばこの記事の画像→https://kamishiro7diary.blog.fc2.com/blog-entry-105.html

そのままソースコードをコピペしたつもりですが…。
原因、分かりますか?ご回答、よろしくお願いします。

vanillaice (Akira)
vanillaice (Akira)
2021/11/01 (Mon) 14:18

To 神代さん

こんにちは ('0')/

.luminousのルールセット最終に

overflow: hidden;

を追加してください。オーバーレイのデザイン(例えばクリックボタンを少しずらして(画像からはみ出させて)表示しておく、など)によってはこの指定を取り除く必要が出ますので、今後デザイン変更する可能性を考慮して「追加した」ということだけ覚えておいてくださいね。
よろしくお願いします :)

神代
2021/11/02 (Tue) 11:09

To vanillaice (Akira)さん

おおおー!できました。
追加したことを忘れそうなので、CSSにコメントアウトしておきました。
ありがとうございました。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)