IT・AI・DX,日々雑感

右側の余白をどうしよう

解決すべき問題と方法

Amazonへリンクする「テキストと画像」や,画像を挿入すると,そのままでは(多分)手を加えることのできない右側の余白が生じてしまうがこれをどうするか。ブロックとして用意されている「メディアと文章」,「カラム」,「グループ」(新しく「ブロック・パターン」というのもある。)あたりで解決するのかなと思い,少しググってみると,「WordPressのブロックエディタで横並びレイアウトを作成する方法」という記事があった。作成者の西沢直木さんの「「WordPress 入門 テキスト( ホームページ の 作り方)」のブロックエディターの頁は,昨日も目を通したところで,西沢さんは実用的な記事を作成している。多分,上記のブロックを一般化して「横並びレイアウト」とするのであろう。

ページ・ビルダーを使う

要は,「Page Builder by SiteOrigin」と「SiteOrigin Widgets Bundle」というふたつのプラグインをインストールすると(前者は,既にインストールされていたが,その経緯は記憶がない。後者は,拡張である。),ブロックの「デザイン」に「SiteOrigin Layout」というブロック(クラシック画面に近いが)が追加され,「列を追加」し,「ウイジェットを追加」で,左は「カスタムHTML」を,右は「SiteOrigin Editor」を(テキストでもいいのだろうが,手を加えることを想定して)選択した。

Amazonへのリンクで試してみよう

「SiteOrigin Layout」で,左に「テキストと画像」を,右にその説明の段落を入れてみた。そしてその下に通常の段落を入れた。

そんなことを考えていて「モア・フロム・レス  資本主義は脱物質化する:アンドリュー・マカフィー」という本を目にした。要は,アメリカを含む先進国で資源消費が減少しつつあり(脱物質化),しかも付加価値は増加している。それは,①資本主義と②テクノロジーの力によるのであり,更にこの「モア・フロム・レス」を支えるのは,③反応する政府と④市民の自覚,併せて<希望の4騎士>であるとする。著者は,MIT経営大学院の先生で,私も共著だが「機械との競争」や「一流ビジネススクールで教える デジタル・シフト戦略―テクノロジーを武器にするために必要な変革 」を持っていた。立論は分かりやすいが,問題は,資本主義の論理に従ったテクノロジーの駆使によって先進国で資源消費が減少しつつあるのかという事実確認の問題と,そうではあっても,これらの先進国のフットプリントは大幅に正常値を超え,減少しつつあるという趨勢だけでは駄目ではないのかということである。

そのあたりを確認した上で,テクノロジーによる脱物質化に希望が持てるのであれば,③反応する政府と④市民の自覚の実現に突き進む勇気がわいてくる。

どうだろう

このままでは,右の段落が長すぎるが,途中で切って,下の段落に続ければ,そんなにおかしくはないだろう。レイアウトはもう少しいじった方がいいが。手間のかかることだが,ブロックである以上仕方がないのかも知れない。もっとうまい作成方法があれば,今後,それを取り入れよう。

解決

いや,まてよ。これは要するに,もともとコードで処理していたことを,カスタム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対応版」による)。

ただバッティング等するので,良く選んでインストールした方はがいい。

さあ「ファイト!」だ

次は,ブロックエディターからは離れ,サイトを作るときの備忘録を「サイトを作る ぼくたちの失敗」にまとめよう。

たくろう,みゆき,どちらのファイトも捨てがたい

IT・AI・DX,日々雑感

Amazonへのリンクと画像の挿入・処理

Amazonへのリンクはできるか?

クラシックエディター

このWebでは本を紹介するときは,できるだけAmazonにリンクするようにしている。
Amazonのアソシエイトツールバーには,「テキスト」,「画像」,「テキストと画像」があって,中身を少しでも紹介した場合は,本当は「テキストと画像」を貼り付けたいのだが,これは,テキストエディターで,「テキストと画像のコードを貼り付けた上で,iやその他のコードや文章も挿入して整形しなければならず面倒なのでいつしかやらなくなり,書名,あるいは(Amazonにリンク)に,「テキスト」でリンクを貼り付けることがほとんどになった。ブロックエディターではきっと簡単にできるに違いない?

ブロックエディター

「テキスト」でのリンクは,これまでどおり,該当するテキスト(書名等)を選択して,「ブロックツールバー」のリンクボタンを選択すればできる。

仏像[完全版] 心とかたち

「画像」の貼り付けは,右側余白はともかく,カスタムHTMLでできる。

しかし,「テキストと画像」は,カスタムHTMLにそのまま貼り付けても表示されなかった。そこで,昨日思いついて,IWPで<div> </div>で囲んだら表示されたのだが,今日,私の環境では表示されかった。でも他のパソコンでは表示されたそうだ。そうか,前にもあった。これは多分,広告ブロックソフトのせいだ。なお,<div> </div>で囲まなくても表示される場合もあり,こちらが正しいのかも知れない。

これで表示されたが,右側余白が問題だ。これは画像と同じ問題だ。

このままでは「外は白い雪の夜」

画像の挿入・処理

画像(写真)を用意する

画像(写真)(写真で代表させよう。)の挿入・処理というが,その前に画像がサイトにアップロードできる形で,用意されていないと話にならない。ここは,サイト作成に関わる私の数ある弱点のうちでも,1,2を争う?

写真を用意してメディアライブラリーにアップロードする

整理して考えると,
① サイトにアップロードする際,直接記事に入れ込むか,いったんメディアライブラリーにアップロードしてから入れ込むかという問題がある。容量の問題と,管理(代替テキスト,キャプションの記入)の問題から後者をとるべきだとされる。
② では,メディアライブラリーにアップロードする際はどうするか。これも面倒になるが,容量の問題を考えるといったんどこかにフォールダーを作り,容量,画質,切り取り等の加工を経たファイルを集めるのが良い(メディアライブラリーでの調整,加工は限界がある。)。
③ 写真を加工するのは,たまたま「Pixlr」というブラウザーで使う画像編集ソフトの「永久版」がポイントも使えて安かったので購入した。Flashが使えなくなるのに応じて,システムを変えているようだが(だからWebの説明も乏しい。),とにかくクリックすれば分かるでしょうということらしい。
④ このソフトで加工する場合,「画像を開く」か,「URLを読み込む」かである。前者が多いだろうが,その場合もいったんパソコンに保存し(Web等からダウンロードし(「ダウンロードファイル」に入る),その画像を開いて加工することが多いだろう。この場合も,「Pixlr」で保存すると「ダウンロードファイル」に当初名に(1)等が付加されて保存されるので問題はない。
いつも③④をするのは面倒だが,慣れだろう。なお,メディアライブラリーにアップロードするとき,少し大きめの写真をアップロードしておくといろいろなサイズに加工されるようである。アップロードの際に,容量を削るプラグインもあるが,写真は容量が大きいので直接アップロードというわけにはいかないようだ。
ところで写真はいろいろなルートで用意出来るだろうが,その写真固有の意味が問題になるのではなく,単に装飾に近いものは,「Pixlr」の「ストックフォト検索」で十分かも知れない。ついでに「Pixlr」でヘッダー画像も作ってみたが,最初にしてはまあまだろう。

サイトでの写真の挿入・処理

テーマをLuxeritas(ルクセリタス)に変更

私は,一昨日(2020/12/12)からサイトに使うテーマをCocoonからLuxeritas(ルクセリタス)に変更した。いずれも無料だし前者も広く使われているので文句を言うのはどうかとは思うが,Cacoonのいろいろな説明(特にAmazonアフィリエイト)をまどろっこしく感じたことと,Luxeritas(ルクセリタス)は,管理画面の設定だけでほぼ終わりなので(+子テーマでの若干のCSS。私のレベルでは創KENブログの説明で十分だ。),これもエイヤーだ。
そしてルクセリタスでは,本文には,大きなアイキャッチ画像が入らないので,アイキャッチ画像も作ってみようという気になっている。サイドバーに小さな並ぶのは楽しい。

画像と文章を並べる

ここでも問題は,画像とテキストの配置だ。「メディアと文章」というブロックがあって,画像と文章を横並びに並べることはできるようだが,文章に画像を埋め込むという私のイメージとは違う。でもひょっとしたら私のイメージを変える方がいいのか。右側余白と文章の下への回り込みが課題だ。

やはり「外は白い雪の夜」

ブロックエディターを使う3は「ファイト!」だ!

もう26年前だ

IT・AI・DX,日々雑感

WordPress5で導入されたブロックエディターに触る

孫娘がチョークで描いた絵
孫娘が描いた絵 じいじが好きと永遠の嘘をついてくれ

大分前からWordpressの記事作成用のエディターがGutenberg(ブロックエディター)に変わることがアナウンスされ,1年ほど前,Wordpressがバージョン5にアップデートされたときにブロックエディターが実装され,2021年で今までのエディター(クラシックエディター)は使えなくなるとのことだった。最初の頃は,Gutenberg(ブロックエディター)は悪評紛々で,少し覗いてみても??の連続で近寄りたくない存在だったが,時間もたち,大分使いやすく改良されたらしいし,そろそろ使い始めないとクラシックエディターが使えなくなったときに対応出来なくなるので(でも恐らく猛反対する「守旧派」が,クラシックエディターを存続させる気がする。),いささか遅きに失したが,ブロックエディターに触ってみることにした。😪

ほぼテキストだけのユーザーにブロックエディターは意味があるか?

ブロックエディターは,テキストや画像等をブロックという単位毎に編集し,これを組み立てて記事全体を作成するというのが基本的なアイデアのようであり,ブロックの位置や変更が,HTMLやCSSの知識がなくても簡単に行え,美しい記事が作成出来るという触れ込みである。記事の装飾部分が大きくエディターに取り込まれたということであろうか。
でも今私が作る記事はほとんどテキストだけだし,画像の挿入やAmazonへのリンクは面倒だが,何とかできないことはないから(だから余り使わないのだが),本当はクラシックエディターで十分なような気がする。でもそれではいつまでたっても時々撮る下手な写真もなかなか披露出来ないから,とにかくまずブロックエディターに触ってみよう。😡

第1の扉…練習舞台の設定

ブロックエディターを,今,作成・運用しているサイトで試用すると,いろいろな混乱が起きるのは必至だから練習用のサイトを作り,慣れるまでそこで使ってみることにしよう。レンタルサーバーにもう一つ練習用のサイトを作るのもいいかも知れないが,それでは何が起こるか分からない気がするので,自分のパソコンだけでWordpressを動かせる,前にも少し使ったことがあるInstantWordPressというソフトを使ってみることにした(ただし最新のバージョンは起動しないようだ。作者に問い合わせたら少し古いバージョン(5.3.4)を使えという指示があったというネット記事があった。そのせいか,WordPressにPHPの更新が必要という指示が出るので,使えないプラグインはあるかも知れないが,ブロックエディターを使う限りでは関係ないだろうから気にしない。ただ使える状態が確保出来たら,あれこれバージョンをいじらない方が良さそうだ。)。
それで,2,3日、こわごわと触り,あとは,実際のサイトで使い,下書き保存しながら練習した。🏋️‍♀️

第2の扉…ブロックエディターをメインにしてクラシックエディターも使えるようにする

今Wordpressをインストールすると,当然、ブロックエディターを利用することになる。そこで「Classic Editor」というプラグインをインストールすると,設定画面で,どちらをメインに使うのか,他方に切り替えできるようにするかという選択ができるようになる。私は,Iブロックエディターをメインにし,クラシックエディターに切り替えることが出来るようにした。それぞれのエディターを探せば他方への切り替えボタンが出てくる。😍

第3の扉…ブロックを積み上げて記事を作成する

通常使うブロックは,段落,見出し,リスト,画像等である。ブロックエディターで記事を作成するときは,まず任意のブロックを指定して,そこにそれに該当するテキスト,画像等を入力,挿入し,次々にブロックを積み上げていき,適宜それを変更する。ブロックはかなり多様であって,今までのクラシックエディターでは作成出来なかったり面倒であったりしたコンテンツが、簡単に作成出来るようになった(という触れ込みである。これは間違いないだろう。)。
ただその代わりに,何かをする表示の場所,内容が,可変的で,しかも操作がとても複雑になった。これに慣れることがブロックエディター習熟への第一歩のようだが,でもこれは,れまでのエディターやワープロとは全く違うコンセプトによる作りで,なぜこんなものに習熟しなければならないのだろう。私は,勝手に手を加えるWORDに未だに慣れることが出来ないが,それを何倍にもした奇妙な動作をする。
私のような芸のないテキスト派には,無用の長物のような気もするが,ただ下手な写真を多用できるように,習熟しようというのが,かすかなモチベーションだ。😅

第4の扉…何が必要かを冷静に考えよう

ブロックエディターは,少しずつブロックを作り,それを積み上げて記事を作成するというイメージだが,普通記事を作成するときは,そんなことはしないのではないだろうか?
文章を書き,見出しを入れ,写真やその他のメディアを用意して記事を作成する。その際,ある指定をしてテキストや画像を入力,挿入したり,逆に入力,挿入してから指定をしたり,普通に(そして大部分)することは,そんなに違わない。ブロックエディターはその後のレイアウト,装飾のための「編集ツール」と思える。
だからまずこれまでクラシックエディターでやっていた,文章を書いて貼り付け,見出しと段落に区分けする作業について,ブロックエディターでストレスなしに行えることが最も重要だ。「編集」はそのあとの楽しみにしよう。👨‍🎓

文章を書いて貼り付ける

  1. そのためには,別のワープロ(エディター)で作成した文書を,ブロックエディターに「プレーンテキストとして貼り付ける」(chromeでは右クリックで出てくる。または,ctrl+shift+v)ことが第一歩となる。そうしないと全部がひとつのブロックになり面倒くさくなる。
  2. ②その際,WORDでは,enterで独立した段落になり,shiht+enterは行換えになるようだが,一太郎では,enterだけでは行換えになり,空白行を入れないと段落にならないようだ。ただそれを気にするより,とにかくプレーンテキストで貼り付けることだ。そうすれば,ブロックエディターでenterで段落に分けられる。

第5の扉…七変化

さて,ブロックエディターを使うための様々なインジケーター(指示器。本稿では,仮にこう呼ぶ。)を概観する。

タイトルと本文

最初に記事を作成する画面では,タイトルと本文の欄(ブロック選択以前の時もあるので,仮にこう呼ぶ。)が出てくる。

まずブロックを選択する

+の記号が画面の左上にあり,適宜,作業をしようとする欄の右や真ん中下にも出てくるが,ここをクリックすると多くのブロックの種類を選択できるメニューが出てくる。本文に「/でブロックを選択」と表示されているときも半角の「/」を入力するとブロック選択メニューが出てくる。

様々なインジケーターと表示されるメニュー

画面の左上の+から何個かのボタンで構成されるインジケーターを①「ヘッダーメニューバー」,右側の「下書き保存」「プレビュー」「公開」で構成される④「公開メニューバー」,その右のボタンで表示非表示が切り替わるサイドに表示される③「サイドメニューバー」(「投稿」と「ブロック」のオプションメニュー),一番右の3点縦バーをクリックすると表示される「表示メニューバー」から構成される。
これとは別にブロックをクリックするとそのすぐ上に②「ブロックツールバー」が表示され,その一番右の3点縦バーをクリックすると「詳細設定」が表示される。ただし,これは私には作業の邪魔なので,⑤で「トップツールバー」にして「ヘッダーメニューバー」と連続して表示されるようにした。🤔

作業の手順

+や①で,ブロックの性質を決め,②と③「ブロック」で,「ブロック」の内容を編集するというのが,ブロックエディターでする主たる作業だ。
あとは,③「投稿」と④は,今までもやっていた作業が,ここに表示されているということに過ぎない(「カテゴリー」や「アイキャッチ画像」はここにある。)。
⑤で表示を切り替えられる(以上は,私の環境での表示である。インストールしているプラグインでもメニューは大きく変わる。) 。

さあこれでうまくいく

第4の扉に書いた「文章を書いて貼り付ける」作業が出来れば,あとは,第5の扉のブロックエディターの「七変化」をj駆使し,記事での「画像処理」と「Amazonへのリンク」をこなすだけだ。

「さあこれでうまくいく」と「永遠の嘘をついてくれ」。なおライブ版は権利問題があり,下のものは中国語翻訳だがさてどうなるだろうか。

でも続く記事は「外は白い雪の夜」だ。😱

余りにも有名な拓郎+中島みゆきのライブ