スマホ横並びOKブロックエディタで吹き出しプラグインなしとカスタマイズ忘備録

WordPressのブロックエディタ（グーテンベルグ）で吹き出し作るカスタマイズ、スマホ表示で躓いて解決したので自分用の忘備録です

手順1、ブロックエディタで「メディアと文章」を選んで、アイコンと文字を打つ

ここ躓いたところ手順2、メディア文章ブロックを選択後、歯車マーク＞メディアと文章の設定＞「モバイルでは縦に並べる」のチェックを外す

手順3、歯車内「高度な設定」＞追加CSSクラスにballoon-4536を記入

手順4、シェフさんのこちらのCSSをコピペ＞カスタムCSSに追記させてもらいます

引用元≫Gutenberg（WordPress新エディター）で吹き出しを使う方法

/*—吹き出し—*/
.wp-block-media-text.balloon-4536 {
grid-template-columns: 100px auto;
margin-bottom: 1.5em;
}
.wp-block-media-text.has-media-on-the-right.balloon-4536 {
grid-template-columns: auto 100px;
}
.balloon-4536.wp-block-media-text {
-webkit-box-align: initial;
-ms-flex-align: initial;
align-items: initial;
}
.balloon-4536 figure {
-ms-flex-item-align: start;
align-self: flex-start;
vertical-align: top;
}
.balloon-4536 figure img {
border-radius: 50%;
border: 1px solid #ddd;
}
.balloon-4536 .wp-block-media-text__content {
-ms-flex-item-align: end;
align-self: flex-end;
border: 1px solid #aaa;
padding: 4%;
position: relative;
}
.balloon-4536 .wp-block-media-text__content p:last-child {
margin-bottom: 0;
}
.balloon-4536 .wp-block-media-text__content::before,
.balloon-4536 .wp-block-media-text__content::after {
position: absolute;
content: ”;
border: 10px solid transparent;
top: 25px;
}
.balloon-4536 .wp-block-media-text__content {
margin-left: 20px;
}
.balloon-4536 .wp-block-media-text__content::before {
border-right: 10px solid #aaa;
left: -20px;
}
.balloon-4536 .wp-block-media-text__content::after {
border-right: 10px solid #fff;
left: -19px;
}
.balloon-4536.has-media-on-the-right .wp-block-media-text__content {
margin-right: 20px;
margin-left: 0;
}
.balloon-4536.has-media-on-the-right .wp-block-media-text__content::before {
border-left: 10px solid #aaa;
border-right: none;
right: -20px;
left: 100%;
}
.balloon-4536.has-media-on-the-right .wp-block-media-text__content::after {
border-left: 10px solid #fff;
border-right: none;
right: -19px;
left: calc(100% – 1px);
}
/*—考え事風—*/
.balloon-4536.think .wp-block-media-text__content {
border-radius: 30px;
-ms-flex-item-align: start;
align-self: flex-start;
}
.balloon-4536.think .wp-block-media-text__content::before,
.balloon-4536.think.has-media-on-the-right .wp-block-media-text__content::before {
border: 1px solid #aaa;
border-radius: 50%;
width: 8px;
height: 8px;
top: 15px;
}
.balloon-4536.think .wp-block-media-text__content::after,
.balloon-4536.think.has-media-on-the-right .wp-block-media-text__content::after {
border: 1px solid #aaa;
border-radius: 50%;
width: 4px;
height: 4px;
top: 20px;
}
.balloon-4536.think .wp-block-media-text__content::before {
left: -12px;
}
.balloon-4536.think .wp-block-media-text__content::after {
left: -19px;
}
.balloon-4536.think.has-media-on-the-right .wp-block-media-text__content::before {
right: -12px;
left: initial;
}
.balloon-4536.think.has-media-on-the-right .wp-block-media-text__content::after {
right: -19px;
left: initial;
}
/*—LINE風にする—*/
.balloon-4536.line .wp-block-media-text__content {
border-radius: 20px;
background-color: #00da00;
border-color: transparent !important;
}
.balloon-4536.line .wp-block-media-text__content::before {
border-right-color: transparent;
}
.balloon-4536.line .wp-block-media-text__content::after {
border-right-color: #00da00;
}
.balloon-4536.line.has-media-on-the-right .wp-block-media-text__content::before {
border-left-color: transparent;
}
.balloon-4536.line.has-media-on-the-right .wp-block-media-text__content::after {
border-left-color: #00da00;
}
.balloon-4536.think.line .wp-block-media-text__content::before,.balloon-4536.think.line .wp-block-media-text__content::after {
background-color: #00da00;
border-color: transparent !important;
}

表を横にスクロールさせる

参考WordPressの表(テーブル)がスマホで見た時に横にはみ出る時の対処法

/*テーブルの横スクロールのためのCSSはここから*/
table{
width:100%;
}
.scroll{
overflow: auto;
white-space:nowrap;
}
.scroll::-webkit-scrollbar{
height: 15px;
}
.scroll::-webkit-scrollbar-track{
background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb{
background: #bbb;
}
/*テーブルの横スクロールのためのCSSはここまで*/