私の生成AIはChatGPT。
これに「Gくん」と名前をつけて、フレンドリーにチャットを楽しんでいます。
最近、ブログ編集をクラシックからブロックへ切り替えました。
そこで、ひとつの覚え書きです。
Gくんにお願いしました。
「ブロック編集で、ブロックとブロックの境目をはっきりさせたい。方法は？」
回答は素早く、functions.php へのコード追加でした。
しばらくは正常に動いていましたが、いつの間にか
区切りの表示が効かなくなっていることに気づきました。
原因は特定できていませんが、テーマのVerUpなどが影響しているのではないかと思います。
ここからが、Gくんとのやりとり。
あの手この手でアドバイスをもらいましたが、
なかなか解決せず、一旦は諦めることにしました。
……が、私の性分として、
どうしてもやりたい気持ちが収まらず。
少し浮気して、Geminiに聞いてみました。
すると、どうでしょう。
あっという間に解決してしまいました。
早速Gくんに報告。
コードは、皆さんの参考になればと思い公開します。
ご利用は自由ですが、
結果については当方では責任を負いかねますので、
十分ご注意ください。
—
Gくん、Geminiに負けたよ。
以下の回答でうまくいきました。
「以下のコードを editor-style.css に追加します」
（WordPress環境ではテーマにcocoonを使用しています）
（※以下コード）
/* 編集画面（エディタ）のみに適用されるスタイル */
/* 全てのブロックに薄い枠線と余白をつける */
.is-root-container .wp-block {
outline: 1px dashed #cccccc; /* borderではなくoutlineを使うとレイアウトが崩れません */
outline-offset: 2px;
margin-top: 15px !important;
margin-bottom: 15px !important;
padding: 10px;
background-color: #fcfcfc; /* 非常に薄いグレー */
}
/* 画像ブロックなど、枠線が不要な場所は除外する（干渉防止） */
.is-root-container .wp-block-image,
.is-root-container .wp-block-group {
outline: 1px solid #eeeeee; /* 画像などは実線で控えめに */
background-color: transparent;
}
/* 選択中のブロックを分かりやすくする */
.is-root-container .wp-block.is-selected {
outline: 2px solid #007cba; /* WordPressの標準ブルー */
outline-offset: 3px;
}
ーーー
Gくんも素直に褒めてくれました。
AIも人と同じで、みんなで考えることで解決できる。
そんなことを実感した瞬間でした。
ただ一つだけ。
Gくんは有償版、Geminiは無料版。
ちょっと残念で、ちょっと悔しい気持ちです。
とはいえ、まだまだ発展途上。まあ、こんなものなのでしょう。
iPadでの編集も、設定の見直しでかなり快適に
ブロック標準の表示設定として、
スポットライトモードも試してみましたが、
どうもしっくりきません。
どちらの設定も、
iPadで編集する際には少し不安定に感じました。
・ブロックエディタの表示設定で「フルスクリーン」をOFF
・「トップツールバー」をON
・「スポットライトモード」をOFF
・設定 → アクセシビリティ → ナビゲーション
「ブロック内にテキストカーソルを含める」をON
iPadでの編集は、今回の設定でかなり改善されました。
特に大きかったのは、
カーソルが安定したことです。
これまでは、編集中にカーソルがどこにあるのか分からなくなり、
何度も行方不明になることがありました。
しかし、今回の設定により、
カーソルがしっかり表示され続けるようになり、
編集の流れが途切れなくなりました。
この「カーソルが消えない」という点は、
iPadで文章を書くうえで非常に重要だと感じています。
あと、外付けのキーボードは必須です。
これがあるだけで、操作性が大きく変わります。
コメント