jQuery Colorbox で表示させた画像から 1 of ○ images を消す方法

時々画像を使ってるので、やっぱり表示にも気を遣いたい。
ということでプラグイン追加です。

あらかじめ結論を言ってしまいますが、結局この記事書いたあと
Highslide for WordPress *reloaded*に出戻って、
さらに SEO Friendly Images も外してしまいました。
一応参考までに、jQuery Colorbox と SEO Friendly Images のメモ残しときます。

今回追加したプラグイン

  • jQuery Colorbox
       – 画像をかっこよく表示する系
  • SEO Friendly Images
       – 画像の Title と alt属性を自動的につけてくれる系


今まで画像表示にはHighslide for WordPress *reloaded*を使ってたのですが、
個人的にもっとカッチョよくてクール! と感じたエフェクトを
よそ様のブログで見つけたので、プラグイン探してみました。

Litebox効果のプラグインはめちゃくちゃ多いので苦労するかと思ってましたが、
結構人気があるらしくてすぐに jQuery Colorbox だと判明☆
サンプルは作者様のサイトで見られます。
11種類もあるんですよ♪

ついでに、画像に alt属性やタイトルを勝手につけてくれる、
SEO Friendly Images も入れてみました。
いちいち入力するのが面倒な性分なので、ありがたいです。

とそれぞれ満足するかと思いきや・・・

jQuery Colorbox で邪魔なファイル数ナビゲーションを消す

jQuery Colorbox を導入して最初に困ったのが、「1 of 3 images」という
「この記事には何枚の画像があって、これは何番目ですよ〜」表示です。
これ小さい画像だと、こうなるんですよ。

jQuery Colorbox デフォルト状態

重なって見えない。
これは見づらい。

どうにかならないものかと検索したら、こちらのページでわかりやすく解決策が
書かれていました。

Colorboxのいろんなサンプルを使ってみる – 趣味の工房
WordPress プラグイン版でもばっちりこの方法使えました!

 

具体的には、FTPクライアントソフトで

/wp-content/plugins/jquery-colorbox/themes/theme1(←選択したテーマ番号のフォルダ)

の中にある

colorbox.css

をいじります。
テーマ1の場合は36行目にある

#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}

という記述が例のナビゲーションの表示方法を指定してるので、
エディタで検索してここだけコメントアウトします。

まるごと削除しちゃってもいいけど、これなら気が変わって復旧の必要が出たとき
「/********」と「********/」を削除すればいいし、場所もわかりやすいかなと。
これで画像から番号が消えてスッキリしました。

colorbox.css カスタマイズ後

ちょっと疲れたので、SEO Friendly Images についてはまた明日後日。