フリーランスとセルフマネジメントby アキユキ

フリーランスのお役立ちブログ+モチベーションを高く維持するためのセルフマネジメント術

WordPressの納品用マニュアルを公開します:WordPress5、Gutenberg(グーテンベルク)対応

WordPressでホームページを作成して納品する際にマニュアルも一緒に納品すると思います。

この時、WordPress5でグーテンベルクが導入されてから従来使っていたマニュアルが使えなくなったり、そもそも操作性がちょっと難しくて素人向けにマニュアルでどう表現したらいいのか悩んだりすると思います。

何よりマニュアルって作るのが面倒ですよね(´・ω・`)

この記事ではWordPress5、グーテンベルクの使い方を解説した上で僕がクライアントに納品しているマニュアルを誰でも使えるような形に修正したものを無料ダウンロードプレゼントします。

クライアントに納品する用のマニュアルを公開しているところはなさそうだと思ったので何かのお役に立てればと思って無料ダウンロードできるようにすることにしました。

本記事でダウンロードできるWordPressマニュアルの内容

WordPressでホームページを制作すると色々カスタマイズすると思いますので、すべて同じマニュアルで納品することはできません。ここで無料ダウンロードできるマニュアルの内容としては

  • 新着記事の投稿(通常の投稿)のマニュアル
  • 固定ページ編集のマニュアル
  • グーテンベルクの使い方

この3つをカバーしています。カスタム投稿タイプやカスタムフィールドなどで色々やる場合は、ダウンロード後にご自身でカスタマイズしてください。
ダウンロードは本文最後にあります。

この記事ではグーテンベルクの使い方の部分のみピックアップして解説をします。

Gutenberg(グーテンベルク)の基本的な使い方

まずグーテンベルクの使い方を知る上で知っておかなければならない概念があります。

それがブロックエディターです。

グーテンベルクでは、エディタ―の中でブロックというものを追加していき、そのブロック単位でモードを切り替えて、テキスト入力にするのか、画像挿入にするのか、見出し挿入にするのかを決めていきます。

詳しく解説していきます。

グーテンベルクのブロックという概念

グーテンベルクの管理画面では、次のような感じでブロックを追加していって文章構造を作っていく手法になります。

見ていただくと分かるのですが、ブロックを1つ1つ追加していっています。さらに追加したブロックは+ボタンをクリックするとブロックのモードを変更することができます

ブロックを画像モードにしたり小見出しモードにしたりしながら、文章構造を自由に作っていくのが、グーテンベルクのやり方ですね。

グーテンベルクで使えるブロックのモードをいくつかご紹介

ブロックのモードはたくさんあるので全てはご紹介しませんが、クライアントに納品する際にこれだけはマニュアルに記載しておきたい、というものを5つ抜粋してここにまとめます。無料ダウンロードのマニュアルにもその5つを掲載しています。

こうやってGIF解説するとわかりやすいのですが、クライアントへ紙面で納品する際は書き方が本当に難しいですし面倒です。。是非、無料ダウンロードご活用ください(メアド登録とか不要です)。

テキストの挿入·装飾·配置

まずは段落モードのブロックを作ります。

ブロックの+マークをクリックした後、一般ブロックから「段落」モード選択してください。通常はブロックを追加するとデフォルトで段落モードが追加されます。また、最初にエディタを開いた状態ですでに段落モードのブロックが1つ作られています。

テキストの装飾や配置の編集は、段落ブロックを選択状態にすると段落に直接メニューが表示されます。それとは別に右サイドバーにもテキストのサイズやカラーの編集要素が表示されますので、こちらも編集できます。

見出しを付ける

まずは見出しモードのブロックを作ります。

ブロックの+マークをクリックした後、一般ブロックから「見出し」モード選択してください。H2はh2タグで見出しを作るということですね。H3、H4も同様です。クライアントがH4まで使えるように予めh2〜h4の見出しはCSSで作っておきましょう。

画像の挿入

まずは画像モードのブロックを作ります。

ブロックの+マークをクリックした後、一般ブロックから「画像」モード選択してください。画像はドラッグアンドドロップでも挿入できます。挿入後、画像の周りにハンドルが表示されるので、それでサイズ調整が簡単にできますし、キャプションを入れることも簡単です。

箇条書きリストの作成

まずはリストモードのブロックを作ります。

ブロックの+マークをクリックした後、一般ブロックから「リスト」モード選択してください。ブロックの中にテキストを入力し、次のリストを入力する時は改行してください。番号付きリストにしたい場合は、メニュー(ブロック選択状態で出現します)から番号付きのアイコンを選択してください。

また複数の段落ブロックを同時選択した状態から箇条書きリストとしてまとめることもできます(下図のGIFの最後の方に見本があります)。

箇条書きはulやolで囲まれますので必要に応じてデザインしてください。

引用文表記

まずは引用モードのブロックを作ります。

ブロックの+マークをクリックした後、一般ブロックから「引用」モード選択してください。ブロックの中に引用する文と引用元を入力してください。

引用はblockquoteで囲まれますので必要に応じてデザインしてください。

表の作成

まずはテーブルモードのブロックを作ります。

ブロックの+マークをクリックした後、フォーマット(一般ブロックではなくフォーマットです)から「テーブル」モード選択してください。表の列数と行数を入力できますので、任意の数値を入力して「生成」をクリックして下さい。

テーブル(表)が作成されますので、テキストを入力して表を完成させて下さい。

クライアント納品用グーテンベルクのマニュアル無料ダウンロード

ダウンロードは以下よりお願いします。
現状Keynote版しか作成しておりません。パワポ版は検討しています。

再配布は禁止としますが、クライアントへ納品する際に自由に中身を修正して使っていただいて構いません。
内容がよかったら是非Twitter等でシェアをお願いします。

それでは良いWordPressライフを(´ε` )

 



プロフィール

田中亮行
アキユキ

フリーランスWebデザイナー・エンジニア歴6年。主に企業のホームページの企画・デザイン・開発をしています。

ここでは自分の経験から感じたフリーランスにとって役立つ情報を発信しています。また、「やりたいことをやれる自分になりたい」そのために必要な“セルフマネジメント”についても執筆しています。フリーランスとしての生き方にも関係してくることが多いので参考にしてもらえたら嬉しすです(´ε` )

おすすめ書籍紹介