デザイン

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;
}

参考サイト

-デザイン
-,

関連記事

EC-CUBE(新着情報で苦闘)

こちらの記事は1.x系です。2.x系はこちらをご覧ください。 またEC-CUBEネタです。 新着情報 …

カッコいいね

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

また朝だ。

こないだ、Mac IEで表示が崩れるとか、いろいろ書きましたけど。 実は先日作ったサイト、XHTML …

reflection.js

ヘッダ画像(H1タグで指定した部分)を背景から普通にIMGタグに変えました。 今までrotate.p …

スシ!

カナダの寿司屋(というか日本食か)のサイト。 Akita カナダで寿司屋と言えば、その昔あった『ライ …

カテゴリー

アーカイブ

サイト内検索