ameeeee
9/26/2019 - 8:18 AM

WP:ビジュアルエディタの表示を実際に公開されるページ表示に近づける方法

  1. editor-style.cssをテーマ内に作成

  2. functions.phpでeditor-style.cssを読みこませる

function add_editor_style_cb() {
  add_editor_style();
}
add_action('admin_init', 'add_editor_style_cb');
@charset "UTF-8";

.single .dblog-specifics__body {
	ul {
		list-style-type: disc;
	}
	ul, ol {
		display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
	}
	h1 {
		font-size: 2.75rem;
		font-weight: bold;
	}
	h2 {
		font-size: 2.5rem;
		font-weight: bold;
	}
	h3 {
		font-size: 2.25rem;
		font-weight: bold;
	}
	h4 {
		font-size: 2rem;
		font-weight: bold;
	}
	h5 {
		font-size: 1.75rem;
		font-weight: bold;
	}
	h6 {
		font-size: 1.5rem;
		font-weight: bold;
	}
	hr {
		display: block;
		height: 1px;
		border: 0;
		border-top: 1px solid rgba(1, 41, 63, 0.5);
		margin: 1em 0;
		padding: 0;
	}
	table {
		margin-top: 10px;
			width: 360px;
			border: 1px rgba(1, 41, 63, 0.5) solid;
			border-collapse: collapse;
			border-spacing: 0;
			margin-bottom: 5px;
	}
	table th {
			width: 42px;
			padding: 7px 2px;
			border: rgba(1, 41, 63, 0.5) solid;
			border-width: 0 0 1px 1px;
	/*   background: #F5F5F5;*/
			line-height: 120%;
			text-align: center;
	}
	table td {
			padding: 10px 2px;
			border: 1px rgba(1, 41, 63, 0.5) solid;
			border-width: 0 0 1px 1px;
			text-align: center;
	/*   background: #fff;*/
	}
	a:link, a:visited {
		text-decoration: underline;
		color: #168893;
	}
	a:hover {
		background: rgba(22, 136, 147, 0.5);
		transition: .2s;
		text-decoration:none;
	}
	.wp-caption-text {
		font-size: 14px;
		font-weight: bold;
		color: rgba(1, 41, 63, 0.7);
	}
	.aligncenter {
		margin: 0 auto;
	}
	.alignright {
		margin: 0 0 0 auto;
	}
}
@charset "UTF-8";
body {
	color: #01293f;
	font-family: 'Roboto', "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", Meiryo, sans-serif;
	-webkit-font-feature-settings: 'palt' 1;
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	letter-spacing: 0.04em;
  line-height: 1.4;
	font-size: 16px;
}

*::selection {
	background: rgba(22, 136, 147, 0.5);
}
a:link, a:visited {
	text-decoration: underline;
	color: #168893;
}
a:hover {
	background: rgba(22, 136, 147, 0.5);
	transition: .2s;
	text-decoration:none;
}
h1 {
	font-size: 2.75rem;
	font-weight: bold;
}
h2 {
	font-size: 2.5rem;
	font-weight: bold;
}
h3 {
	font-size: 2.25rem;
	font-weight: bold;
}
h4 {
	font-size: 2rem;
	font-weight: bold;
}
h5 {
	font-size: 1.75rem;
	font-weight: bold;
}
h6 {
	font-size: 1.5rem;
	font-weight: bold;
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid rgba(1, 41, 63, 0.5);
	margin: 1em 0;
	padding: 0;
}

table {
	margin-top: 10px;
    width: 360px;
    border: 1px #949494 solid;
    border-collapse: collapse;
    border-spacing: 0;
		margin-bottom: 5px;
}
table th {
		width: 42px;
    padding: 7px 2px;
    border: rgba(1, 41, 63, 0.5) solid;
    border-width: 0 0 1px 1px;
 /*   background: #F5F5F5;*/
    line-height: 120%;
    text-align: center;
}
table td {
    padding: 10px 2px;
    border: 1px rgba(1, 41, 63, 0.5) solid;
    border-width: 0 0 1px 1px;
    text-align: center;
 /*   background: #fff;*/
}
a:link, a:visited {
	text-decoration: underline;
	color: #168893;
}
.wp-caption-text {
	font-size: 14px;
	font-weight: bold;
	color: rgba(1, 41, 63, 0.7);
}
.mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption {
	border: 1px rgba(1, 41, 63, 0.5) solid;
}