jsプラグインのレイアウトを変えたいがCSSが。。

質問

http://bxslider.com/examples/thumbnail-pager-1

上記URLのプラグインをＨＰに導入しています。
１個だけどうしてもわからないので教えてください。

小さい画像をクリックしたら大きい画像が、スクリーンに表示されています。
サイトでは３枚の画像があり、その３枚の小さい画像は中央に表示されています。
これを、左にずらす。もしくは右にずらす。ためにはＣＳＳのどのクラスタをさわればよいのでしょうか？

ＣＳＳはhttp://bxslider.com/lib/jquery.bxslider.cssだと思います。どこかの値を変更すれば
場所がかわってくれると思うのですが・・・。わかりません

教えてください。お願いします。

回答No.2

LancerVII · ベストアンサー

こんにちは。

Firebugとか利用すると一発でわかりますよ。

要素付近を右クリックして「Firebugで要素を調査」を選択するとなんのスタイルが適用されているかすぐ表示されます。

ほかのWeb開発ツールでも良いですが、Webの仕事をしているなら覚えておいたほうが良いです。

で、本題ですがjquery.bxslider.cssではなく他に読み込まれているstyle.cssにて定義されている

.example-item #bx-pager {
margin-top: -30px;
text-align: center;
}
のtext-alignを好きなものに変更すれば良いです。
例えばrightにすれば右によります。

ほかの探し方としては<div id="bx-pager"></div>の要素ですのでCSS内から#bx-pagerを検索すると良いです。

お礼

ご回答ありがとうございます。
Firebug...素晴らしすぎます。とてもいいものを教えていただきありがとうございました。
これを使えば、かなり時間短縮してWebページ作れそうな気がします＾＾

すばらしすぎて感動してしまいました。普段ベストアンサーにコメントしない
ネチケットがなってない私ですが・・・さすがにコメントさせていただきました。
本当に本当にありがとうございます！

回答No.1

chocotarosu

自分の環境で試せていないのですが

/* PAGER */

.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}

のtext-align: center;をleftかrightに書き換えてみてください。
そこでおそらく行けると思います。
中央寄せされている場所を探す場合はcenterもしくは
margin:auto、margin:0 autoで検索をかけてみるとすぐに見つかるかもしれません。

お礼

ありがとうございます。

ご指摘の記述が影響してるかどうか確認するため、この記述を全部削除してＣＳＳ更新してアップロードしてみましたが、不思議なことに何の影響も受けていません・・・。クッキーも削除して、ブラウザも再起動したのですが（汗）これを僕の作ってるwebサイトに合うような配置にできれば文句ないのですが。。。
仕事での作業なので困っております（泣