ブログパーツ

趣味の工房

Colorboxのいろんなサンプルを使ってみる

みなさん、こんばんは


以前記事にしたブログの画像表示をスタイリッシュに♪(2)【Color Box】の件ですが、ボクは「example1」が気に入って使っていたんですが...



小さい画像だとこのように...
2011y05m21d_221611949_20110522201455.jpg

ギャラリー表示のときに出る「Page1of5」のような表示がタイトルとつながったり、時にはかぶってしまうのが気になってました。



で、他のCSS(example2~5)を試してみたり、試行錯誤してました。( ̄∇ ̄;)
前回もお話したとおり、本家サイトからダウンロードしてくると、5種類(example1~5)のCSSのセットになっています。
2011y04m14d_114058901.jpg


他のexample(CSS)を試したいときも、基本は同じなんですが、今まで使っていたものにもすぐ戻せるようにしたい...
例えば、「examole4」を開いてみると、
2011y05m21d_223104603.jpg

「example1」のフォルダと同じように「image」フォルダと「coloebox.css」、「index」が入っています。
方法は前回の記事の通り、「coloebox.css」の一部を書き換えてUPするだけなんですが、「Colorbox」内の「jquery.colorbox」、「jquery.colorbox-min」は共通ですので、これはまたUPする必要はありません。
つまり、各「example」フォルダ内のCSSファイルと、「images」フォルダの画像をUPすれば完了です。


ただ、上記のようにファイル名が同じなので、設定によっては今まで使っていた「colorbox.css」が上書きされてしまう恐れがあります。
上書きされてしまうと、元に戻したいときにはまた以前の「colorbox.css」をUPしなおさなくてはいけません。
さらに、同じく「example4」内にある「image」フォルダの中身の画像も、同じ名前になっているものが多いです。これが上書きされてしまうと、CSSだけ元に戻しても、表示が変わってしまいます。

2011y05m22d_081436323.jpg
上の画像のように、ファイルのアップロード画面で「同名ファイル」の処理を「別名で保存」にしておけば問題はないのですが、別名にすると今度は元のファイル名に日付と時間が追加される形になるので、ファイル名が長くなり、あとあと不便です。

そこで、名前を先に変更してしまいます。
2011y05m22d_082504391.jpg
「example4」のCSSなので、「colorbox4」とします。「Image」ファイルの中の画像に関しては、長くても短くても問題ないので、「別名で保存」とします。


また、CSSの中身ですが、これも前回同様書き換える必要があります。
2011y05m22d_082719841.jpg

前回同様、url(images/○○.png)の様になっている部分をUPした画像ファイルのURLに置き換えます。
ただし、前回は画像のファイル名を変えていないので、最後のファイル名は残していましたが、今回はファイル名も変わっているため、カッコ内はまるまる置き換えます。
また、赤ラインと青ラインの部分は「image/」のあとのファイル名が違います。
つまり、赤ライン部分には「example4」の「images」フォルダ内にあった「border1」の画像URLに、青いライン部分には同じく「border2」の画像URLに差し替える必要があります。

これは他のサンプルでも同じで、ここに記述されているファイル名と同じ画像ファイルが「images」フォルダ内にありますので、それぞれ対応した画像確認し、UPした後でそのURLに書き換えます。
もちろん、違う画像、例えば背景だけはExample1と同じにしたいとか、このボタンはexample3のものがいいとかの場合には、あえてその画像のみ変えて指定することも可能ですし、もっといえば自分で作成した画像にすることだって可能です。


念のためUP下画像のURLの確認方法。
2011y05m22d_083911098.jpg
アップロード画面から、確認したい画像のサムネイル(縮小画像)をクリックします。
(ボクは画像ファイルも名前を変えてあります)
ちなみにこれは画像が表示されるまでの「待ち」(Lading)の間にでる画像ですね


画像が表示されたら、アドレスバーを確認。これをコピー&ペーストでOKです。
2011y05m22d_083924385.jpg


画像のUP,書き換えたCSSファイルのUPが終わったら、テンプレートで確認します。
前回同様、複製を作って作業されることをオススメします。

2011y05m22d_091507465.jpg
前回挿入したテンプレートの記述の最後のほうにCSSを読み込むための記述がありますので、画像のアンダーライン部分を変更したCSSファイルの名前に変更します。(画像はすでに「colorbox0」に変えてます)
長いと後々不便というのは、この部分のことです。
上記のように、例えば「example4」のCSSファイルを「colorbox4」に変更した場合は、この記述の「colorbox」の後(.cssの前)に「4」を記入するだけで済むようになります。


とりあえずボクはこうしていろいろ試行錯誤したんですが...



結局最初の「example1」にたどり着きました(爆)


最初の問題、ギャラリー表示のときに出る「Page1of5」のような表示がタイトルとかぶってしまう問題については、「colorbox.css」ファイルの...

2011y05m22d_092700000.jpg

上の画像のアンダーライン箇所、
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
削除して、「Page1of5」のような表示を非表示にすることで回避しました。


ちなみに、非表示ではなく文字サイズを小さくして回避したい場合は、上記アンダーライン部分の
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
の最後の }の前に「(半角スペース)font-size:small;」と入力します。(さらに小さくしたい場合は「small」を「x-small」に。)


2011y05m22d_191302689_20110522192810.jpg


これで、「page1of...」の文字だけ小さくできます。
2011y05m22d_201108106.jpg






CSS、奥が深い...( ̄∇ ̄;)




それでは。ヽ(* ̄∀ ̄)**SeeYou**


ランキングに参加しております。クリックにご協力を♪
にほんブログ村ランキングへ
にほんブログ村


関連記事


    19:30 | Trackback : 4 | Comment : 12 | Top
Comment
2011.05.22 Sun 21:26  |  Hide-Rocket #-
>結局最初の「example1」にたどり着きました


よくあるwwwwww




って良記事お疲れ様です♪
  [URL] [Edit]
2011.05.22 Sun 23:06  |  刀騎士 #iIaBNIc.
三回読んでもわからない・・・
難しいぃぃ 
  [URL] [Edit]
2011.05.22 Sun 23:48  |  junqhandled #FUbsa06c
こんばんは。

おい、ScytheJapanのWeb担当者見てるぅー?
製品写真見るのがめんどくさいサイトデザインを
ここ見て勉強してちょーだい><

…って誰か言うてましたよ。わ、わ、わ、わ
私じゃないd・・・うわなにをするやめrftgyふじこlp;
  [URL] [Edit]
2011.05.23 Mon 15:54  |  rennon #z7XDr28E
はじめまして、りくんちゅ。パパさん

このような場所に書き込みするのは失礼ですがゴメンなさい

blogを拝見したとき

ケースの改造 水冷 電飾 レベルの高さに衝撃でした

当方もホームページを運営していますが

もし、よろしければリンクしても宜しいでしょうか?

是非、お願いします
はじめまして  [URL] [Edit]
>Hide-Rocketさん

やっぱり!?(笑)
回り道が好きなんですよ。きっとwww



>刀騎士さん

多分実際にやってみないとわからないと思います。
( ̄▽ ̄;)
必要になったら、この記事を思い出してくれればいいですよ(笑)


>junqhandledさん

…合掌( ̄人 ̄;)








www


>rennonさん

わざわざご連絡ありがとうございます。
リンクは自由に貼って頂いて構いませんよ♪
サイト拝見しましたが、凄い情報量ですね。Σ( ̄□ ̄;

こちらも貼らせてもらって構わないですか?

  [URL] [Edit]
2011.05.23 Mon 20:32  |  rennon #z7XDr28E
りくんちゅ。パパさん ありがとうございます

相互LINKは、当方も嬉しく思います

これからも宜しくお願いします
  [URL] [Edit]
2011.05.23 Mon 23:09  |  ねこさん #-
パパさん、こんばんは☆

パパさん、いつも丁寧な記事のアップを本当にお疲れ様です。
パパさんのブログ記事をまとめて、本にしたら・・
すごく売れそうな気が・・♪

題名は「RKPP(さん)による、自作パソコン光りもの改造講座!
with その他いろいろ☆」

・・ネーミングセンスなしですね。><;
光るイモリが表紙になっちゃったりして☆中身が自作パソコンで、あれ!?みたいな。(^^;!

rennonさん、こんばんは。はじめまして♪
ホームページを拝見させて頂きました。立派なサイトで驚きました。

パパさんのブログには、立派なブログを展開されている方々が
沢山いらして、ブログをされていない方もとっても良い人たちばかりで、
いつもすごくいい雰囲気です。色々皆さんのコメントを拝見して、いつも楽しいです☆

どうぞ、これからもパパさんのブログを応援してください☆
私もrennonさんのHPを参考にさせて頂きます。(^^)♪
  [URL] [Edit]
>rennon さん

先ほどリンク作成いたしました。
画像を勝手に拝借してしまいましたが...問題があれば言ってくださいね。



>ねこさん

いやいや…売れないと思いますよ~(笑)
記事が丁寧なのは、むしろ自分があまり詳しくないからです(爆)
「わかりやすい」というありがたいお言葉も頂くのですが、基本的に自分が調べたりしていく中で、つまづいたり、苦労したところを特に注意して書いていますので。
…後になって自分が自分の記事見て理解できないなんてことにならないようにしているのであります。
(`・ω・´)キリッ!!(爆)



  [URL] [Edit]
2011.12.13 Tue 08:06  |  エンゲル #-
すげー役に立ちました!ありがとうございます!
  [URL] [Edit]
2011.12.13 Tue 16:57  |  りくんちゅ。パパ #-
>エンゲルさん

お役に立ててなによりです☆人´∀`).☆.。.:*
わざわざお礼のコメント、ありがとうございます♪

  [URL] [Edit]
2013.04.07 Sun 19:52  |  くにぽん #3VMsGyWQ
はじめまして。
WordPress版のjQuery Colorboxを導入したとき同じ悩みを感じたので、
こちらで丁寧にわかりやすく解説されてて本当に助かりました。
ありがとうございました。
  [URL] [Edit]
くにぽんさん
お役にたてて何よりです☆
わざわざお礼のコメント、ありがとうございました☆人´∀`).☆.。.:*
  [URL] [Edit]









(編集・削除用)


管理者にだけ表示を許可
Trackback
http://rikuntyudady.blog101.fc2.com/tb.php/497-ef9e5d61
時々画像を使ってるので、やっぱり表示にも気を遣いたい。 ということでプラグイン追加です。 あらかじめ結論を言ってしまいますが、結局この記事書いたあとHighslide for WordPress *reloaded*に出戻って、さらに SEO Friendly Images も外してしまいました。一応参考までに、jQuery Colorbox と SEO Friendly Images のメ... 2013.10.15 15:37
時々画像を使ってるので、やっぱり表示にも気を遣いたい。 ということでプラグイン追加です。 あらかじめ結論を言ってしまいますが、結局この記事書いたあとHighslide for WordPress *reloaded*に出戻って、さらに SEO Friendly Images も外してしまいました。一応参考までに、jQuery Colorbox と SEO Friendly Images のメ... 2013.12.04 19:47
時々画像を使ってるので、やっぱり表示にも気を遣いたい。 ということでプラグイン追加です。 あらかじめ結論を言ってしまいますが、結局この記事書いたあとHighslide for WordPress *reloaded*に出戻って、さらに SEO Friendly Images も外してしまいました。一応参考までに、jQuery Colorbox と SEO Friendly Images のメ... 2013.12.15 22:49
時々画像を使ってるので、やっぱり表示にも気を遣いたい。 ということでプラグイン追加です。 あらかじめ結論を言ってしまいますが、結局この記事書いたあとHighslide for WordPress *reloaded*に出戻って、さらに SEO Friendly Images も外してしまいました。一応参考までに、jQuery Colorbox と SEO Friendly Images のメ... 2013.12.26 22:12
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

Web page translation
THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示