WordPressのデフォルトのビジュアルエディターはフォントや行間隔が
でたらめなので実際の見た目はどうか毎回プレビューなどを見る必要があった
しかし今回ビジュアルエディターをなるべく実際のブログ画面に近づける方法を
習得したので書いておく
まず editor-style.css と言う名前の空ファイルを作成
このファイルをテキストエディタなどで開いて
@import url(“style.css”);
と言う記述をしてからstyle.cssのあるフォルダ
Techismなら /wp-content/themes/techism
のフォルダにアップロード
その後テーマの編集でfunctions.phpを開きどこでもいいので以下のコードを追加
add_editor_style(‘editor-style.css’);
これでstyle.cssの設定がビジュアルエディターに適用されるが
自分の場合はフォント関連の設定しか反映されなかったので
editor-style.css に以下の記述追加
@import url("style.css");
html .mceContentBody {
background-color: white;
max-width:500px ;
}
.mceContentBody p {
margin: 0 5px;
width: 478px;
line-height: 1.6;
}
.mceContentBody a:link, .mceContentBody a:visited {
color: #000DFF !important;
font-style: oblique !important;
font-weight: bolder !important;
text-decoration: underline !important;
}
以上でおおむね実際のブログ画面と同じにできた
注意点としては横幅の指定は記事コンテンツ部分の横幅ではなく
文章部分のpタグ(class)の横幅を入力する
これもFirefoxの要素を調査で確認できるので参考に
ただしこれには不都合があって解像度がある程度高い場合例えば
ウィンドウがフルHDで最大化すると設定した横幅に文章幅が到達すると
自動的に折り返して表示されるようになるので良いのだが
ブラウザの横解像度が低い場合
WordPressの管理画面自体がレスポンシブデザインなので
たとえば自分の場合は横960pxで表示した場合は
勝手に縮小表示されてしまうのでエディターの横幅が狂う
結局自分である程度予想をして改行などを行う必要がある
調べてみたら横960pxならエディタ部は大体461pxまでが限界のようだ
もちろんWordPressの編集画面のファイルを弄って
サイドのツールバー表示を変更すればその限りではないが
高難度な上にリスキーなのでこれぐらいで我慢しとこうｗ
＊以下追記
結局editor-style.cssでstyle.cssを読み込むのは
エディタがバグったりして色々危険なことが分かったので読み込まず
直接指定してやることにした
html .mceContentBody {
font-family: MeiryoKe_PGothic,Meiryo,Osaka,MS PGothic;
font-size: 13px;
line-height: 1.6;
background-color: white;
margin: 0;
max-width:500px;
}
.mceContentBody p {
margin: 5px;
max-width: 455px; /*ブラウザ横幅960pxでのエディタ最大幅が455px*/
}
.mceContentBody a:link, .mceContentBody a:visited {
color: #000DFF;
font-style: oblique;
font-weight: bolder;
text-decoration: underline;
}
その方がシンプルだし安心安全確実だ
コメントを残す