記事の作成方法 投稿日：
Gutenbergの使い方
- ウェブサイト開設後はページを見てくださる方に新鮮な情報をお届けする為、記事の投稿を行います。
- 投稿にはWordPressの新しいエディター「Gutenberg」を使います！
- ここでは記事の投稿方法について書いてありますので、記事作成のマニュアルとしてご覧ください。
- 今後WordPressのアップデートの度に少しずつ仕様が変わってくる可能性があります。
- お客様向けのマニュアルとして作成していますが一般的な内容ですので公開しています。
- 先ずは弊社で作成するウェブサイトで不要な機能と設定を変更します。次の画像を参考に赤い番号の手順で設定してください。
不要な機能の非表示と無効化
【POINT】
※段落ブロック右のボタン郡もブロックの使用頻度よって内容が変わります。
※設定はCookieによって保持されますので、Cookieを保存しない、閲覧履歴を残さない設定にしている場合は、ブラウザのウインドウを閉じた段階で設定が元に戻ってしまう場合があります。
【POINT】
※All In One SEO Packについては、検索エンジンにおいて「検索結果」のページタイトル（title）や説明（description）を意図的に変更して表示したい場合に設定を行います。
※また、検索されたくない記事の場合にもnoindex nofollow の設定を行えます。
タイトル入力・カテゴリ選択・文章作成
公開前の作業
- 記事の投稿の際には、まず「タイトル」を入力し、右サイドバー（設定）から「カテゴリー」を選択します。
- 文章を書くには「段落ブロック」内にカーソルを当て点滅状態で入力します。
※カテゴリーが1つしか無い場合は、自動的に選択されます。
※カテゴリが複数ある場合には、必要なカテゴリーを選んでください。
※新しいエディタでは様々なブロックが存在し、目的に応じて使い分けます。
※お客様ごとに仕様が異なる為、カテゴリを新規追加した場合、対応していない場合があります。
カスタマイズが広範囲に及ぶ場合には、別途お見積りの上ご対応させていただきますのでお知らせください。
公開処理
- 記事の作成中の状態を保存しておく場合は、公開せずに「下書きとして保存」をクリック。（Ctrl キー+ sキーでも保存可能）
- 保存した状態で実際のページの表示を確認する場合は、ボタン「プレビュー」をクリック。
- 内容に問題が無ければ、ボタン「公開する」をクリックして公開します。
補足事項
一度公開したページを非公開にする場合は「公開状態」を「非公開」にします。
または「下書きに切り替え」をクリックし下書きの状態に戻します。
複数人で管理していて公開権限を持つ管理者に公開を委ねる場合には、レビュー待ちにチェックを入れ「レビュー待ちとして保存」をクリックします。
文章の入力
- 段落ブロックに文章を入力します。
表示位置の移動
- 各ブロックの左側にマウスカーソルを当てるとブロックの移動ボタンが出現します。
- 上のボタン「上へ移動」をクリックすると、「ボタンを押したブロック」が一つ上がります。
- 下のボタン「下へ移動」をクリックすると、「ボタンを押したブロック」が一つ下がります。
- 中央のマークをドラッグ＆ドロップする事でも移動可能です。
詳細設定
| 名称 | 内容 |
| ブロック設定を非表示 | 右サイドバー（設定）を非表示に切り替えます。 |
| 複製 | 現在選択中のブロックを複製し増やす事が出来る機能。 使用頻度の高い内容を複製して部分的に変更するだけで良いので便利です。 |
| 前に挿入 | 現在選択中のブロックの上にブロックを追加する機能。 「○に+（プラス）マーク」（ブロックの追加）と同様にブロックを追加できます。 |
| 後に挿入 | 現在選択中のブロックの下にブロックを追加する機能。 |
| HTMLとして編集 | ビジュアル編集では解らないHTMLの構造を確認し編集を行える機能。 ※HTML・CSSなどの知識が必要です。 |
| 再利用ブロックに追加 | 「見出しブロック+画像ブロック+文章ブロック」等まとめてグループ化し、再利用出来る機能です。 |
| ブロックを削除 | 選択しているブロックを削除します。 ※「3-2. ブロックの削除」参照。 |
改行
改行タイプ1 ※HTMLタグ<p>～</p>と同義
段落ブロック内にカーソルがある状態でキーボードのEnterキーを押すと段落ブロックが追加され改行されます。
※HTMLタグ<p>～</p>と同様の扱いです。
改行タイプ2 ※HTMLタグ<br>と同義
shiftキーを押しながらEnterキーを押すと段落ブロック内で改行が可能です。
※HTMLタグ<br>と同様の扱いです。
文章及びブロックの削除
文章の削除
文章を削除する場合は、BackSpaceキーあるいはDeleteキーを押す事で削除できます。
ブロックの削除
◆段落ブロックを削除する場合は、削除したい段落にカーソルを合せ、BackSpaceキーを押す事で、段落ブロックそのものを削除する事ができます。
※文章が残っている場合、上または下のブロックに内容が統合される場合がありますので、文章そのものが不要な場合は、文章も含めて削除します。
◆もう一つの手段としては、ブロックの上に文字揃えなどのツールボックスが表示されている状態で、右にある「点が縦に３つ並んでいるボタン（詳細設定）」をクリックしメニューを表示します。
その中にある「ブロックを削除」をクリックする事で、現在カーソルの表示されているブロックが削除されます。文章ごと一括削除されます。
※下図参照
文字サイズの変更
文字サイズ
段落ブロックを選択し、右サイドバー（設定）にある「文字サイズ」から既定のサイズを選ぶか、右の入力欄に数値を入力します。※上下の▲▼ボタンで数値を増減出来ます。
※この段落ブロックは、文字サイズを「中」にしています。
ドロップキャップ
ドロップキャップを押すと先頭文字列が大きく表示されます。
↑ドロップキャップを適用した段落ブロックにカーソルを当てると、先頭文字が小さく表示されますが、カーソルを外すと再度大きく表示されます。
※下のブロックに重なるように表示されますので、文章が少ない場合は、ブロック「 スペーサー」 を挿入し、回り込みを解除します。
色の変更
背景色
段落ブロックにカーソルをあて、右サイドバー（設定）の「色設定」をクリックして展開し「背景色」を選択します。
背景色を「淡いシアンブルー」に変えた状態。
いろはにほへと ちりぬるを
わかよたれそ つねならむ
うゐのおくやま けふこえて
あさきゆめみし ゑひもせすん
文字色
段落ブロックにカーソルをあて、右サイドバー（設定）の「色設定」をクリックして展開し「文字色」を選択します。
文字色を「鮮やかなグリーンシアン」に変えた状態。
いろはにほへと ちりぬるを
わかよたれそ つねならむ
うゐのおくやま けふこえて
あさきゆめみし ゑひもせすん
※ブロック単位で「文字サイズ・背景色・文字色」を変更する仕様になっているので文章の一部のみを変更する事は出来ません。
※文字色を変更できるのは段落ブロックです。
※このブロックは、文字サイズを「小」文字色を左から二番目の「レッド（#cf2e2e）」にしています。
※1つのブロックに対し同時に「文字サイズ・背景色・文字色」の変更が可能。
文字の装飾
太字
文字列をカーソルで選択しツールバーの「太字」をクリックします。
| 文字列を太字にします。 | 文字列が太字になりました。 |
イタリック（斜体）
文字列をカーソルで選択しツールバーの「イタリック」をクリックします。
| 文字列をイタリック（斜体）にします。 | 文字列がイタリック（斜体）になりました。 |
※お客様のサイトについては仕様の為イタリック（斜体）にならない場合があります。
リンク
文字列をカーソルで選択しツールバーの「リンク」をクリックします。
表示されたテキストボックスにURLを入力し、ボタン「適用」をクリックします。
| 文字列にリンクを設定します。 | 文字列にリンクが設定されました。 |
打ち消し
文字列をカーソルで選択しツールバーの「打ち消し」をクリックします。
| 文字列を打ち消します。 | 文字列が |
ブロックの変更
段落ブロックの左上にあるボタンをクリックします。
- ツールバー左の段落アイコンにマウスカーソルを当てると、ブロックタイプを変更するボタンに変化します。(このブロックはリストに変更しました)
- そのままクリックし段落以外に必要なブロックに変更します。
- 変更可能なブロックは以下の通りです。
| 名称 | 内容 | 使用頻度 |
| 見出し | h2～h4までの見出しタグ。※右サイドバー（設定）に h5 h6まであり。 | 高 |
| リスト | 頭に「マーク」あるいは「数値」のついたリストを表示。 | 中 |
| 引用 | 著作物や他人の書いた記事などを引用する場合。 | 低 |
| 整形済み | <pre>～</pre>タグで表示した場合と同様。 | 低 |
| 詩 | <pre>～</pre>タグで表示した場合と同様。 | 低 |
【POINT】
※段落ブロック以外のブロックでは、他のブロックに変更できないものあります。
変更したいと思った場合は現状は諦め、新規に目的のブロックを作成し、不要なブロックとして削除してしまう方が良さそうです。
テーブル（table・表）の作り方
上の見出し「7.ブロックの変更」の下に表示されているのは「テーブル（table・表）」です。
段落及びブロックの変更では出てこないブロックを作成するには、まず空の段落ブロックを作成します。
- 「文章を入力、または/でブロックを選択」と表示されている段落ブロックの左方向にカーソルを当てると「○に+（プラス）マーク」（ブロックの追加）が表示されますので、そこから新たにブロックを作成します。
- フォーマットの中からテーブルを選択します。
- 「列数に『3』」「行数に『6』」 と入力し、ボタン「生成」をクリックすると未入力のテーブル（表）が作成されるので、空の入力欄に必要な見出しと内容を入力します。セルに該当する箇所は見出しでもHTMLタグのthにはならずtdのみとなりますので、文字を選択した状態でボタン「B」を押してBold（太字）に変更してください。（任意）
※ツールバーのボタン「テーブルの編集」をクリックして後からテーブルの列と行を変更する事も可能です。
※下図参照
選択したセルを基準に「列」または「行」の「追加」及び「削除」が可能です。
※選択したセルの縁線は青く表示されます。
その他のブロック
ブロックの作成
ブロックを作成するにはテーブルの作成で行った方法の他に、作成済みのブロックの上方向中央にカーソルを当てると表示される「○に+（プラス）マーク」（ブロックの追加）を押す事でも作成できます。
この場合、プラスマークを押したブロックの上側に新たなブロックが作成されます。
※文章の入っていない段落及び、現在カーソルが点滅しているブロックには「○に+（プラス）マーク」（ブロックの追加）は表示されません。
※このブロックは、文字サイズを「小」背景色を「レッド（#cf2e2e）」文字色を「白（#ffffff）」にしています。
よく使うもの
「よく使うもの」は、よく使うであろうブロックが予め表示され、ブロックの中で使用頻度の高いものが自動で上位表示されます。
※表示位置も使用頻度によって変わります。
※詳細は下記各ブロックの説明をご覧ください。
インライン要素
インライン画像
- 「インライン画像」は、テキストと画像を同時に配置可能です。画像に対してテキストを横方向に表示します。
- 画像とテキストを改行（Shiftキー + Enterキー）し、「中央寄せ」を選ぶと、横方向に対して中央に表示可能です。
- 画像のサイズは、画像選択後、四隅に表示される四角形をドラッグして拡大縮小可能です。
寄せ方向には「左寄せ」「中央寄せ」「右寄せ」があります。
※段落ブロックも同様です。つまり段落ブロックの中で画像とテキストを配置した場合と同様の仕様に基づくブロックになります。
インライン要素から「インライン画像」をクリック。
タブ「ファイルをアップロード」をクリック。
画像ファイルをドラッグ＆ドロップしてアップロード。
画像を選択
画像が適用された状態
画像の配置
画像の拡大縮小
寄せ(文字揃え)
↑インライン要素を「左」「中央」「右」方向のいずれかに寄せて表示します。
段落ブロックでも同様です。
※下記：実際の表示例
改行無し寄せ
左寄せ
中央寄せ
右寄せ
改行有り寄せ
改行して左寄せ（画像の上）
改行して左寄せ（画像の下）
改行して中央寄せ（画像の上）
改行して中央寄せ（画像の下）
改行して右寄せ（画像の上）
改行して右寄せ（画像の下）
長い文章の場合
このように文章が長い場合、自然改行されると画像の下にテキストが流れてしまうので、長い文章の場合は、上記「改行有り寄せ」のように改行（Shiftキー + Enterキー）するのがおすすめです。
※「レイアウト要素」の ブロック 「メディアと文章」を使うとよりスマートに表現可能です。
その他ブロック
- ブロックの概要です。
- 使用頻度なども書いてありますが、どのようなサイトにしていこうとお考えなのかによって変わってきます。
- 自社製品の画像や映像を多用するサイトになる場合には、サーバープランの選定から考える必要があります。
一般ブロック
見出し
使用頻度：高
ウェブサイトに限った事ではありませんが、読み物として「見出しと文章」が無ければ記事は成り立ちません。
閲覧者はもちろんの事、検索エンジンにも理解しやすくするよう簡潔で解りやすい見出しを心がけましょう
大見出し（h2）～小見出し（h6）までの見出し設定が可能です。
段落
使用頻度：高
文章入力用のブロック。
特に難しい事はありません。キーボードで入力し、Enterキーで改行すれば段落ブロックは完成です。一番単純かつ使用頻度の高いブロックです。
「文字サイズ・背景色・文字色」の変更が可能です。
リスト
使用頻度：中～高
文章の先頭にマークまたは番号の付いたリスト用ブロック。
要点などの箇条書きに適しています。
画像
使用頻度：高
画像を挿入し、視覚に訴えます。
画像に対して「altテキスト（代替えテキスト）・画像サイズ・リンク先」の設定が可能です。
カバー
使用頻度：中
テキストオーバーレイを含む画像または動画を追加します。ヘッダーに最適です。
このページの上にある「Gutenbergの使い方」の写真の部分がこのカバーになります
サイトの仕様によって表示範囲は画面幅いっぱいにはならず、コンテンツ表示領域いっぱいに表示されます。
ギャラリー
使用頻度：中
リッチギャラリーに複数の画像を表示します。
リンク先をメディアに設定するとフォトギャラリーが簡単に作成出来ます。
ファイル
使用頻度：中
PDFやエクセル・ワードといったファイルをアップロードし、なおかつダウンロードする為のボタンが自動的に作成されます。
右サイドバー（設定）からダウンロードボタン設定を展開しダウンロードボタンの表示・非表示を切り替え可能です。
動画
使用頻度：中
mp4などの動画ファイルをアップロードし埋め込めます。
YouTubeなどの動画URLを「URLから挿入」を選んで埋め込む事も可能です。
音声
使用頻度：低
シンプルな音声プレイヤーを埋め込みます。
MP3ファイルなどの再生が可能です。
引用
使用頻度：低～中
引用テキストを視覚的に強調します。
画像挿入例
ギャラリー作成例
プルクオート（無地）
プルクオート
引用元
プルクオート（通常）
プルクオート
引用元
引用（通常）
引用【通常】ああああああああああああああああああああああああ
引用元
引用（大）
引用【大】あああああああああああああああああああ
引用元
ファイル
フォーマット
カスタムHTML
使用頻度：低
既存スタイルでは表現しにくいデザイン・レイアウト・機能などを実現する際に使用します。
使いこなすには「HTMLタグ・CSS・JavaScript」などの知識が必要です。
画面画像及びこのアイコン表示の箇所はこのカスタムHTMLを使っています。
テーブル
使用頻度：中
表を作成します。
8.テーブル（table・表）の作り方をご参照ください。
横にセルの数が多いと、表示されない箇所が出る可能性がありますのでご注意ください。
ソースコード
使用頻度：低
ソースコードをスペースや改行が記述した通りに反映します。
preタグとcodeタグで書き出されます。
HTMLタグ等は記号（文字列）としてそのまま書き出されます。
整形済み
使用頻度：低
スペースや改行が記述した通りに反映されます。
preタグで書き出されます。
フォントをゴシック体で表示します。
HTMLタグは記号（文字列）としてそのまま書き出される場合と、HTMLタグが除去されてしまうケースがありますので、HTMLタグそのものを表示したい場合は、ソースコードを利用します。
詩
使用頻度：低
スペースや改行が記述した通りに反映されます。
preタグで書き出されます。
フォントを明朝体で表示します。
HTMLタグは記号（文字列）としてそのまま書き出される場合と、HTMLタグが除去されてしまうケースがありますので、HTMLタグそのものを表示したい場合は、ソースコードを利用します。
プルクオート
使用頻度：低～中
引用文 及び 引用元を表示する場合に利用します。
スタイルを「通常」「無地」から選べ、文字色と背景色の変更が可能です。
クラシック
従来のエディターをブロックにしたもの。
いつまで存在しつづけるのか不明な為、Gutenbergに慣れる為にも使用は避けた方が無難かもしれません。
レイアウト要素
カラム
使用頻度：中
左右２つ以上のにカラムを作成し、文章の他、別のブロックをそれぞれのカラムに挿入できます。
カラムの数が多過ぎるとレイアウトに影響が出ますので、2～5つ以内が適当です。
カラムの数は右サイドバー（設定）のスライダーを横に動かすか、数値を入力して増減します。
ボタン
使用頻度：中
リンクボタンを作成します。
文字色とボタンのベースとなる背景色を変更できます。
URLを入力して完成です。
メディアと文章
使用頻度：中
サービスイメージと説明を横並びに表示する場合などに役立ちます。
写真を左または右に表示するレイアウトの選択が可能で、文字サイズの変更も可能です。
スペーサー
使用頻度：中
ブロックの間に、高さをカスタマイズ可能な余白を追加します。
スペーサーの高さに関係無く挿入するだけで下ブロックの回り込みを解除するようカスタマイズしています。
区切り
使用頻度：低
「短い線」「幅広線」「ドット」から罫線を選択します。
削除する場合は、区切りブロックの下に段落ブロックなどを作成し、カーソルを当て、キーボードの↑キー（上キー）を1回押すと、フォーカスされ、操作可能になります。
※操作方法は今後改善される可能性があります。
改ページ
使用頻度：低
1つのページを複数ページに渡り分けて表示する機能です。
ページナビゲーションが自動的に作成されます。
続きを読む
使用頻度：低
長い文章の前半を表示し、後半は非表示にする機能。
カテゴリーリストにおいては文字数により自動で行われます。
カスタマイズによってはこの機能が使えない場合もあります。
ウィジェット
ショートコード
使用頻度：低
プラグイン等の機能により、ショートコードと呼ばれる[～]で囲まれた文字列が書き出されます。このショートコードをコピーして入力欄に貼り付けることにより、様々な機能実装に利用されます。
ショートコードを利用したカスタマイズを行った際にはお知らせします。
アーカイブ
使用頻度：低
年月別のアーカイブページへのリンクを「リストビュー（縦並び）」で表示します。
カテゴリー
使用頻度：低
カテゴリーページへのリンクを「リストビュー（縦並び）」で表示します。
最新の記事
使用頻度：低
最新の記事のタイトルリンクを「リストビュー（縦並び）」または「グリッドビュー（横並び）」で表示します。
最新のコメント
使用頻度：低
弊社ではコメント機能を使わない制作になりますので使用しません。
埋め込み
埋め込み
使用頻度：低～中
動画、画像、ツイート、音声その他の外部のリソースのコンテンツを埋め込みます。
- 「埋め込み」では様々なSNSの一部記事等の埋め込みが可能です。
- 代表的な「埋め込み」を選んでも自動で各社の様式に合せてブロックが適用されます。表示がおかしい場合は、各サービス用の埋め込みブロックをご利用ください。
【POINT】
※ブラウザのセキュリティー設定によっては、単なる文字の羅列とリンクテキストのみの表示となる場合があります。
※実際の表示よりも小さく表示されたり、表示されない部分があっても、実際の表示に影響が無ければ問題ありませんので、プレビューで確認してください。
※キャプションの位置にカーソルを当て、左揃え・右揃えを選ぶと、下段にある段落ブロックのテキストが回り込みます。