画像を拡大表示するプラグイン Simple Lightbox を CSS で調整してみました
このサイトには画像を拡大表示して見せるためのプラグインとして Simple Lightbox をインストールしてあります。
機能豊富で見た目がかっこいいのがお好みなら、Responsive Lightbox & Gallery というプラグインがおすすめですが、画像を Lightbox 効果で拡大表示するだけなら Simple Lightbox は必要十分だと思いますし、名前の通り設定画面がシンプルでわかりやすいです。
Simple Lightbox の設定画面
Simple Lightbox の設定画面はこれ ↓ ですべてです。Responsive Lightbox & Gallery の設定画面と比べると、とてもシンプルです。
![Simple Lightbox の設定画面](https://lightning.uonuma-js.com/wp-content/uploads/2022/02/simple-lightbox-setting-1.png)
![Simple Lightbox の設定画面](https://lightning.uonuma-js.com/wp-content/uploads/2022/02/simple-lightbox-settings-2.png)
以下の画像をクリックして、Simple Lightbox の画像拡大の動作を確認できます。
画像ブロック
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/P_20201202_130515-ps-150x150.jpg)
ギャラリーブロック
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/gem_melo-1.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_130730.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_130613.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_125120.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_125510.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_131100.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-A2400-IS_074505-1024x768.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-A2400-IS_074456-1024x768.jpg)
以下の CSS を追加して、画像のタイトル、番号、説明の部分のスタイルを調整しました。
#slb_viewer_wrap .slb_theme_slb_baseline .slb_data_content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-top: 0.5em;
}
#slb_viewer_wrap .slb_theme_slb_default .slb_container .slb_group_status {
font-style: normal;
}
#slb_viewer_wrap .slb_theme_slb_default .slb_container .slb_data_title {
font-family: Hiragino Mincho ProN,"游明朝",serif;
}
#slb_viewer_wrap .slb_theme_slb_default .slb_data_desc {
flex-basis: 100%;
}
![Simple Lightbox のスタイルを CSS でカスタマイズ](https://lightning.uonuma-js.com/wp-content/uploads/2021/06/simple-lightbox-before-after.png)
関連記事
サイト運営者プロフィール
![対馬 俊彦](https://lightning.uonuma-js.com/wp-content/uploads/2024/02/tsushima_bg_220x220-150x150.jpg)
- 魚沼情報サービス
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
その他2023年10月12日カラムブロックとカバーブロックで作る積み上げ棒グラフ
Lightning Pro2023年4月19日モバイル固定ナビをパソコンでも使ったカスタマイズ例
Lightning Pro2023年3月19日6 Web Fonts with CSS で投稿日・投稿者のアイコンが表示されない問題
ExUnit2022年5月26日ExUnit のシェアボタン(ソーシャルボタン)のカスタマイズ例いろいろ
![](https://lightning.uonuma-js.com/wp-content/uploads/2024/07/cta-02.webp)
Lighting テーマ使用
WordPress サイト開設
スターターパック
- デザイン済みパーツを組み合わせることで価格と納期を大幅削減
- プロが作ったクオリティが高いホームページ
- サポート付き・ご自分でかんたんに情報発信できます