お電話
ホームページのご相談・お見積り

スタッフブログ

WordPressのエディタで気をつけたいこと

2019/09/27 WordPress

WordPressの記事や固定ページを更新していてレイアウトが崩れた経験はありませんか?

更新用アカウントが1つに対して更新スタッフが数人いる場合、人によってビジュアルエディタで編集していたり、テキストエディタで編集していたりすると思います。
その時に起こりやすいのがレイアウト崩れです。

そもそも「ビジュアルエディタ」「テキストエディタ」がよくわからないまま更新している方も多いと思います。今回はその2つのエディタについて解説します。2つのエディタを理解し、レイアウト崩れを防止しながら正しくページを更新しましょう。

ビジュアルエディタとは


投稿画面のエディタ右上にある2つのタブのうち左側、「ビジュアル」と明記されている方がビジュアルエディタです。


こちらは「メディアを追加」ボタンの下にあるツールバーを使用し、文字の装飾などをエディタ上で行うことが可能。

また上図は文字の色を赤くした場合です。カラーパレットが表示され多彩な色に変更することができます。
このように、ビジュアルエディタでは視覚的に装飾することができます。
HTMLやcssの知識がない状態でもある程度レイアウトを整えることが可能なのです。

テキストエディタとは


投稿画面のエディタ右上にある2つのタブのうち右側「テキスト」と明記されている方がテキストエディタです。

こちらはビジュアルエディタと違いツールバーが必要最低限しかありません。
また、ビジュアルエディタのツールバーと違い「img」「ul」「ol」など見慣れない文字がありますが、これらはHTMLタグを表しています。


例えば上図はビジュアルエディタで文字を太くした画面となっています。
左上の「B」というのが太字にする機能です。


これをテキストエディタで見てみると「<strong>」という文字が入っています。
テキストエディタではこのように、HTML(css)コードに変換された状態で本文を編集することが可能となっています。

レイアウトが崩れる原因とは

「ビジュアルエディタ」と「テキストエディタ」の違いがわかったところで、なぜレイアウトが崩れてしまう事につながるかをご説明します。

 
上記はHTMLを表記できる「テキストエディタ」で投稿を行いました。
しっかりHTMLのコードが表示されています。


ここで「ビジュアルエディタ」に変えてみます。
見た目上崩れているようには見えません。


ここで再度「テキストエディタ」に戻してみます。
すると見出しのコードは消えていませんが<p><br>というコードが消えています。

「ビジュアルエディタ」ではコードのとおりに反映されているようで、実は「テキストエディタ」でみると必要なコードが消えている事があります。
これがレイアウトが崩れる原因です。
※見出しコードのように一部例外はあります。

ドコドアでは製品情報や、お客様の声など、お客様が更新を行うコンテンツに合わせ、表示崩れが起きにくいよう・お客様が更新しやすいようにWordPress設計を行っています。
エディタで更新を行う事に不便を感じている方はぜひお問い合わせください!

WordPress管理・更新作業・カスタマイズもドコドアにお任せください!

冒頭でも記載しましたが、更新用アカウントに複数の作業者が存在する場合、作業者によって見やすい・使いやすいエディタを使用してしまう事も。

エディタに気づかず過去の記事を更新してしまうことで、レイアウトが崩れてしまったり、不具合がおこってしまったりする可能性があるのです。

ドコドアでは

  • ユーザー登録(WordPress管理)
  • 新着などの更新作業
  • 投稿ページのカスタマイズ

などに対応可能のためこのようなお悩みも解決することができます!
上記のようなお悩みがある方はぜひお気軽にお問い合わせください!

大矢 麻琴が書いた記事

新着情報

スタッフブログ