閉じるボタンのデフォルトの位置
Lightbox2の閉じるボタン(close.png)は、画像の右下に設置されています。
![](https://pool-design.jp/wp-content/uploads/2023/08/01d26e64fe9a5bd8e1bbef8dae11d9d5.png)
閉じるボタンの位置を右上にカスタマイズ
画像のように、右上に閉じるボタンを設置していきます。
![](https://pool-design.jp/wp-content/uploads/2023/08/16df90ad212257bce5b572dbe104dac3.png)
JSのオプションでカスタマイズできるかと思いきや、できないようです。
読み込んでいる「lightbox.min.js」をカスタマイズします。
とはいえ、下記閉じるボタンのHTML部分
<div class="lb-closeContainer"><a class="lb-close" role="button" tabindex="0"></a></div>
を移動させるだけです。簡単ですね!
移動させる場所は以下の通り、.lb-containerの中に入れてあげるだけです。
![](https://pool-design.jp/wp-content/uploads/2023/08/0812-1024x335.png)
<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" role="button" tabindex="0" aria-label="Previous image" href="" ></a><a class="lb-next" role="button" tabindex="0" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel" role="button" tabindex="0"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close" role="button" tabindex="0"></a></div></div></div>
<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><div class="lb-closeContainer"><a class="lb-close" role="button" tabindex="0"></a></div><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" role="button" tabindex="0" aria-label="Previous image" href="" ></a><a class="lb-next" role="button" tabindex="0" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel" role="button" tabindex="0"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div></div></div>