楽天モーションウィジェットをセンタリングする方法

楽天モーションウィジェットをセンタリングする方法

2019/1/10    ume

---

タイトルまんまですけど、中央寄せするのにかなり手こずったので、メモしておきます。

ググっても全然ヒットしないし…。モーションウィジェットが左寄せなのを気にしているのは、世界に私一人なのか、はたまた、中央寄せは一般常識レベルで誰も記事にしないのか。

※タグは「blogger」になってますが、HTMLとCSSをいじれるブログサービスなら応用できるはず。

BEFORE

分かりやすいよう、上下要素の枠を入れてます。

楽天モーションウィジェットって、こんなヤツです。これはスマホのキャプチャ。左に寄ってますね。

中央寄せの方法

モーションウィジェット作成ページより

スマホ用には「300×160」がオススメです。

ブログに貼り付けたモーションウィジェットのソースをdivで囲み、divに適当なclass名をつけておきます。

HTML

<div class="rakutenmw">
モーションウィジェットのソース
</div>

CSSでdivの幅をウィジェットの幅に合わせます。
「300×160」なら「width:300px;」

CSSで「margin-left」と「margin-right」を「auto」に指定。

CSS

.rakutenmw{
width:300px;
margin-left:auto;
margin-right:auto;
}

以上です。

AFTER

中央寄せになりました！

たったこれだけのことに何時間費やしたことか…。

解決してスッキリしました^^

---

ポチっとよろしく♪