Googleが認めたAAAの凄さ

📷2018写真集売上げランキング集計は2017.12/4付分(実質11/24)～2018.6/18付分(同6/10)

CSSだけでLightboxっぽいものを作ってみました。画像をクリックすると画像がその場で拡大します。

デモ

画像拡大

テキストにも拡大リンクを貼れます。→ 

応用 – YouTubeの動画を拡大

弱点とか説明とか

• 記事に表示する画像と、拡大に使用する画像の2つを読み込む必要があります。（SEO的によろしくないかも？）
• アンカーリンクを利用するので、拡大すると履歴に残り、ブラウザで戻るのが大変になりますww
• スマホで見ると画像が二枚になるので、スマホにもCSSを読み込んでください。
• 右上の閉じるボタンはお飾りです。実際はどこを押しても記事に戻ります。

実装方法

CSS

.lb {    display: flex;    position: fixed;    width: 100%;    height: 100%;    top: 0;    left: 0;    justify-content: center;    align-items: center;    background: rgba(0,0,0,.7);    opacity: 0;    transition: .3s opacity ease;    z-index: -1;}.lb img {    width: auto !important;    max-height: 100%!important;    transform: scale(.7);    transition: .4s transform ease;    pointer-events: none;}.lb:target {    opacity: 1;    z-index: 103;}.lb:target img {    transform: scale(1);}/* なんちゃって閉じるボタン（いらない場合は消す） */.lb::before,.lb::after {    display: block;    position: fixed;    content: "";    width: 24px;    height:3px;    top: 24px;    right: 12px;    background: #fff;    border-radius: 4px;}.lb::before {    transform: rotate(-315deg);}.lb::after {    transform: rotate(315deg);}

HTML

<a href="#sample01"><img src="記事の画像URL"></a><a id="sample01" href="#close" class="lb"><img src="拡大する画像URL"></a>

赤文字の箇所は、画像毎に文字列を変えてください。また、同じページで文字列が被らないようにしてください。（トップページやカテゴリーページに注意！）

YouTubeは以下のように記述することで拡大できます。

<a href="#youtube">ここに文字</a><a id="youtube" href="#close" class="lb">YouTubeで発行する埋め込みコード</a>