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へのリンク」をこなすだけだ。

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

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

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

ブログ山ある日々(すべて)

ブロックエディターを試用しつつ,テーマをLuxeritas(ルクセリタス)に変更しています。アイキャッチ画像も作成しようと思っています。しばらく作業中で,ご迷惑をお掛けしますす。カテゴリーはどこにあるんだ?