WordPressのビジュアルモードの設定をブログテンプレートと同じにする方法

スポンサーリンク

WordPressブログで定評のあるイマムラさんが紹介していた記事がとても参考になったので紹介したい。

【プレビューを見ながら調整する回数を減らそう】WordPressのビジュアルエディターで入力する内容を本文のデザインと合わせる方法 | 今村だけがよくわかるブログ

簡単に言うと、管理画面上からブログを書く際に実際どのように記事が書かれるのかを直感的に操作出来るというものだ。

 

やりかたは、イマムラさんのブログを読んでもらうとして

早速自分のブログにも適用

よーし!やってみるかーと早速functionにイマムラさんの書いていたコードを埋めてみた。

もちろんCSSの場所は、自分の使っているCSSを使って。

 

その結果・・

WordPressのビジュアルモードの設定をブログテンプレートと同じにする方法

 

じゃーん!!!

なんか違う。。。

バックグラウンドなど記事内のcssを入れていたため、ちゃんと対応していない。

時間がある時に、エディター用のCSSを作って

h1 h2 li タグなどを

divを指定しない形にして記事を書けるように微調整が必要だ。

編集用のCSSを独自に設定

お昼休憩を使って編集した結果

編集用のCSSを別において完成したのがこんなイメージ

WordPressのビジュアルモードの設定をブログテンプレートと同じにする方法

こんな感じで編集ができるようになった。直感的に操作できていいね!

でも、これとても良いテクニックなのでありがたやー!

 

【プレビューを見ながら調整する回数を減らそう】WordPressのビジュアルエディターで入力する内容を本文のデザインと合わせる方法 | 今村だけがよくわかるブログ
https://www.imamura.biz/blog/27649

スポンサーリンク

\ SNSでシェアしよう! /

スポンサーリンク

ankerのライトニングケーブル
anker充電機器
この記事を書いたのはです!

アットトリップです。このブログの管理人です。
著書:Facebookコミニティ成功の法則


WordPressのビジュアルモードの設定をブログテンプレートと同じにする方法

WordPressのビジュアルモードの設定をブログテンプレートと同じにする方法

タグ: , , , ,

記事URL:http://attrip.jp/181666/


フォローよろしくお願いいたします。

mautic is open source marketing automation
お問い合わせこのサイトについてサイトマップ広告のご掲載について
おもしろ動画レシピ筋トレストレッチ糖質制限ダイエット