「Lightbox Plus ColorBox」のCSSカスタマイズ

lightbox image

WordPressの高機能Lightboxプラグイン「Lightbox Plus ColorBox」。
スタイルのプリセットも多数用意されていますが、オリジナルの表現で軽快に動作させます。

設定

「外観」→「Lightbox Plus ColorBox」
lightbox設定lightbox設定lightbox設定


カスタマイズの方法

lightbox設定

設定画面の「Styles→Use Custom Styles:」という項目は無視して、手っ取り早くプリセットのどれかを複製してしまいます。適当なフォルダをまるごと複製するだけで、プリセットメニューに反映されます。
場所は「wp-content/plugins/lightbox-plus/css


CSS

colorbox.css」の中身を上書きコピペするだけです。ご利用・改変、ご自由に。


#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:visible;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:co
//↑これより上はいじらない

#cboxOverlay{ background:#000; } #cboxContent{ background:none; margin-top:20px; } #cboxBottomCenter{ margin-top:40px; height:30px; } #cboxLoadedContent{ background:#000; padding:8px; border-radius:7px; box-shadow:1px 1px 5px rgba(0,0,0,.5); }

#cboxTitle{ position:absolute; bottom:-25px; left:10px; font-size:.9em; color:#fff; } #cboxCurrent{ position:absolute; bottom:-25px; right:35px; letter-spacing:.5em; font-size:.9em; color:#ccc; } #cboxSlideshow{ position:absolute; top:-20px; left:10px; color:#ccc; }

#cboxPrevious{ position:absolute; top:0; left:5px; width:49%; height:100%; } #cboxPrevious:hover:before{ content: '\f430'; position: absolute; left:10px; top:46%; display:block; width:44px; height:44px; padding:10px; font: normal 44px/1 Genericons; color:#ccc; vertical-align: text-bottom; -webkit-font-smoothing: antialiased; background:rgba(0,0,0,.8); border-radius:5px; }

#cboxNext{ position:absolute; top:0; right:5px; width:49%; height:100%; } #cboxNext:hover:after{ content: '\f429'; position: absolute; right:10px; top:46%; display:block; width:44px; height:44px; padding:10px; font: normal 44px/1 Genericons; color:#ccc; vertical-align: text-bottom; -webkit-font-smoothing: antialiased; background:rgba(0,0,0,.8); border-radius:5px; }

#cboxLoadingOverlay{ background:#000; } #cboxClose{ position:absolute; bottom:-32px; right:5px; display:block; width:24px; height:24px; color:#999; } #cboxClose:before{ content: '\f405'; display:block; font: normal 24px/1 Genericons; color:#999; vertical-align: text-bottom; -webkit-font-smoothing: antialiased; }

画像を使わずウェブフォントで

細かいHTTPリクエストを極力減らして高速化したいので、矢印やcloseボタンはウェブフォント表現しています。genericonsを使えるようにしておけば、そのままで動きます。

さらに自動化

「rel=”lightbox”」は自動でつけたい。こちらを使わせていただきました。「functions.php」に数行追加するだけです。
画像リンクに「rel=”lightbox”」を追加するためのカスタマイズ

COMMENTS

RELATED