WEBサイト作成時に発生するエラーやトラブル対応の備忘録を中心に、いろいろと書いております。


WordPressのGutenbergのブロックのclass集めました。(徐々に補足するかも)

誰得でもないけど、私には得なCSSメモ。WordPressのグーテンベルグのブロックの一番外側のクラス集めて、一気にスタイルシートかけたいときに利用します。

@media (min-width: 576px){
	.wp-block-image, .wp-block-quote, .wp-block-gallery, .wp-block-cover, .wp-block-file, .wp-block-code, .wp-block-preformatted, .wp-block-table, .wp-block-pullquote, .wp-block-verse, .wp-block-columns, .wp-block-button, .wp-block-media-text, .wp-block-separator, .wp-block-embed {
	    max-width: 540px;
	}
}
@media (min-width: 768px){
	.wp-block-image, .wp-block-quote, .wp-block-gallery, .wp-block-cover, .wp-block-file, .wp-block-code, .wp-block-preformatted, .wp-block-table, .wp-block-pullquote, .wp-block-verse, .wp-block-columns, .wp-block-button, .wp-block-media-text, .wp-block-separator, .wp-block-embed {
	    max-width: 720px;
	}
}
@media (min-width: 992px){
	.wp-block-image, .wp-block-quote, .wp-block-gallery, .wp-block-cover, .wp-block-file, .wp-block-code, .wp-block-preformatted, .wp-block-table, .wp-block-pullquote, .wp-block-verse, .wp-block-columns, .wp-block-button, .wp-block-media-text, .wp-block-separator, .wp-block-embed {
	    max-width: 960px;
	}
}
@media (min-width: 1200px){
	.wp-block-image, .wp-block-quote, .wp-block-gallery, .wp-block-cover, .wp-block-file, .wp-block-code, .wp-block-preformatted, .wp-block-table, .wp-block-pullquote, .wp-block-verse, .wp-block-columns, .wp-block-button, .wp-block-media-text, .wp-block-separator, .wp-block-embed {
	    max-width: 1140px;
	}
}
.wp-block-image, .wp-block-quote, .wp-block-gallery, .wp-block-cover, .wp-block-file, .wp-block-code, .wp-block-preformatted, .wp-block-table, .wp-block-pullquote, .wp-block-verse, .wp-block-columns, .wp-block-button, .wp-block-media-text, .wp-block-separator, .wp-block-embed{
	width: 100%;
    padding : 15px;
    margin-right: auto !important;
    margin-left: auto !important;
}
.wp-block-image, .wp-block-quote, .wp-block-gallery, .wp-block-cover, .wp-block-file, .wp-block-code, .wp-block-preformatted, .wp-block-table, .wp-block-pullquote, .wp-block-verse, .wp-block-columns, .wp-block-button, .wp-block-media-text, .wp-block-separator, .wp-block-embed

下記ページに大変お世話になりました。

https://e-joint.jp/1091/

コメントを残す

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

CAPTCHA


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