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

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

カスタマイズ
2019/05/06 3
vanillaice (Akira)
vanillaice (Akira)
初心者向け CSS Tips Luminous

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

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

画像拡大スクリプト と言えば Lightbox(ライトボックス) や Colorbox(カラーボックス) などが有名どころですが、今回おすすめするのは Luminous(ルミナス) です。...

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

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

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

デフォルトスタイル

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

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

共通html

<a class="luminous" href="画像アドレス">
  <img src="画像アドレス" style="width: 初期表示サイズpx;" alt="代替テキスト">
</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内容だと大判画像の場合に少し疎ましい印象があるかもしれません。そんな場合は自分の好みに合うスタイルに変更してくださいね。

 3

There are no comments yet.
M
W3Cのエラーについて

Akira様 こんばんは。

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

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

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

2019/05/06 (Mon) 21:51
vanillaice (Akira)
Akira
To Mさん

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

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

2019/05/06 (Mon) 21:58
M
To Akiraさん(お返事不要)

Akira様

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

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

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

2019/05/06 (Mon) 23:00

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ