稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

副業で稼ぐ仕組みの作り方

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

投稿日:2015年2月7日 更新日:

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

はじめに

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

注意事項

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

作ってみた

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

bx2

bxsliderのテスト

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

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

bx3

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

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

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

cssに追加しよう

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

1<style>
2.bxslider img {
3    margin:0 auto;
4    display:block;
5    }
6</style>

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

bx5

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

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

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

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

さいごに

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

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

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

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

-副業で稼ぐ仕組みの作り方
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

shopifyでプランの選択をしてみた

shopifyへの申し込みを本格的にしてみました。 関連記事: Gmailの未読一覧を簡単に表示させる方法 無料のお問合せフォームの作り方【FC2】 カスタムフィールドを使って計算 WordPress …

Googleアナリティクスにユーザー(自社)を追加する方法

クライアント様側のGoogleアナリティクスの情報を自分の持っているアカウントからアクセスできるようにする設定方法です。 関連記事: Yahoo!ショッピングの設定方法Step1の詳しい説明 自動相互 …

アクセストレードの登録方法

アクセストレードの登録方法です。 関連記事: インフォトップの登録方法 自動相互リンクの作り方 もしもドロップシッピングの登録方法 無料でECサイトが3分で作れる

QRコードからURLを取得する方法

QRコードはわかるがリンク先のURLとして取得する方法をご紹介いたします。 関連記事: contact form 7を全ページに表示させ記事と連携させる方法 tinymce advancedで絵文字も …

アフィリエイトの審査に落ちた方へ

リンクシェアって審査が厳しいですよね 関連記事: Googleアドセンスから警告がきました Yahoo!メールを複数取得する方法 A8の登録方法について インフォトップの登録方法



S