MENU

【JIN:Rカスタマイズ】画像や埋め込みの各要素を中央揃えにするCSS記述方法

今回の記事もブログの簡単なカスタマイズです。

[point_maker type=”simple_icon” base_color=”pearl_gray” title_icon=”info-circle-solid” title_color_background=”true” title_color_border=”true” content_type=”text” content_color_background=”false” content_color_border=”true” block_editor=”true”]

ブログカスタマイズについては十分に注意し、自己責任で行なってくださいね。

[/point_maker]

WordPressテーマJIN:Rで、画像、ツイッター埋め込み、インスタ埋め込み、YouTube埋め込みなど各要素を記事の中央揃えにしたい場合のCSSの記述方法です。

当サイトで採用しているものをご紹介します。用途に合わせて微調整はお任せします。

/*各中央揃え*/

.wp-block-image img {
  max-width: 70%!important;
  display: block;
  margin: auto;
  padding-bottom: 20px;
}

.wp-block-image figcaption {
  text-align: center;
  font-size: 1em;
}

.video-container, .instagram-container, .facebook-container, .instagram-media {
  margin: 30px auto !important;
}

.twitter-tweet {
  margin-left: auto;
  margin-right: auto;
}

iframe {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.wp-block-quote {
  border-left: 3px solid #ce374d;
}

以上を追加CSSに記載すれば、各要素が中央揃えになります。

以上、簡単なJIN:RのCSSカスタマイズでした。

よかったらシェアしてね!
  • URLをコピーしました!
目次