HP表示とビジュアル編集が同じだと便利

ほぼHP表示と同じ、ビジュアル編集は、なかなか投稿編集するのにとても便利です。
是非、お試しください。
まず、横幅がキッチリ統一されていると、どこの文字で改行となるかよく分かります。
更に、画像を回り込むときも、どの文字で改行されるか確認ができて便利です。これで、いちいちHP表示をプレビューして、修正する必要はなくなります。

Wordで文章書くように、改行は Shift+Return キーで<br/>改行になり、文章段落改行は Return キーで<p></p>改行となります。

img_54b7f3f651b28パソ活ラボの「WordPressビジュアルエディタのCSSに実際の表示を適用する方法」は、なかなか親切に解説されています。解説の通りやって、上手くいきましたのでご紹介しておきます。
但し、テーマはSimplicityで行ってるので、「ビジュアルエディタ用にclass名を置換」のeditor-style.cssの中の「.article」という部分の置換は変更してください。
因みにテーマが Twenty Fourteen なら「.entry_content」を「.mceContentBody」に置換することでうまくいきました。

もう一つ改善です。これまで、テキスト編集 → ビジュアル編集 → テキスト編集 すると、<br/>や<p></p>が消えてしまい、これを避けるためにテキストだけで編集していましたが、これを解決できる方法がありました。
即ち、テキスト編集 → ビジュアル編集 → テキスト編集 → ビジュアル編集 → テキスト編集 と繰り返しても、<br/>や<p></p>は消えません。

TinyMCE Advancedこの方法は、Plugin「TinyMCE Advanced」の「段落タグの保持」にチェックを入れるだけでOKです。

これでとても編集しやすくなりました。 ビジュアルで編集しながら、細い点をテキストで編集し、またビジュアルに戻るなど、気兼ねなく編集を続けられます。

もう一つ、画像の編集はビジュアルのほうがとても便利です。レイアウトを右にしようか左にしようか迷うことがありますが、ビジュアルでは一瞬で確かめられます。

wakuこれもパソ活ラボさんの「画像に枠線を付ける方法」ですが、是非使えるようにしておくと良いですね。
画像によっては、1pxのグレー線(#d9d9d9)の枠をつけて、メリハリを付けたい場合があります。これは結構需要あると思います。

何もqwqでなくて何でもいいのですが、子テーマのstyle.cssに追記する場合は、最後に書いてもいいのですが、レスポンシブデザインで@Media Queryが後半に指定されている場合は、最後に書くと不味いですヨ。
レスポンシブデザインで@Media Queryの直前に書いて置かないといけませんね。注意事項でした。

いつもブログを書く人にとっては、このような設定は大変便利です。HPを作る側は気付かない点ですが、是非設定しておきたいものです。

最後に、パソ活ラボさんに感謝です。有難うございました。

%d人のブロガーが「いいね」をつけました。
%d人のブロガーが「いいね」をつけました。