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

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

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

目次 Table of Contents

今回追加したプラグイン
jQuery Colorbox で邪魔なファイル数ナビゲーションを消す

今回追加したプラグイン

jQuery Colorbox
SEO Friendly Images

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

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

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

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

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

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

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

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

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

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

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

の中にある

colorbox.css

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

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

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

    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        /*********************************************************************
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        *********************************************************************/
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}

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