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はここまで*/
