Support Site

「3.ダッシュボードについて」で触れた固定ページ機能や投稿機能を利用することで、既存のページを編集したり、新しいお知らせやブログの記事を作成したりといったＷebサイトの運用を行います。
このセクションでは各機能を利用する際に知っておきたいエディターの基本機能について解説していきます。

1.ブロックエディタについて

エディターとは、「文章や画像を編集する機能」のことで、ページやブログのような記事を作成する時に使用します。

WordPressに実装されているブロックエディタは、見出し・画像・文章などを「ブロック」という一塊の単位として作成し、それぞれを直感的に配置・移動・編集していくことができます。

2.ブロックエディタでの編集方法

固定ページ、投稿のどちらも、ブロックエディタで編集します。

ブロックエディタの画面には、上図のように「タイトル入力欄」が用意されています。ここにタイトルを入力すればタイトル設定は完了です。
「タイトル入力欄」の下のエリアに、ブロック（見出し・画像・本文段落など）を追加してページの中身となる記事を作成していきます。

ブロックの追加方法については以降の内容で詳しく解説していきます。

3.見出しの作成

見出しにレベルを付けたい場合

見出しの数字について

「H1」が一番大きな見出しで表示され、「H2」「H3」と数字が大きくなるほど、見出しのレベルが下がります。
一般的に「H1」は記事タイトルに使い、コンテンツの大見出しは「H2」、中見出しは「H3」、小見出し「H4」と順番に使っていきます。

4.段落（本文）の作成

固定ページや投稿記事の本文は、基本的に「段落」というブロックを利用します。

段落ブロックの簡単な作成

Enterキーを押せば新しい段落ブロックが作られます。
また「+」のアイコンをクリックし「段落」を選択しても段落ブロックが作成されます。

4-1.「改行」と「段落」の違いについて

改行と段落の違いを理解し使い分けることで、読みやすい文章を作ることができます。

例として上図を改行部分と段落部分とで分けてみると下図のように分けることができます。

段落と段落の間に余白が設けられることで文章が読みやすくなります。
適度に段落を挿入し、読みやすさに留意して文章を作成します。

改行と段落

改行：行を改めて文章を区切る　　・・・Shift　＋　Enter

段落(ブロック)：文章内容の区切り・・・Enter

ディスプレイ幅の違いによる見え方について

パソコンだけでなくタブレットPC、スマートフォンでの見え方を確認する事も重要です。
編集時には気づかなかった文章の体裁も画面サイズが変わって表示されることで、印象が変わることがあります。

4-2.文字スタイルの変更・テキストリンクの挿入・文字揃えの変更など

段落ブロックのメニューバーを使うと書式や体裁の設定や変更が可能です。

4-3.アンカーリンクの挿入

アンカーリンクは、ページ内の任意の位置にリンクする機能です。例えば、アンカーリンクを設定した任意のテキストから、同一ページ内の見出しにスクロールさせたり、他のページ中の任意のスクロール位置へ移動させたりします。

アンカーリンクの挿入を設定する場合「リンク元となるテキスト」と「移動先のブロック」の両方に設定が必要です。

ここでは例として“sample-anchor”という名前でHTMLアンカーを設定しています。

アンカーを設定する時のポイント

• HTMLアンカーに設定した名前（キーワード）はサイト内で一意でなければいけません。
• HTMLアンカーでは大文字と小文字が区別されます。
• HTMLアンカーには、ハイフン (-)、アンダースコア (_)、コロン (:)、ピリオド (.) などの半角記号を含めることができます。スペースを含めることはできません。
• HTMLアンカーの先頭はアルファベットにします。

例として3で設定したHTMLアンカーの名前“sample-anchor”をリンクの設定入力欄　に“#sample-anchor”と入力します。

4-4.フォントのサイズ・色を変更

ブロック内の文章のフォントサイズや色を変更する時は、ページ右にあるパネルのブロックタブを使い変更します。

5.リスト（箇条書き）の作成

箇条書きの書式は「リスト」というブロックを利用します。

「リスト」の項目が見つからない場合は下にある「すべて表示」をクリックします。ページ左に利用できる全てのブロックが表示されたら、その中から「リスト」を探してください。

リストを番号表示にする

6.画像／PDF／動画の挿入

画像やPDF、動画を掲載する時もブロックの追加を利用します。

6-1.画像の挿入

アップロードとメディアライブラリについて

• アップロード：作業している端末（PCなど）に保存されている画像やファイルをWordPressのメディアライブラリに転送します。上図の青い点線枠に画像ファイルを直接ドラッグ＆ドロップしてもアップロードが可能です（下図参照）。
• メディアライブラリ：過去にアップロードしたメディアライブラリ内にある画像から選択して引用します。

ドラッグアンドドロップとは

• ドラッグ：画面上でマウスポインタがウィンドウの枠やファイルのアイコンなどに重なった状態で、マウスのボタンを押しっぱなしで移動すること
• ドロップ：別の場所でマウスのボタンを離すこと

この一連の動作を「ドロップアンドドロップ」と呼びます。

6-2.PDFの挿入

申込書やチラシなど印刷に適したPDFデータもページに挿入することができます。

6-3.動画の挿入

動画ブロックを選択すると右端にサイドバーが表示されます。
サイドバー内にある動画設定の値を変更することで「自動再生」や「ループ」などの設定ができます。

推奨画像サイズについて

画像サイズは「画像の大きさ【幅×高さ】（px）」と「画像容量【ファイルサイズ】（bytes）」の2種類の意味があります。

「画像の大きさ」の推奨サイズは長辺1280px以下です。
1280px以上の画像をアップロードし、使用した場合でも画像は大きく表示されず、ページ表示速度は低下します。
画像の高さは、指定していなければ、幅の長さに合わせて縦横比を保ったまま伸縮するため留意する必要はありません。但し、画像の縦横比は横長（もしくは正方形）を推奨しています。

「画像容量」の推奨容量は200KB以下です。
サイトで表示する画像の容量は、ページの表示速度に影響するため、美しさを損なわない範囲で小さいほうが良いと言えます。
画像容量が設定上限を超える場合、自動的にリサイズされて読み込まれますが、できる限り軽量化し、ページ読み込み時間の最適化を行いましょう。

7.その他の便利機能

閲覧しやすいページを作ために、必要に応じて余白の設定もできます。
「スペーサー」ブロックを使うことで任意のサイズで余白を挿入することができます。

7-1.余白を入れたい場合は「スペーサー」

「スペーサー」の項目が見つからない場合は下にある「すべて表示」をクリックしします。
ページ左に利用できるブロックが全て表示されますので、その中から「スペーサー」を選択してください。

7-2.複数ブロックを横に並べる場合は「カラム」

「左に画像ブロック、右にリストブロック」など、ブロックを横に並べたい時は「カラム」を使います。

7-3.複数の画像を並べて表示する場合は「ギャラリー」

「ギャラリー」ブロックを使用すると、画像や写真などのサムネイル（縮小表示）一覧を設置できます。