ブロックエディターを使う３ ファイト！
右側の余白をどうしよう
解決すべき問題と方法
Amazonへリンクする「テキストと画像」や、画像を挿入すると、そのままでは（多分）手を加えることのできない右側の余白が生じてしまうがこれをどうするか。ブロックとして用意されている「メディアと文章｣、「カラム」、「グループ｣（新しく｢ブロック・パターン｣というのもある。）あたりで解決するのかなと思い、少しググってみると、「WordPressのブロックエディタで横並びレイアウトを作成する方法」という記事があった。作成者の西沢直木さんの「「WordPress 入門 テキスト（ ホームページ の 作り方）」のブロックエディターの頁は、昨日も目を通したところで、西沢さんは実用的な記事を作成している。多分、上記のブロックを一般化して「横並びレイアウト」とするのであろう。
ページ・ビルダーを使う
要は、「Page Builder by SiteOrigin」と「SiteOrigin Widgets Bundle」というふたつのプラグインをインストールすると（前者は、既にインストールされていたが、その経緯は記憶がない。後者は、拡張である。）、ブロックの「デザイン」に「SiteOrigin Layout」というブロック（クラシック画面に近いが）が追加され、「列を追加」し、「ウイジェットを追加」で、左は「カスタムHTML」を、右は「SiteOrigin Editor」を（テキストでもいいのだろうが、手を加えることを想定して）選択した。
Amazonへのリンクで試してみよう
「SiteOrigin Layout」で、左に「テキストと画像」を、右にその説明の段落を入れてみた。そしてその下に通常の段落を入れた（なお2024年6月時点で私はAmazonにはリンクしないので、「テキストと画像」が表示されないが、参考までに残存させる。）。
そのあたりを確認した上で、テクノロジーによる脱物質化に希望が持てるのであれば、③反応する政府と④市民の自覚の実現に突き進む勇気がわいてくる。
どうだろう
このままでは、右の段落が長すぎるが、途中で切って、下の段落に続ければ、そんなにおかしくはないだろう。レイアウトはもう少しいじった方がいいが。手間のかかることだが、ブロックである以上仕方がないのかも知れない。もっとうまい作成方法があれば、今後、それを取り入れよう。
解決
いや、まてよ。これは要するに、もともとコードで処理していたことを、カスタムHTMLにするだけだから、もともとのコードを書き込んだらどうだろう。
もともとは、次のとおりだ。
<div style="float:left;padding:10px;">Amazonの「テキストと画像」</div> 本文。回り込んだ文章を解除したいところに<div style="clear:both;"></div>を挿入する。やってみよう。うまくいった。
〇資本主義は歴史上、最も成功した経済システムです。だが、いまやそれが、資本主義そのもの、そして世界を破壊する危機に直面しています。大規模な環境破壊、経済格差、信頼できる社会的な仕組みの崩壊という現代社会の大問題の解決のために、企業や個人はどのような役割を果たせるのか。 〇著者は、株主価値最大化のみを追求することそのものが問題を生み出していると指摘、共有価値の創造、共通の価値観に根差した目的・存在意義(パーパス)主導によるマネジメント、会計・金融・投資の仕組みの変革、個々の企業の枠を越えた業界横断的な自主規制、政府や国との協力が必要不可欠であることを説き、こうした行動には企業に利益をもたらす経済合理性があることを明らかにします。また、政府と市場は互いを必要とし、企業は民主的で自由な社会を支える包摂的な仕組みを強化するために積極的な役割を果たすべきだと提唱します。 〇15年にわたり強い危機感をもって問題解決に取り組んできた著者が、資本主義を創り直すための体系的な枠組みを提示します。
画像で試してみよう
ページ・ビルダーで、アイキャッチ画像に設定した写真を入れてみよう。
でも画像は画像ブロックを使おう
でもまだ画像ブロックは余りいじっていない。そこで画像ブロックでアイキャッチ画像に設定した写真を入れてみて、驚いた。クリックして選択すると、画像の大きさが動かせ、しかも、「配置を変更」で「左寄せ」すると、下の段落の文字が入力するではないか（最初は全幅で、下に文字入力した段落を配置し、そのあとで画像の大きさを動かし、左寄せするとうまくいくようだ。）。
世界各地の山野にいる中型の草食動物。オスは角をもち、メスはたいてい角を持たない。森に暮らし、果実や葉っぱ、ドングリなどを食べる。
一方でシカは若芽、特に稲の若芽を好んで食べることが知られ、そのため農業害獣として地方ではありふれた存在でもある。
日本にはニホンジカが生息している。生息地によりエゾシカ、ホンシュウジカなどの亜種に分類されている。角は毎年春に生え変わり、新しい角が生える。日本でも古くから親しまれた。古くはシシとも。
「鹿」そのものが秋の季語、夏の間に生える茶色に白斑という特徴的な体毛をして「鹿の子」という夏の季語にもなっており、ニホンシカは古代から深いかかわりが存在する。
これでブロックエディターが使える
ブロックエディターに慣れる
ブロックエディターを使うためには、まず「ブロック」という考え、仕組みに慣れ、ブロックを使うときに、どこにどんな指示が出るのかに慣れることが第一だ。普通使うブロックは多くはないから、何回か試してみてその道跡が付けばそんなに混乱しなくなるだろう。
まず、原稿をプレーンテキストで貼り付け、段落、見出しに分け、画像を挿入し、「SiteOrigin Layout」、カスタムHTML、「埋め込み」で当面は間に合う。
多様なブロック
ブロックの数の多さ、複雑さに文句を言いつつ（何が重要かを見抜ければいいのだが）、プラグインで多様なブロックを収集し、できれば便利に使いたいというのが、デジタルエイジの習性だ。
私のサイトでは、次のようなブロックが使える。
Advanced Editor Tools (previously TinyMCE Advanced)…これは定番だ
JETPACK…これも定番だ
LUXERITAS BLOCKS…これはテーマのインストールに伴っている。
その他に
Gutenberg Blocks…これもよく使われるそうだ。
Snow Monkey Blocks…国産
LIQUID BLOCKS…国産
等がある（「WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版」による）。
ただバッティング等するので、良く選んでインストールした方はがいい。
さあ「ファイト！」だ
次は、ブロックエディターからは離れ、サイトを作るときの備忘録を「サイトを作る ぼくたちの失敗｣にまとめよう。