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

<img width="740" height="454" src="https://attrip.jp/wp-content/uploads/2016/10/11b7500c9b48ea8cccee1172bb86533a.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="https://attrip.jp/wp-content/uploads/2016/10/11b7500c9b48ea8cccee1172bb86533a.jpg 740w, https://attrip.jp/wp-content/uploads/2016/10/11b7500c9b48ea8cccee1172bb86533a-403x247.jpg 403w" sizes="(max-width: 740px) 100vw, 740px" data-eio="l" />

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

2016/10/18attrip

目次

早速自分のブログにも適用
編集用のCSSを独自に設定

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

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

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

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

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

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

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

その結果・・

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-18-11-56-15

<img class="aligncenter size-full wp-image-181667" src="https://attrip.jp/wp-content/uploads/2016/10/11b7500c9b48ea8cccee1172bb86533a.jpg" alt="%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-18-11-56-15" width="740" height="454" srcset="https://attrip.jp/wp-content/uploads/2016/10/11b7500c9b48ea8cccee1172bb86533a.jpg 740w, https://attrip.jp/wp-content/uploads/2016/10/11b7500c9b48ea8cccee1172bb86533a-403x247.jpg 403w" sizes="(max-width: 740px) 100vw, 740px" data-eio="l" />

じゃーん！！！

なんか違う。。。

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

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

h1 h2 li　タグなどを

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

編集用のCSSを独自に設定

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

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

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-18-13-58-25

<img class="aligncenter size-full wp-image-181691" src="https://attrip.jp/wp-content/uploads/2016/10/3f47e4495580da56b21648ae2d1cf26c.jpg" alt="%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-18-13-58-25" width="545" height="337" srcset="https://attrip.jp/wp-content/uploads/2016/10/3f47e4495580da56b21648ae2d1cf26c.jpg 545w, https://attrip.jp/wp-content/uploads/2016/10/3f47e4495580da56b21648ae2d1cf26c-403x249.jpg 403w" sizes="(max-width: 545px) 100vw, 545px" data-eio="l" />

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

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

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

<img width="100" height="100" src="https://attrip.jp/wp-content/uploads/2014/12/default1-150x150.png" class="attachment-100x100 size-100x100 wp-post-image" alt="" data-eio="l" />

WordPress記事内の画像に記事タイトルのaltをつける

<img width="100" height="79" src="https://attrip.jp/wp-content/uploads/2015/07/WordPresslogo-380x300.jpg" class="attachment-100x100 size-100x100 wp-post-image" alt="" data-eio="l" />

WordPress 必ず指定しておきたいネイティブCSSで今までのイライラが解決

スポンサーリンク

スポンサーリンク

「WordPress」をもっと詳しく

についてもっと見る

コメント大歓迎

コメントを残すコメントをキャンセル