新盛ソリューションズ株式会社

HOME > お知らせ

お知らせ

Word Press ブロックエディタの使い方

初めまして、新しく3月に入社した者です。
定期的にブログの更新があるとのことで今回書くことになり、何を書こうか悩んでいたのですが、弊社サイトはWord Pressで作成しているとのこと。
業務には直接関係ないですが、せっかくなのでWord Pressの文章を編集できる画面「ブロックエディタ」の基本的な使い方を書いて見ようと思います。

早速目次です↓

  1. はじめに
  2. 改行
  3. 文字に色をつける
  4. 画像を挿入する
  5. 見出しの作り方
  6. 目次の作り方
  7. TIPS:自動で改行されてしまう

はじめに

Word Pressでは、テキスト(見出し・段落など)や画像を「ブロック」と言われる単位で管理しているようです。

Enterキーを押すと段落が挿入され、同じ段落のテキストは自動的にブロックになるようです。

行を選択すると表示されるツールバーの「ドラッグ」や「上に移動」「下に移動」でブロックごと移動できます。

 

ツールバーの「B」はテキストを太字にできます。
「∨」をクリックすると、ExcelやWordで馴染みのある下線や上付き文字など選択できます。

左上の+ボタンを押すと「ブロック挿入ツール」が表示されます。
見出しや段落といったブロックの挿入ができます
    

改行

改行は、Shift + Enterキー

Enterキーのみ押すと段落が挿入されます。
一般的なテキストエディタと少し異なるので最初は戸惑いました

文字に色をつける

色を変えたいテキストをドラッグで選択して、表示されるツールバーの「∨」をクリックします。

表示されたメニュー項目の「ハイライト」をクリックします。





透過背景(グレーと白のマス目)のようなアイコンをクリックするとカラーパレットが表示されます。あとは好きな色を選択しましょう!

画像を挿入する

画像ファイルをドラッグ&ドロップすることで簡単に挿入できます。


もしくは、ブロック挿入ツールの「画像」項目をクリックして挿入します。


挿入すると下記のように表示されます。


アップロードをクリックすると、ローカルディスクから挿入したい画像ファイルを選択できます。

上記の方法だと、画像1つが1ブロックとなります。


ブロックの中に画像を挿入するには、インライン画像を使います。

ツールバーの「インライン画像」をクリック


表示される画面に挿入したい画像ファイルをドラッグ&ドロップ
画像を選択して、右下の  挿入  ボタンを押します。

見出しの作り方

ブロック挿入ツールの「見出し」をクリックで挿入できます。

もしくは、段落で「/(スラッシュ)」キーを押して表示されるブロック挿入ツールから見出しをクリックします。

Enterキーを押して段落を作成すると、薄い灰色の文字で「ブロックを選択するには「/」を入力」と表示されます。

/(スラッシュ)キーを押すとブロック挿入ツールが表示されるので見出しを選びましょう。
   

目次の作り方

目次を作るには、ブロック挿入ツールで「目次」を挿入します。
あとは、見出しを作成すると自動的に目次に追加されていきます。

見出しブロックをクリックして、ツールバーでレベルを変更できます。


レベルに応じて目次上で、入れ子にしてくれます。こんな感じです↓

目次の番号は、ページの上から同じレベルの連番で自動的に付加されます。

 

TIPS:改行が自動でされてしまう

ブロックエディタでは改行していない部分が、更新した実際のページを見ると
改行されてしまっている現象が発生しました。

↓弊社「お知らせ」投稿の内の一部です。

どうやらこれはWord Pressの機能のようです。
見やすいように自動で改行してくれているんですね。

抑制したい場合は、「TinyMCE Advanced」というプラグインを入れるか、
「function.php」という設定ファイルのソースコードを変更する必要があるみたいです。


設定ファイルを変更する場合は、必ずバックアップをとった方がいいですね!

それでは、本ブログは以上です。見てくださった方ありがとうございました!!