/************************************************************************************** WordPress／Gutenberg用カスタムCSS（ブロック・エディタの内容） （ブログで を使ってインポートした時など） ***************************************************************************************/ /*基本設定･･･････････････････････････････････････････････････*/ #wpContents{ } #wpContents *:not(img){ height:auto; width:100%; max-width:100%; /*max-width:590px; //レイアウト崩れ時に対応できる場合も*/ /*color:black; //指定するとプラグイン「TinyMCE Advanced」で文字色が選択できなくなる*/ /*font-size:1.6rem; //指定するとプラグイン「Advanced Editor Tools」のボタン・プルクオート・フォントサイズなどが機能しなくなる。*/ line-height:normal;/*normal, 1.88em*/ letter-spacing:normal;/*normal, 0.048em*/ text-align:start; text-align-last:auto; text-justify:auto !important; font-style:normal; word-wrap:break-word; } #wpContents img{ height:auto !important; max-width:100%; } #wpContents figcaption{/*各エリアのキャプション*/ text-align:center; text-align-last:center; } #wpContents>h1, #wpContents>h1 *{font-size:3.1rem;} #wpContents>h2, #wpContents>h2 *{font-size:2.6rem;} #wpContents>h3, #wpContents>h3 *{font-size:2.2rem;} #wpContents>h4, #wpContents>h4 *{font-size:1.9rem;} #wpContents>h5, #wpContents>h5 *{font-size:1.6rem;} #wpContents>h6, #wpContents>h6 *{font-size:1.6rem;} #wpContents p, #wpContents p *{font-size:1.6rem;} #wpContents strong, #wpContents strong *{font-size:1.6rem;} #wpContents>*{ margin-top:5.0rem; } #wpContents>*:first-child{/*先頭コンテンツ*/ margin-top:0; } /*初期化*/ #wpContents a:not(.wp-block-button__link), #wpContents a:not(.wp-block-button__link) *{/*ボタンを除く*/ color:blue; } #wpContents em, #wpContents em *{ font-style:italic; } #wpContents table{ border-collapse:collapse; } #wpContents table tr{ width:auto; } #wpContents table tr th{ width:auto; } #wpContents table tr td{ border:solid 1px; width:auto; } #wpContents .wp-block-calendar *{/*カレンダー*/ text-align:center; text-align-last:center; } #wpContents ul li{ width:calc(100% - 1.5em); margin-left:1.5em; list-style-type:disc; } #wpContents ol li{ width:calc(100% - 1.5em); margin-left:1.5em; list-style-type:decimal; box-sizing:border-box; } #wpContents figure ul, #wpContents figure ul li, #wpContents figure ul li img{/*画像*/ margin:0; padding:0; } #wpContents .has-background{/*ブロックに背景色を付けた場合のクラス*/ width:calc(100% - 2.8em); max-width:calc(100% - 2.8em); padding:1.0em 1.4em !important; } #wpContents>blockquote.is-style-default,/*引用（デフォルト）*/ #wpContents>blockquote.is-style-large{/*引用（大）*/ width:calc(100% - 20px); max-width:calc(100% - 20px); padding-left:16px; border-left:solid 4px; } #wpContents>blockquote.is-style-large *{/*引用（大）のテキスト*/ font-size:24px; } #wpContents>blockquote.is-style-default>cite,/*引用元のウェブサイトを知らせる*/ #wpContents>blockquote.is-style-large>cite{/*引用元のウェブサイトを知らせる*/ color:gray; } #wpContents figure.wp-block-pullquote{/* ❝プルクォート（デフォルト）❞ */ border-top:solid 4px; border-bottom:solid 4px; } #wpContents figure.wp-block-pullquote *{ text-align:center; text-align-last:center; } #wpContents figure.wp-block-pullquote.is-style-solid-color{/* ❝プルクォート（単色）❞ */ width:100%; max-width:100%; border-top:none !important; border-bottom:none !important; } #wpContents figure.wp-block-pullquote.is-style-solid-color *{ text-align:left; text-align-last:left; } #wpContents .wp-block-button{/*ボタン*/ width:auto; max-width:100%; } #wpContents .wp-block-button>a{ max-width:calc(100% - 2.8rem); padding:0.8em 1.4em; } /*ブロックエディター「Gutenberg」に準拠しない箇所を準拠させる････････*/ #wpContents .alignleft{/*左揃え*/ float:left; text-align:left; text-align-last:left; } #wpContents .alignright{/*右揃え*/ float:right; text-align:right; text-align-last:right; } #wpContents .aligncenter{/*中央揃え*/ clear:both; margin-left:auto; margin-right:auto; text-align:center; text-align-last:center; } #wpContents .has-text-align-left, #wpContents .has-text-align-left>*{/*テキスト左寄せ*/ text-align:left; text-align-last:left; } #wpContents .has-text-align-right, #wpContents .has-text-align-right>*{/*テキスト右寄せ*/ text-align:right; text-align-last:right; } #wpContents .has-text-align-center, #wpContents .has-text-align-center>*{/*テキスト中央寄せ*/ text-align:center; text-align-last:center; } #wpContents>figure.wp-block-table,/*テーブルエリア*/ #wpContents>figure.wp-block-table>table,/*テーブル*/ #wpContents>figure.wp-block-table>figcaption,/*テーブルのキャプション*/ #wpContents>figure.wp-block-image,/*画像エリア*/ #wpContents>figure.wp-block-image>img,/*画像*/ #wpContents>figure.wp-block-image>figcaption,/*画像のキャプション*/ #wpContents>figure.wp-block-video,/*動画エリア*/ #wpContents>figure.wp-block-video>video,/*動画*/ #wpContents>figure.wp-block-video>figcaption,/*動画のキャプション*/ #wpContents>pre.wp-block-code,/*コード*/ #wpContents>pre.wp-block-code>code,/*　< > & などはHTMLエスケープされる　*/ #wpContents>pre.wp-block-preformatted,/*整形済みテキスト*/ #wpContents>pre.wp-block-verse,/*詩*/ #wpContents>figure.wp-block-gallery,/*ギャラリー*/ #wpContents>figure.wp-block-gallery>ul>li>figure>img,/*画像*/ #wpContents>figure.wp-block-gallery>ul>li>figure>a>img,/*画像（リンク先がある場合）*/ #wpContents>figure.wp-block-gallery>ul>li>figure>figcaption,/*画像のキャプション*/ #wpContents>figure.wp-block-gallery>figcaption,/*ギャラリーのキャプション*/ #wpContents>figure.wp-block-audio,/*音声エリア*/ #wpContents>figure.wp-block-audio>audio,/*音声*/ #wpContents>figure.wp-block-audio>figcaption,/*音声のキャプション*/ #wpContents>div.wp-block-cover,/*カバー*/ #wpContents>div.wp-block-cover>div>p,/*テキスト*/ #wpContents>div.wp-block-file,/*ファイル*/ #wpContents>div.wp-block-file>a,/*テキストリンクの場合*/ #wpContents>div.wp-block-file>a.wp-block-file__button,/*ダウンロードボタンの場合*/ #wpContents>div.wp-block-media-text,/*メディアと文書*/ #wpContents>div.wp-block-media-text>figure>img,/*画像*/ #wpContents>div.wp-block-media-text>div>p.has-large-font-size,/*見出し*/ #wpContents>div.wp-block-media-text>div>p,/*本文*/ #wpContents>div.wp-block-buttons,/*ボタン*/ #wpContents>div.wp-block-buttons>div>a,/*テキスト*/ #wpContents>div.wp-block-columns,/*カラム*/ #wpContents>div.wp-block-columns>div,/*カラムの内容*/ #wpContents>div.wp-block-group,/*グループ*/ #wpContents>div.wp-block-group>div,/*段落や見出し画像など好きなブロックを挿入できる*/ #wpContents>ul.wp-block-archives-list,/*アーカイブ（リスト表示）*/ #wpContents>ul.wp-block-archives-list>li>a,/*リスト*/ #wpContents>ul.wp-block-archives-dropdown,/*アーカイブ（ドロップダウン表示）*/ #wpContents>ul.wp-block-archives-dropdown>label,/*ラベル*/ #wpContents>ul.wp-block-archives-dropdown>select,/*リスト一覧*/ #wpContents>ul.wp-block-archives-dropdown>select>option,/*リスト*/ #wpContents>div.wp-block-calendar,/*カレンダー*/ #wpContents>div.wp-block-calendar>table,/*日付*/ #wpContents>div.wp-block-calendar>nav,/*前の月、次の月*/ #wpContents>ul.wp-block-categories-list,/*カテゴリー（リスト表示）*/ #wpContents>ul.wp-block-categories-list>li>a,/*リスト（階層表示なしの場合）*/ #wpContents>ul.wp-block-categories-dropdown,/*カテゴリー（ドロップダウン表示）*/ #wpContents>ul.wp-block-categories-dropdown>select>option,/*リスト（階層表示なしの場合）*/ #wpContents>ol.wp-block-latest-comments,/*最新のコメント*/ #wpContents>ul.wp-block-latest-posts,/*最新の投稿*/ #wpContents>ul.wp-block-rss,/*RSS*/ #wpContents>form.wp-block-search,/*検索エリア*/ #wpContents>form.wp-block-search>label,/*ラベル*/ #wpContents>form.wp-block-search>input,/*入力欄*/ #wpContents>form.wp-block-search>button,/*検索ボタン*/ #wpContents>ul.wp-block-social-links,/*ソーシャルアイコン*/ #wpContents>p.wp-block-tag-cloud,/*タグクラウド*/ #wpContents>p.wp-block-tag-cloud>a>span,/*タグ*/ #wpContents>figure.wp-block-pullquote,/* ❝プルクオート❞ */ #wpContents>figure.wp-block-pullquote>blockquote>p,/*テキスト*/ #wpContents>figure.wp-block-pullquote>blockquote>cite{/*引用元表記*/ height:auto; max-width:100%; } #wpContents span#more-100{}/*続きを読む*/ #wpContents hr.wp-block-separator{}/*区切り*/ #wpContents div.wp-block-spacer{}/*スペーサー*/ /*YouTube*/ #wpContents .wp-embed-aspect-16-9 iframe{ min-height:38.4rem;/*【要調整】コンテンツエリア幅が683pxの場合（683 * 9 / 16）*/ } /*font-sizeをダッシュボードから任意に指定した時*/ #wpContents .has-x-small-font-size, #wpContents .has-x-small-font-size *, #wpContents .has-small-font-size, #wpContents .has-small-font-size *, #wpContents .has-regular-font-size, #wpContents .has-regular-font-size *, #wpContents .has-normal-font-size, #wpContents .has-normal-font-size *, #wpContents .has-medium-font-size, #wpContents .has-medium-font-size *, #wpContents .has-large-font-size, #wpContents .has-large-font-size *, #wpContents .has-x-large-font-size, #wpContents .has-x-large-font-size *, #wpContents .has-huge-font-size, #wpContents .has-huge-font-size *{ /*ユーザーエージェントのstyleをセット*/ color:revert; font-size:revert; font-style:revert; font-weight:revert; } /*･･･････････････････････････････････････････････････････････････････････････ ブロックエディターで「URLの埋め込み」が表示されない不具合への対策（暫定版） 【参考】https://blog.dtn.jp/2021/03/27/wordpress-oembed/ ････････････････････････････････････････････････････････････････････････････*/ blockquote.wp-embedded-content{ /*position:absolute;*/ clip:rect(1px, 1px, 1px, 1px); } iframe.wp-embedded-content{ position:relative !important; pointer-events:none; } /************************************************************************************** メディアクエリ ***************************************************************************************/ /*750px以下*/ @media(max-width:750px){ /*基本設定･･･････････････････････････････････････････････････*/ #wpContents *{ font-size:2.1rem; } #wpContents>h1, #wpContents>h1 *{font-size:3.1rem;}/*3.1rem*/ #wpContents>h2, #wpContents>h2 *{font-size:2.8rem;}/*2.6rem*/ #wpContents>h3, #wpContents>h3 *{font-size:2.5rem;}/*2.2rem*/ #wpContents>h4, #wpContents>h4 *{font-size:2.3rem;}/*1.9rem*/ #wpContents>h5, #wpContents>h5 *{font-size:2.1rem;}/*1.6rem*/ #wpContents>h6, #wpContents>h6 *{font-size:2.1rem;}/*1.6rem*/ #wpContents p, #wpContents p *{font-size:2.1rem;}/*1.6rem*/ #wpContents strong, #wpContents strong *{font-size:2.1rem;}/*1.6rem*/ /*ブロックエディター「Gutenberg」に準拠しない箇所を準拠させる････････*/ #wpContents>figure.wp-block-table,/*テーブルエリア*/ #wpContents>figure.wp-block-table>table,/*テーブル*/ #wpContents>figure.wp-block-table>figcaption,/*テーブルのキャプション*/ #wpContents>figure.wp-block-image,/*画像エリア*/ #wpContents>figure.wp-block-image>img,/*画像*/ #wpContents>figure.wp-block-image>figcaption,/*画像のキャプション*/ #wpContents>figure.wp-block-video,/*動画エリア*/ #wpContents>figure.wp-block-video>video,/*動画*/ #wpContents>figure.wp-block-video>figcaption,/*動画のキャプション*/ #wpContents>pre.wp-block-code,/*コード*/ #wpContents>pre.wp-block-code>code,/*　< > & などはHTMLエスケープされる　*/ #wpContents>pre.wp-block-preformatted,/*整形済みテキスト*/ #wpContents>pre.wp-block-verse,/*詩*/ #wpContents>figure.wp-block-gallery,/*ギャラリー*/ #wpContents>figure.wp-block-gallery>ul>li>figure>img,/*画像*/ #wpContents>figure.wp-block-gallery>ul>li>figure>a>img,/*画像（リンク先がある場合）*/ #wpContents>figure.wp-block-gallery>ul>li>figure>figcaption,/*画像のキャプション*/ #wpContents>figure.wp-block-gallery>figcaption,/*ギャラリーのキャプション*/ #wpContents>figure.wp-block-audio,/*音声エリア*/ #wpContents>figure.wp-block-audio>audio,/*音声*/ #wpContents>figure.wp-block-audio>figcaption,/*音声のキャプション*/ #wpContents>div.wp-block-cover,/*カバー*/ #wpContents>div.wp-block-cover>div>p,/*テキスト*/ #wpContents>div.wp-block-file,/*ファイル*/ #wpContents>div.wp-block-file>a,/*テキストリンクの場合*/ #wpContents>div.wp-block-file>a.wp-block-file__button,/*ダウンロードボタンの場合*/ #wpContents>div.wp-block-media-text,/*メディアと文書*/ #wpContents>div.wp-block-media-text>figure>img,/*画像*/ #wpContents>div.wp-block-media-text>div>p.has-large-font-size,/*見出し*/ #wpContents>div.wp-block-media-text>div>p,/*本文*/ #wpContents>div.wp-block-buttons,/*ボタン*/ #wpContents>div.wp-block-buttons>div>a,/*テキスト*/ #wpContents>div.wp-block-columns,/*カラム*/ #wpContents>div.wp-block-columns>div,/*カラムの内容*/ #wpContents>div.wp-block-group,/*グループ*/ #wpContents>div.wp-block-group>div,/*段落や見出し画像など好きなブロックを挿入できる*/ #wpContents>ul.wp-block-archives-list,/*アーカイブ（リスト表示）*/ #wpContents>ul.wp-block-archives-list>li>a,/*リスト*/ #wpContents>ul.wp-block-archives-dropdown,/*アーカイブ（ドロップダウン表示）*/ #wpContents>ul.wp-block-archives-dropdown>label,/*ラベル*/ #wpContents>ul.wp-block-archives-dropdown>select,/*リスト一覧*/ #wpContents>ul.wp-block-archives-dropdown>select>option,/*リスト*/ #wpContents>div.wp-block-calendar,/*カレンダー*/ #wpContents>div.wp-block-calendar>table,/*日付*/ #wpContents>div.wp-block-calendar>nav,/*前の月、次の月*/ #wpContents>ul.wp-block-categories-list,/*カテゴリー（リスト表示）*/ #wpContents>ul.wp-block-categories-list>li>a,/*リスト（階層表示なしの場合）*/ #wpContents>ul.wp-block-categories-dropdown,/*カテゴリー（ドロップダウン表示）*/ #wpContents>ul.wp-block-categories-dropdown>select>option,/*リスト（階層表示なしの場合）*/ #wpContents>ol.wp-block-latest-comments,/*最新のコメント*/ #wpContents>ul.wp-block-latest-posts,/*最新の投稿*/ #wpContents>ul.wp-block-rss,/*RSS*/ #wpContents>form.wp-block-search,/*検索エリア*/ #wpContents>form.wp-block-search>label,/*ラベル*/ #wpContents>form.wp-block-search>input,/*入力欄*/ #wpContents>form.wp-block-search>button,/*検索ボタン*/ #wpContents>ul.wp-block-social-links,/*ソーシャルアイコン*/ #wpContents>p.wp-block-tag-cloud,/*タグクラウド*/ #wpContents>p.wp-block-tag-cloud>a>span,/*タグ*/ #wpContents>figure.wp-block-pullquote,/* ❝プルクオート❞ */ #wpContents>figure.wp-block-pullquote>blockquote>p,/*テキスト*/ #wpContents>figure.wp-block-pullquote>blockquote>cite{/*引用元表記*/ /*【注意！】 スマホ表示時のコンテンツ幅が450pxの場合は「max-width:450px」、400pxの場合は「max-width:400px」になる。 コンテンツ幅が450pxなのに、ここを「max-width:500px」にすると右側に突き抜ける！*/ max-width:100%; } }