Q&A
現在のソースコードをご提示願います。
お世話になります。
flexslider2のスライダーの下にある黒丸ボタンの位置を中央ではなく
右寄せにしたいのですが、うまくいきません。
flexslider.cssファイル内の.flex-control-nav では
text-align: center;となっていたので
text-align: right;と書き換えると、ボタンは右に寄るのですが、
下の画像のような番号が出現して消せない状態です。
text-align: left;やtext-align: center;であれば
番号は出現せずうまく寄ってくれます。
どなたか、黒丸を右に寄せる方法をご存知のかたがいらっしゃいましたら、
お教え頂けますと助かります。
※追記部分※
↓こちらのサイトからダウンロードしました。
FlesSlidew2
http://flexslider.woothemes.com/
<!--HTMLソースコード --> <!DOCTYPE HTML> <html lang="ja"> <head> <!--省略--> <!-- css --> <link rel="stylesheet" type="text/css" href="css/flexslider.css" /> <link rel="stylesheet" media="all" href="css/style.css" /> <!-- js --> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script src="js/jquery.flexslider.js"></script> <script> $(function(){ //class="flexslider"をスライダーにする $('.flexslider').flexslider(); }); </script> </head> <body> <!--省略--> <div class=" flexslider"> <ul class="slides"> <li><img src="img/main_image_1.jpg" class="mainimage" alt="メイン画像1"></li> <li><img src="img/main_image_2.jpg" class="mainimage" alt="メイン画像2"></li> <li><img src="img/main_image_3.jpg" class="mainimage" alt="メイン画像3"></li> <li><img src="img/main_image_4.jpg" class="mainimage" alt="メイン画像4"></li> <li><img src="img/main_image_5.jpg" class="mainimage" alt="メイン画像5"></li> <li><img src="img/main_image_6.jpg" class="mainimage" alt="メイン画像6"></li> <li><img src="img/main_image_7.jpg" class="mainimage" alt="メイン画像7"></li> </ul> </div> <!--省略--> <!-- /HTMLソースコードここまで -->
<!-- css/flexslider.cssファイル内196行目 --> .flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center;→こちらをtext-align:right;に変更しました。 } <!-- /css/flexslider.css -->
jsファイルは特に触っておりませんが、
このような感じで分かりますでしょうか？
早速のご返信ありがとうございます。.flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: right; }です。よろしくお願いいたします。
プラグイン／ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）
ソースコードは質問本文に追記してください。またソースコードはcssだけではなくjs、htmlと表示するために関連するものすべてが対象です（どこに上手くいかない原因があるかわかりません）
ありがとうございます。URLとソースコードを追記しましたが、このような感じで分かりますでしょうか？使い勝手がよく分からず、伝わりづらく申し訳ございません。
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
kei344様 >> 見づらくて失礼いたしました。HTMLとCSSそれぞれを<code>タグで囲んでみました。教えて頂いてありがとうございます。
mts10806様もお忙しいところ、コメントありがとうございました。
回答1件
0
ベストアンサー
CSS
1/* これを追加 */ 2.flex-control-nav li { 3 text-align: center; 4}
【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/
【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2
投稿2017/10/07 01:44
総合スコア69625
あなたの回答
tips
プレビュー
