デザイン

Meteor Slidesのボタンをセンタリングする

投稿日:2013年5月20日

WordPressプラグイン「Meteor Slides」を導入してスライドショーにしてみたわけですが、オプションで表示されるナビゲーションボタンがデフォルトだと左寄せになっていたので、これをセンタリング。

まずはプラグイン編集からmeteor-slides.cssを編集します。

デフォルトでは以下のようになっていますが

.meteor-slides .meteor-buttons {
    bottom: -15px;
    height: 9px;
    left: 0;
    margin: 0;
    padding: 6px 0 0;
    position: absolute;
    width: 100%;
    z-index: 999;
}
header#branding .meteor-buttons {
	left: 5px; /* A little nudge for Twenty Eleven */
}
.meteor-buttons a {
	background: url('../images/buttons.png') no-repeat bottom left;
	display: block;
	float: left;
	width: 9px;
	height: 9px;
	margin: 0 3px 0 0 !important;
	outline: none;
	text-indent: -9999px;
}

これを以下のように書き換えます。

.meteor-slides .meteor-buttons {
    bottom: -15px;
    height: 9px;
    margin: 0;
    padding: 6px 0 0;
    position: absolute;
    width: 100%;
    z-index: 999;
    text-align:center;
}
.meteor-buttons a {
    background: url('../images/buttons.png') no-repeat bottom left;
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 0 2px;
    outline: none;
    text-indent: -9999px;
}

参考サイト

-デザイン
-,


comment

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

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

関連記事

EC-CUBE

EC-CUBE(オープンソースECサイト構築システム)をXREA(CORESERVER)にインストー …

EC-CUBE新着商品

最近、EC-CUBE+新着商品というキーワードでのアクセスが多いので、ちょっと自分の覚え書の為にも残 …

CSS Hack(1)

WindowsIE5.0と5.5にそれぞれ違う外部スタイルシートを読み込ませる方法。 IE5.0 @ …

カッコいいね

今使ってる携帯はドコモなんだけど、こうゆうサイト見るとauが欲しくなっちゃうんだよねぇ。。 てゆうか …

Nucleus

今日はNucleusをインストールしてみました。 最初、インストール画面で真っ白になったけどhtac …

カテゴリー

アーカイブ

サイト内検索