最大の敵であり、仲良くなれば超優秀な「ブロックエディタ」　Vol.9（石川編3）

このnoteは、本のPR会社QUESTO代表の黒田剛、Webサイト制作のプロであるKotaこと田中俊行、出版社勤務を経てフリーの編集ライターになった石川奈都子（LUCKY NUTS）によるリレー連載です。編集は石川が担当。

ホームページを自分で作ることでキャリアを棚卸ししたり、SNSにない強みを持つビジネスツールとして活用する方法を伝えられないか？　そんな思いから、この連載が始まりました。
フリーランスに限らず会社員でも、仕事への思いや作り手の顔が見えるホームページを持つことは新たな出会いやビジネスチャンスに繋がるはずです。

今回は、Webサイト制作のシロウトである石川がWordPressで一番手を焼いた入力機能「ブロックエディタ」と付き合うコツについて書きます！

ホームページに自分の担当作品リストを載せたい！

前回は、業務でそこそこPCを使いこなせると思っていた私（石川）が、初心者でもホームページを作れるソフト「WordPress」に手も足も出ず、ドツボにハマったとお伝えした。今回の話は、その具体的なエピソードだ。

複雑な管理画面（ダッシュボード）の中でいじるべき所がわかってきたので、マニュアルを参照しながらページを作り始めた。とはいえ見本通りにするわけではないので、他のサイトを参考にしながら作るしかない。

特に、私が黒田さんのホームページで一番参考にしたのが、電子書店にリンクさせた担当書籍リスト。

彼は本のプロモーション、私は編集という役割の違いはあるが、ホームページを職務履歴書として活用するなら、自分が担当した本の内容やレビューをすぐに閲覧してもらえるこの方式が便利だ。

ネット検索でも見当たらないページを作るには？

でも、一般的でないページの作成方法はマニュアルに載っていないし、ネット検索でも見当たらない。なぜなら需要が少ないから。

この担当書籍リストのように、訪問者を外部サイトへ誘導するのは本来SEO的にはデメリットだが、このホームページは検索上位を目指すのが最大の目的ではないので、ひとまずこれでよし！

他にも、ブクログなどの本棚作成サービスで関わった本をリストアップすることもできるが、自分のホームページに載せるのが手っ取り早い。黒田さんを見習って、トップページに担当書籍リストを置くことにした。

通常、随時更新して関連したものと紐付けていく記事の場合は「投稿」を使い、「業務案内」や「お問い合わせ」など単体で独立したページは「固定」を使用する。

投稿機能は「お知らせ」や「ブログ」などのカテゴリーやタグを設定できて、カテゴリー別に表示される便利な特長があり、使用頻度が最も高い。担当書籍リストは、そこだけで独立したページなので固定機能で作成した。

記事を作成するためには「エディタ」と呼ばれる入力機能を使うのだが、2018年に発表されたWordPress5.0から正式名称Gutenberg（グーテンベルク）という新しいブロックエディタが登場。この高機能すぎる「ブロックエディタ」こそが、私がWordPressに悪戦苦闘した最大の原因だった。

レイアウト変更が自在で多機能なブロックエディタ

ブロックエディタを使うと、画像や動画の挿入、文字装飾のほかにレイアウト変更が自在にできる。写真や文章の配置を変えたり、「詳しくはこちら」など別のページに飛ばすボタンもプログラミングなしで作れるのだ。

一般的なブログサービスがフォーマットの仕様そのものをいじることはほぼできないのに比べると、SNSで投稿した記事や動画も自在に埋め込めるブロックエディタは、WordPressならではのとても便利なツールだ。

しかし、HTMLやCSSなどプログラミングの知識なしで簡単にWebサイトを作れるといっても、WindowsでOfficeなどのソフトしか使ってこなかった私には、ブロックエディタの入力方法は慣れるまでものすごく大変だった。

例えばWordでは挿入やレイアウトなどがツールバーに表示されるが、ブロックエディタでは＋マークが角にポチッとあるだけで、やりたい操作を探すのも、そこをクリックして表示されるアイコンも？？？の連続だった。

WordやExcelはマニュアルを読んだりしなくても使えるようになったので、ブロックエディタもそんなもんかと舐めていたのだが、これが大間違い。全然思ったように作業が進まなくて嫌気が差し、2週間も放置してしまった。

結論から言うと、私のようにマニュアルとにらめっこしてウンウン悩んでいるのは時間のムダ。Kotaさんのようなプロに正しい方法を教わるのが一番近道だが、基本操作を動画などで確認し、例えば「WP  ブロックエディタ　カラム　使い方」とわからない単語をネット検索するとマニュアルから探すより断然早い。

初耳の単語「カラム」とは何ぞや？

ちなみに「カラム (column)」とは、新聞や雑誌でおなじみの「コラム」と同じラテン語の「円柱」が語源で、IT用語では「縦の列」を意味する。Excelのセルが縦に並んだ列も、カラムと呼ぶそうだ。初めて知った！

WordPressでは、カラムブロックで並列で表示するコンテンツの数や大きさを変更するので、絶対覚えておきたい機能だ。

例えば私と同じ担当書籍リストを作るには、1つのブロックに画像、別のブロックにテキストを挿入してグループ化。それを4つ作ってshiftでまとめて選択し、カラムでくくる。すると、1列に4冊の本の情報（４カラム）が表示される。それを繰り返すだけだ。

こちらのサイトに、上記の方法が詳しく動画で解説されている。それ以外にも、グループ化したものを複製して増やすなどの方法もある。私の場合は、適当に複製したらカラムがぐちゃぐちゃに絡まって作り直しになった。

カラムの作り方も何種類かあり、どれが正解というものではない。いろいろなサイトを参照し、自分がしっくりくるシンプルな方法を見つけよう。私は、結局Kotaさんにzoomで画面共有して基本操作から教えてもらった。

ブロックエディタも基本操作がわかれば、そこまで複雑ではない。しかし、「幽霊の 正体見たり 枯れ尾花」のようなもので、難しいと思い込むと「できない！」と脳に負荷がかかり、実際以上にハードルを上げてしまう。

自分で何も調べず他人を当てにしまくるのは迷惑な話だが、煮詰まって投げ出すくらいなら誰かに頼ったほうがいい。ブロックエディタの使い方がわかったら、後の作業は楽勝だった。もちろん、作業手順以外の所にも落とし穴はあったのだが……。それについては、次回お伝えしたいと思う。