WordPressのビジュアルモードの設定をブログテンプレートと同じにする方法
2016/10/18
attrip
WordPressブログで定評のあるイマムラさんが紹介していた記事がとても参考になったので紹介したい。
【プレビューを見ながら調整する回数を減らそう】WordPressのビジュアルエディターで入力する内容を本文のデザインと合わせる方法 | 今村だけがよくわかるブログ
簡単に言うと、管理画面上からブログを書く際に実際どのように記事が書かれるのかを直感的に操作出来るというものだ。
やりかたは、イマムラさんのブログを読んでもらうとして
早速自分のブログにも適用
よーし！やってみるかーと早速functionにイマムラさんの書いていたコードを埋めてみた。
もちろんCSSの場所は、自分の使っているCSSを使って。
その結果・・
じゃーん！！！
なんか違う。。。
バックグラウンドなど記事内のcssを入れていたため、ちゃんと対応していない。
時間がある時に、エディター用のCSSを作って
h1 h2 li タグなどを
divを指定しない形にして記事を書けるように微調整が必要だ。
編集用のCSSを独自に設定
お昼休憩を使って編集した結果
編集用のCSSを別において完成したのがこんなイメージ
こんな感じで編集ができるようになった。直感的に操作できていいね！
でも、これとても良いテクニックなのでありがたやー！
【プレビューを見ながら調整する回数を減らそう】WordPressのビジュアルエディターで入力する内容を本文のデザインと合わせる方法 | 今村だけがよくわかるブログ
https://www.imamura.biz/blog/27649
スポンサーリンク
スポンサーリンク
「WordPress」をもっと詳しく
-
WordPressの管理画面でGA、タグマネ、サーチコンソール、アドセンスなどを見られるようにするSite Kit by Google – WordPress plugin
-
Instant Images – One Click Unsplash Uploads – WordPress プラグインがあれば画像入れるのが楽
-
WordPressにnoteで書くボタンを実装してみた
-
今村さんがおすすめしていたAdvanced Gutenberg WordPressプラグインを後で入れて試す。
-
Gutenberg を使うとtable of contentsが編集ができなくなる
についてもっと見る
コメントお待ちしております