【WordPress】EditorStlyeの幅の変更方法

タイトルの内容でめっちゃてこずったのでメモ
ではまいります。

子テーマのフォルダを作る

レンタルサーバーをお使いの方は使用しているサービスが提供するFTPでサーバにアクセスできると思います。
私はXServerなので、「エックスサーバーWebFTP」でアクセスし、
自分のドメイン/public_html/wp-content/themes/
に作りたい子テーマのディレクトリを作ります。
こんな感じ。

上記フォルダにfunction.php、style.css、editor-style.cssを作る

上記で作成したchild直下に3つファイルを作成します。

function.php の編集

あまり理解できていないですが、下記のように記述。
前半は子テーマの適用、最後の一行がエディターのスタイル適用。

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles');

function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}

//editor-style.cssを読み込ませるのに必要
add_editor_style();

?>

style.css の編集

ここはお好みでよきにはからってください。
僕の場合はここで最大の幅を1100pxにして、本文を75%指定しました。
ここまでできたら一度Wordprerssの外観->テーマの選択で有効化して確認してみて下さい。

editor-style.css の編集

ここでめっちゃてこずりました。
いろんな方が情報だしてくれてますが、どれもだめで、最終的に思い付きで試したこれでできました。

li{
width: 770px;
}

なんとも簡単な… きちんと理解していない証拠ですね。
liはlistの事で、css内では文章はlistという扱いをされており、liで指定してやる事でスタイルをいじれる、と理解しました。あってるかな?一度基礎から勉強しなきゃだめですね。

そして書いてて気づいたのですが…
web上の情報をみて試行錯誤をする過程で、TinyMCE Advanced というプラグインを入れたのですが、これがアクティブだと<li>オブジェクト(って言い方するの?)じゃなくなるようですね。
Chromeの検証機能で確認すると<p>でした。
ということで、使われているかたはliをpに置換しましょう。

おまけ

変更したのに変更されてないぞ??という時はctr+F5で、キャッシュをクリアしてブラウザを更新すると、正しく設定できていれば反映できるよん。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です