【WordPress】HTMLコーディング大好きっ子用 ブロックエディタの使い方

ビジネス:スピリチュアルブログ

ブログシステムWordPressの新エディタ・グーテンベルク(ブロックエディタ)。
実装当初はあまりの大きな変化に、戸惑いました。しかし、2カ月経った今、そこそこブロックエディタでも記事を作成できるようになっています。

なぜそこそこ使えるようになったかというと、ブロックエディタでのHTMLの打ち方がわかってきたからです。

グーテンベルクをdisっていた私

筋肉少女帯 – 日本印度化計画PV

俺にカレーをくわせろーHTMLを打たせろー!俺はいつでもコードにこだわるぜェー!!

そう、オイラはロートル人間。HTMLを打つのが大好き。HTML打ってたら脳汁出て幸せになれるアレな体質。ナチュラルハーイ飛びます飛びます!ブロックをクラシックにしってしまえl!!

そんな人間にWordPressの新エディタ・Gutenbergだ!?直観的に使えるブロックだ!?ふざけるな!!
良いか、オイラは直打ちでコーディングしてやるぞ!見てろグーテンベルク!貴様などコードエディタの刑だ!!ワハハハハハハハハ!

ぽちっとな

これが間違いだったんです……。
コードエディタで直打ち、超絶やりにくい!!!

なんなの!?勝手に<p>挿入すんなよ!<br>要らないよ!いや、そこ改行しなくていいから!え、何なのアンタ!?勝手に私が打ったコード改変しないでください!どんだけ意味のないpタグと&nbsp; 追加好きなのよそしてできあがる意味のない不自然な空白ううううう!!

と発狂しまくってWordPress5.0の新エディタが使いにくいを書きました。

もうさー気持ちよくHTML打てないエディタなんてクソでしょ?
こちとらテレホタイムでCGIカスタマイズしてICQでカッコーしてたクチよ?HTML直打ちできないで何のために生きてるのヘイヨーカモン!

とブリブリ切れておりました。
――でもまあ、全然別物として見ればいいところもあるのかもしれない。
そう思って、少しずつ使ってみたのが下の記事。

2ヶ月経った今では、クラシックエディタと変わらないくらいの時間で記事作成できるようになりました。
グーテンベルグでどうやったらHTMLを快適にコーディングできるかをつかめたから!

ブロックエディタで快適にHTMLを打つ方法

Twitterなどを見てると、コードエディタにしてHTMLコーディングして爆死している人は私以外にも結構見当たりました。そして大体「クラシックエディタ最高だよね」という流れ。

ですよねー。クラシックエディタの「ビジュアル」「テキスト」のノリで「ビジュアルエディター」「コードエディター」って選択しちゃいますよね。

でもコードエディタ―の挙動は先ほど書いたようにもうクソオブクソクソクソなので、基本使いたくない感じです。使うのは複数ブロックコピーして他記事にペーストする時くらいですね。

HTMLを直打ちするにはコードエディタは基本除外。そっちのほうが良いです。
クラシックブロックも、「ビジュアル」編集なので「テキスト」で編集してきた人間にとっては使いにくい。

では具体的にどういう方法を使ったらよいのか。以下に書いていきます。

カスタムHTMLブロックを使う

フォーマットに「カスタムHTML」というブロックがあります。
このブロック内では、HTML直打ちでコーディングしていけます。

画像やカラム挿入など、少しデコりたい場合は他ブロックを使って、基本はカスタムHTMLブロックでガーッとコーディングすると良きです。

閉じ忘れとかあるとツッコミ入れてきますが、コードエディタでやられたような無慈悲なタグ挿入とかはありません。あー余計なことされないって快適!

ブロックをHTML変換する

ほとんどのブロックはHTMLに変換して編集することができます。

HTML編集したいブロックの三点リーダーメニューを選択し、「HTMLとして編集」を選びます。

すると、↓こんな感じでHTMLで編集できるようになります。

元に戻したいときはまた…を押して「ビジュアル編集」にすればOK。

ブロックと直打ちの良いとこ取りをしよう!

以上の操作がわかっていると、ブロックを使ったほうが都合のいい時だけブロックを使って、あとはHTMLでダカダカダカダカッと直でコーディングできます!

画像を多用したりデザインを凝りたいときにブロックエディタは便利ですので、良いとこどりして使えるんですね!

WordPress 5.1 “ベティ”では「エディター全体のパフォーマンスの向上に力を注ぎました」とありますので、ブロックエディタもより使いやすくなっているのかなと思います。

一応5.1にアップデートして使ってみていますが、体感で向上しているという感じは……うーん?
確かにカテゴリー表示は若干早くなった…かな? 前はブロックエディタでカテゴリ出そうとすると、3秒くらい出てこなくて「アレッ!?表示されないぞ!?」って一瞬困ってたんですよね。それが1.5秒くらいになってる…かな?

やっぱり現Gutenberg(ブロックエディタ)は使いにくい感は否めません。改善してもらえると嬉しいです。「そこ!そこにブロックを追加したいんじゃないんだよ!こっちなんだよ!」「他のブロック編集したいのに、選択できねえええ!」「いや、そこでメニュー出るの、邪・魔!」みたいな挙動でしょっちゅうイラッと来てます。
あと、↑みたいにHTML編集で文字色指定したらいちいちBold(太字)になるのなんなん……。勝手にclass=”bold”追加するのやめてくれません?

わたしのようなHTML直打ち大好きなコーダーにも、より快適に使えるブロックエディタになってほしいですね!

Nozomi
Nozomi

HTML直打ちはいいぞっ!
HTML直打ちってばマジ最高!
HTML直打ちすれば人生は楽しい!!

ちなみに、クラシックエディター(プラグイン)を入れて投稿設定で「 ユーザーにエディターの切り替えを許可」しておくと設定(ネジアイコン)→文章→エディターで、ブロックエディタを使うか使わないか簡単にその記事ごとに設定できます。

ここでエディターを記事ごとに選択できる!

だから、「たまに使ってみるかな」なんてこともできるんですよ!Cocoon設定でも切り替え可能です。

あんま関係ない話の蛇足

刀剣乱舞というゲームがあります。
そのゲームで「全員遠戦(先制攻撃)出来る状態で誉を取るメカニズムが謎」と話されていました。
すなわち、「同条件下でのMVP判定の基準がわからん」という。

その基準が検証されて判明したんですよ。

この判定基準を持ってきた人、すっごいプログラミングのセンスあるな~!!って感心しました。

ある結果を判定するために「AならB。AじゃなくてCならD。AでもCでもなかったらE」って「if」を並べていきますよね。
そして、この場合のMVP判定の仕方は、キャラ入手順で行われていたんです。要するに、絶対条件が被らない(どっちが若い数かハッキリと決まっている)ので、「if」を考えなくていいんです。これが能力パラメータ準拠だったりすると「打撃が同値の時、どちらを優先するか」とか、また条件が増えちゃうんですよね。

それだけコードを減らしてシンプルにできる。
読み込みが減るのでプログラムも軽くなる。
頭いいな~!って思いました。

わたしは色んな人の書いたプログラムをせっせかせっせかいじるのが20年前からずーっと大好きだったので、ソースコードを見て「この人すごいなああ~」「どうしてこんな回りくどいコード書くのよ意味わかんない」って感じることがあります。

今回のこの刀剣乱舞の判定基準を組んだ人は、多分「うわーきれいなコード書くなあ」タイプの人なんじゃないかなーと思った次第です。

タイトルとURLをコピーしました