A-key function 大学生が始めるべきネットビジネス起業

大学生のうちに始めるべきネットビジネス・資格などを紹介してます。

wordpressでビジュアルエディタ画面を実際の投稿画面と同じにする方法

      2016/02/23

費用:0円 時間:10分

wordpressというと、編集時のビジュアルエディタ画面と実際に投稿された記事画面が同じように表示されることが便利な点です。

しかし、どういうわけか実際の投稿と編集時の画面の表示が一致しないことがあります。

理由としては、style.cssやfunction.phpやプラグインによる齟齬なのですが、表示を何とか合わせたい!

ということで、ビジュアルエディタ画面と実際に投稿された記事画面を一致できるようにしましょう。

バックアップは絶対必要。

sponsored link

1.function.phpを編集

ダッシュボード>>テーマの編集にて、function.phpの編集を行いましょう。

どこでも構わないので、最後の行にでも以下のコードをコピペしましょう。

 add_editor_style('editor-style.css');

変な場所にコピペしてしまうと完全にバグって使えなくなるので気を付けてください。バグったらFTPから直す必要があるので( ;∀;)

2.editor-style.cssを編集

stinger5ではもう既定であるのですが、ない場合はFTPなどで新規で作成しましょう。

editor-style.cssというcssファイルをutf-8形式で作成しておきます。

すると、wordpressの管理画面>>テーマの編集の右メニューにeditor-style.cssが表示されますよ。

されたなら、自由にビジュアルエディタ用にコードを描いていきましょう。

edexita

色々ビジュアルエディタと投稿後の記事との表示が違うという場合はstyle.cssを全部インポートしてしまうことも選択肢としてはありですが、俺はやっていません。

なぜかというと、インポートは読み込みの速度が超絶遅くなるからです。だってビジュアルエディタと関係ないコードまで読み込むからね。

だから、基本的には、

  • h1~h5
  • image
  • iframe

 

などの一部分だけをコピーするのが適切だと思いますよ。

ということで使えるようになったよね(^◇^)

より確認作業がいらなくなったから便利ですよ。皆さんも困ったらやってみてね!

 - サイト作成

adsen

adsen

Message

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

CAPTCHA


  関連記事