bxsliderの画像を中央揃え出来る簡単な方法

公開日: : 最終更新日:2016/08/09 副業で稼ぐ仕組みの作り方

bxsliderを導入したものの画像が左側に寄ってcssで戻せない・・・

はじめに

レスポンシブデザインなどにbxsliderを導入したものの、画像が左寄せで表示されてしまい、cssをいくらいじってもなかなか中央揃えにならなくて困っていた時に見つけたやり方です。

注意事項

cssの書き方によっては他に影響してしまう可能性があるのでテスト環境で試して下さい。

作ってみた

bxsliderを導入する為に一度作ってみました。

bx2

bxsliderのテスト

結構簡単に導入出来るなぁって喜んでいたんですが、ブラウザの横幅を広げると・・・

あれ?画像が左寄せになってる

bx3

marginのautoを使ったり、text-align:centerを使っても真ん中にならない。
それでちょっとgoogle先生に聞いてみたら結構こういった現象が起きている人って多いみたいですね。

bxslider 中央揃えで検索した際の関連キーワード
bx4

中央って言葉や真ん中って言葉が多いですね笑
そこでめちゃくちゃ簡単な方法でbxsliderの画像を中央揃えにする方法をご紹介いさせて頂きます。

cssに追加しよう

実はcssにたった2行追加するだけで画像を真ん中揃えにする事が出来ます。

<style>
.bxslider img {
	margin:0 auto;
	display:block;
	}
</style>

これを追加するだけ画像が真ん中に表示されるようになりました。

bx5

bxsliderの画像を真ん中にしたテスト

詳しくはテストのソースを見てください。

どうですか?めちゃくちゃ簡単に画像を真ん中に表示させる事が出来ました。

以上でbxsliderの画像を中央揃え出来る簡単な方法の紹介を終了致します。

さいごに

簡単だけど融通が利かない

bxsliderは初心者でも簡単にスライドショーを導入したい人やちょっとしたコードを追加するだけで色々な動きを演出する事が出来ますが、ぶっちゃけcssの知識があまりない人は「もうちょっとこうしたい」と言った融通が利かない一面もありました。

例えば、今回のような中央揃えのパターンもそうですし、また他の装飾関係に関してもちょっと融通が利かないなぁって印象なので、もし使う場合はそういったデザイン部分は二の次で考えないといけませんね。

ただ、副業でホームページやブログを利用する方であればそこまでデザインを気にされないと思いますので簡単に導入出来そうですね。

広告

関連記事

グーグルアドセンスで広告収入を得よう!

グーグルアドセンスとは、ブログやホームページに広告を張る事で広告収入を得る方法です。今回は申込み方法

記事を読む

contact form 7を全ページに表示させ記事と連携させる方法

コンタクトフォーム7を使って記事や固定ページと連携させる方法をご紹介いたします。 はじめに ショ

記事を読む

ECCUBE2.4のインストール時にエラーが出た場合

プラグイン側が2.4のサービスの提供を終了してきていますね。 はじめに そろそろECCUBEのバ

記事を読む

カスタムフィールドを使った()を使う計算WordPress

金額と時間から時給を割り出す計算が結構簡単だったのでご紹介させて頂きます。 はじめに 金

記事を読む

カスタムフィールドをor条件で表示させる

AもしくはBの条件に当てはまる場合に表示させると言う分岐?のやり方がわかったのでご紹介いたします。

記事を読む

Gmailとサクラのメールの連携する方法

Gmailとさくらサーバのメールを連携させる方法のご紹介です。 はじめに 普段からGma

記事を読む

FC2ショッピングカートの販売する為の設定

FC2ショッピングカートに登録し、ネットショッピング開設するまでの流れをご紹介いたします。 は

記事を読む

ワードプレスのシンプルな営業日カレンダーBiz Calendar

店舗経営しているなら見ている人の為に一目でわかる営業日カレンダーって欲しいですよね。 はじめに

記事を読む

プラグインのインストール方法【ワードプレス】

ワードプレスは必要時に応じてプラグインをインストールする事でさまざまな機能を追加する事が可能です。今

記事を読む

2017年最新版 メルカリで受取評価してくれない時の対策

メルカリを利用していると変なお客さんにあたる場合があります はじめに メルカリでは、受取人が「受

記事を読む

広告

Message

広告

現在の総記事数: 297件

【無料公開】メルカリで月10万以上稼いだテクニック

メルカリに出品しているけど、なかなか売れない人の参考になれば嬉しいです

メルカリで絶対にあかんバグが起きました

メルカリで絶対にやってはいけないバグが見つかりました。運営さん!早く対

ロボットが資産運用 WealthNaviの申込み方法

最近流行りのロボットに任せる資産運用でWealthNaviを試してみま

windows10で画面に[あ]や[A]と大きく出るのを消す方法

windows10で画面にや[A]と大きく出るのを消す方法

ロボットが資産運用 THEO[テオ]の申込み方法

自分自身で資産運用をするときって何を選べば良いかわかりませんよね。そん

→もっと見る


  • ここでは副業での稼ぎ方や、誰でも簡単に稼げる副業のジャンルなどを紹介しております。 今の所、平均して月に15,000円ほど副収入があります。
    • エステコスメ エステ化粧品やエステコスメの通販サイトです。一般の方でもエステサロンで使用しているコスメを激安価格で購入出来ます。
    • エステ用品 エステ用品のMOCOエステです。新規開業を考えているエステサロン様向けに卸価格でご提供させて頂きます。
    • サロン集客 サロン集客に悩んでいる人向けに完全無料で集客方法を公開しております。インターネットを使う事で0円でサロン集客する方法もお教えいたします。
    • ヒートマット 遠赤外線ヒートマットシリーズは入ると滝に打たれたような発汗を体験できます。サロン様から一般の方までご利用いただけます
    • フェイシャルスチーマー 業務用だけでなく、一般の方も使用出来るフェイシャルスチーマーを詳しく説明しているホームページです。
    • 美容室のホームページ制作 美容室やエステサロン、ネイルのホームページ制作です。3万円台から制作も出来るので予算のないサロン様にも対応しております。
PAGE TOP ↑