質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

Q&A

解決済

1回答

4422閲覧

flexslider2の黒丸ボタンの位置を変えたい

osarusam

総合スコア18

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

0グッド

1クリップ

投稿2017/10/06 02:55

編集2017/10/07 02:25

お世話になります。

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ファイルは特に触っておりませんが、
このような感じで分かりますでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/10/06 03:06

現在のソースコードをご提示願います。
osarusam

2017/10/06 04:02

早速のご返信ありがとうございます。.flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: right; }です。よろしくお願いいたします。
kei344

2017/10/06 11:10

プラグイン/ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。(URLにはリンクを張ることができます)
m.ts10806

2017/10/06 12:17

ソースコードは質問本文に追記してください。またソースコードはcssだけではなくjs、htmlと表示するために関連するものすべてが対象です(どこに上手くいかない原因があるかわかりません)
osarusam

2017/10/06 23:59

ありがとうございます。URLとソースコードを追記しましたが、このような感じで分かりますでしょうか?使い勝手がよく分からず、伝わりづらく申し訳ございません。
kei344

2017/10/07 01:39

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
osarusam

2017/10/07 02:29

kei344様 >> 見づらくて失礼いたしました。HTMLとCSSそれぞれを<code>タグで囲んでみました。教えて頂いてありがとうございます。
osarusam

2017/10/07 02:31

mts10806様もお忙しいところ、コメントありがとうございました。
guest

回答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

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

osarusam

2017/10/07 02:29

ありがとうございます! 記載して頂いたタグを追記したら、黒丸ボタンに番号が表示されなくなりました。 大変助かりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問