wordpressでcolorboxを使用した際、スマホでも画像表示を最適化する方法

wordpressでcolorboxを使用した際、スマホでも画像表示を最適化する方法

自分のblogをちまちまリニューアルさせて2ヶ月くらいでしょうか。
久しぶりにスマホで見たら、記事に投稿してる画像の表示がイケてないことになってたので、スマホでも閲覧できるよう最適化します。

スポンサードリンク

管理画面上で見れる「設定>jQuery Colorbox」の画面が英語なので英語力がない私は日本語化させておきます。

1)下記のブログで日本語化のpoファイルを作ってくれてるので、ありがたくダウンロードします。

jQuery Colorbox Ver.4.3 日本語化poファイル

2)ダウンロードして解凍したファイル「jquery-colorbox-ja.mo」「jquery-colorbox-ja.po」をFTPで下記の場所へアップロードします。

任意のドメイン/wp/wp-content/plugins/jquery-colorbox/localization/

アップロード後、管理画面をリロードすると日本語化してくれてます。

3)「設定>jQuery Colorbox」の画面にて、
「画像の幅の最大値:」「画像の高さの最大値:」の項目をそれぞれ100%に設定する。

c01

4)「設定>jQuery Colorbox」の画面にて、
「画像のリサイズ:」の項目にチェックを入れる。

c02

「変更を保存」をクリック。

スマホで確認すると、画像クリックしたときに画面をはみ出さずに表示されるようになります。

参考サイト:
jQuery Colorboxを日本語化してスマートフォン用にも最適化する

不具合的なものに気づいたら、また都度調整していきたいと思います。