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

設定

「外観」→「Lightbox Plus ColorBox」

---

カスタマイズの方法

設定画面の「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”」を追加するためのカスタマイズ