*

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を日本語化してスマートフォン用にも最適化する

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

 -Web, wordpress

Sponsored link

Sponsored link

  関連記事

AndroidでPCサイトを閲覧すると幅が狭まって余白ができる

実機(AQUOS PHONE 206SH)でPCサイトを検証したところ右側にボコっと余白ができる。 ググってるとAndr

no image

twitterやfacebookのロゴに利用できるフォント

携わる機会がないとわからないのでメモ。 ■「twitter」のロゴ作成に利用できるフォント →  Pico-Black

no image

Google Analyticsで自分のアクセスを除外する

今更ネタではあるかもしれませんが。 今までなんとなく知ってた方法は、 1)アナリティクスのフィルタで除外する方法。 参考

Googlemapをスマホサイトで表示させるときは「zoom:1」を忘れずに

なんか以前も同じことあったじゃないか…と自己嫌悪ですが、人は忘れていく生き物なのでメモです。 ※ちなみに今回のはスマホサ

no image

Plaxo

知り合いからplaxoの招待メールもらったので入ってみたが、まだ使い勝手がいまいちわからん。 とりあえず、googleカ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

ブログの記事を紹介していただきました

このブログ更新するの、約1年ぶりか(汗) すごいお久しぶりです。 このブログを始めてもう地味に10年くらい経つのですが(

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

  • ブログランキング・にほんブログ村へ