「記事投稿画面を触ってたらHTML編集とかビジュアル編集とかでてきてよく分からなくなってきた…」
これは私が実際につまずいたひとつ。
説明書を読まずとりあえずなんでも触って試してみる人が陥るんじゃないんでしょうか？
そして元の画面への戻し方が分からず時間だけが過ぎていく…
解決します。
・初心者は最初ビジュアル編集のみの記事投稿で問題なし ・最初の投稿画面がビジュアル編集で、HTML直接入力がコードエディター ・凝りたくなったらHTML編集を活用 ・ビジュアル編集コードエディターの切り替えはCtrl + Shift + Alt + M |
この答えを含めて、
禿げそうになる記事投稿画面のつまずき【ビジュアル編集】について詳しく説明していきます。
目次
まず、似たような言葉をはっきりさせる
分からないことを調べ始めてつまずくのが、慣れない言葉の多さです。
圧倒的カタカナの多さに社会の授業を思い出して項垂れたのは私だけではないはず。
なので話を進める前に似たような言葉を簡単に知りましょう。
| Gutenberg | ・ブロックエディタ （WordPressではビジュアルエディターとコードエディターの２種類がある） |
| ブロック | ・サイト作成に使う要素 |
| エディター | ・編集、編集ソフト |
| ビジュアル編集 ＝ビジュアルエディター | ・直感的操作ができる記事投稿画面 |
| コードエディター | ・HTML直接入力ができる記事投稿画面 |
| ＨＴＭＬとして編集 | ・ビジュアル編集を使いながら選択したブロックをHTMLコード入力ができるようにする |
| カスタムＨＴＭＬ | ・カスタムHTMLというブロックを追加して編集しながらプレビューできる |
これをふまえて基本的なお話をします。
ビジュアル編集とHTML編集についての基本
記事を作成するにあたって見出しや本文を作りますよね。
【ビジュアル編集】では見出しなどの各要素をブロックで分けていて、私たちはブロックを選んで記事デザインを整えることができます。
HTMLを直接入力する【コードエディター】は自分で見出しのタグなどを入れて記事デザインを整えていきます。
慣れてきたら、記事構成に凝りたくなってきたらHTMLを勉強しつつコードエディターを利用していきましょう。
初心者はビジュアル編集だけでいい
初心者にビジュアル編集を勧める理由は２つ。
・そもそもHTMLコード分からない人はビジュアル編集しか手段がない ・編集画面が分かりやすい |
HTMLやCSSが分かるようになったらコードエディターやHTML編集をしてみる、その認識で大丈夫。
ビジュアル編集は直感的操作ができるので、初心者でもある程度問題なく記事が作れます。作業画面の見え方を実際にみてほしい。
(同じ内容を各編集画面で並べています）
1.ビジュアル編集、利用
2.HTMLとして編集、利用
3.コードエディター、利用
画像で分かるように、ビジュアル編集は見やすくて、初心者でもどんな作業をしているのか分かりやすい。
私が作っている記事もビジュアル編集メインです。
解決！投稿画面がおかしくなったら
分からないなりに色々と触っていたら編集画面がおかしくなったとき、最初の画面に戻す方法をお伝えします。
ビジュアル編集画面で下記のような表示になっているときは対象ブロックが【HTMLとして編集】か【カスタムHTML】になっています。
（以下の画像参照）
【HTMLとして編集】状態の場合、
対象ブロックを選択して編集画面うえの : みたいなマークを押して出てくる【ビジュアル編集】にすれば解決。
【カスタムHTML】は、
対象ブロックを選択してShift + Alt + Z で削除すれば解決。
こんな画面になっていたら【コードエディター】状態になってます。
下書き保存の近くにある【コードエディター終了】を押すか、
Ctrl + Shift + Alt + Mで切り替え。
（ちなみにこのショートカットキーを使うことでエディタの切り替えが何度でもできます）
まとめる
いくら直感的操作で分かりやすいとはいえ、初めて使うソフトだからつまずくのも分からないのも当たり前。
だからまずは、
・初心者は最初ビジュアル編集のみの記事投稿で問題なし ・凝りたくなったらHTML編集を活用 ・ビジュアル編集コードエディターの切り替えはCtrl + Shift + Alt + M |
これだけおさえて記事作成に望みましょ～
- サイト読込スピード対策PNG・JPEG画像WebP一括変換フリーソフト
画像をWebPに変換できる無料ツールです。PNG・JPEG・GIF・WebPに対応し、複数枚やフォルダの一括変換、ZIP一括ダウンロードが可能。変換前後の容量削減率や画質差を実測で表示し、透過画像には警告も表示します。会員登録不要でその場ですぐ使えます。
サイト最新記事
- ひとりの時間の過ごし方が分からない人へ｜何をするか迷ったときの考え方とアイデア
「ひとりの時間、何をすればいいか分からない」と悩んでいませんか？この記事では、一人の時間の過ごし方が分からなくなる理由を解説しながら、心を休める・楽しむ・学ぶ・作る・自分と向き合うという5つの視点で、充実したひとり時間の過ごし方をご紹介します。自分らしい過ごし方を見つけるヒントとして、ぜひご活用ください。 - １人の時間は必要？誰かと過ごす時間だけでなく、１人だけの時間を作る意味│ひとりの時間
「ひとりの時間は必要なの？」という疑問をテーマに、誰かと過ごす時間との違いやバランスについて解説します。脳科学の視点や内向型・外向型それぞれの特徴、自身の体験も交えながら、ひとりの時間が心を整える役割や、人との時間をより豊かにする理由を紹介。自分に合った心地よい「黄金比」を見つけるヒントをお届けします。 - サイト読込スピード対策PNG・JPEG画像WebP一括変換フリーソフト画像をWebPに変換できる無料ツールです。PNG・JPEG・GIF・WebPに対応し、複数枚やフォルダの一括変換、ZIP一括ダウンロードが可能。変換前後の容量削減率や画質差を実測で表示し、透過画像には警告も表示します。会員登録不要でその場ですぐ使えます。
100均 (1) WordPress・ブログ運営 (4) お仕事のリアル体験談 (1) お金の知恵 (1) アロマ生活 (2) ハンドメイド販売・フリマ活用 (2) 人間関係・恋愛のモヤモヤ (4) 健康・美容セルフケア (1) 副業・個人事業のはじめかた (1) 創作・小説 (5) 生活のお悩み解決 (6) 紙もの・文房具クラフト (1) 贈り物・プレゼント (2)
