ブロックエディターを使う３　ファイト！

右側の余白をどうしよう

解決すべき問題と方法

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年にわたり強い危機感をもって問題解決に取り組んできた著者が、資本主義を創り直すための体系的な枠組みを提示します。

画像で試してみよう

ページ・ビルダーで、アイキャッチ画像に設定した写真を入れてみよう。

でも画像は画像ブロックを使おう

でもまだ画像ブロックは余りいじっていない。そこで画像ブロックでアイキャッチ画像に設定した写真を入れてみて、驚いた。クリックして選択すると、画像の大きさが動かせ、しかも、「配置を変更」で「左寄せ」すると、下の段落の文字が入力するではないか（最初は全幅で、下に文字入力した段落を配置し、そのあとで画像の大きさを動かし、左寄せするとうまくいくようだ。）。