2019/01/10

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



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

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

※タグは「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


中央寄せになりました!

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

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



ポチっとよろしく♪

応援ありがとうございます♪

2 件のコメント :

  1. この記事のおかげで、秒速で解決しました。ありがとうございました。200x600でしたが、問題なく表示されました。

    返信削除
    返信
    1. >srkm77さん
      こんにちは(*´꒳`*)/
      お役に立てて光栄です♪

      削除