コンテンツへスキップ
広告

WordPress の Gutenberg ブロック・エディタを使ってみた

今までは iPad のWordpress アプリでブログを書いていましたが、あまりに使いにくいのでウエブ版にスイッチしてみました。今回は、賛否両論ある Gutenberg の使い勝手について、まとめてみたいと思います。

ブログを新規作成する場合の初期画面はこのようになります。ここを見るだけでは、これまでと大きく変わるようには見えませんね。

タイトルの下の空白部分をタップすると吹き出しが出て来て、段落や画像といった言葉がかいてあるのがわかります。これはよく使うブロック要素。

リ右上にある矢印をタップすると、リストを開いたり畳んだりすることができます。使っているうちによく使うブロック要素が一番上にまとめられてくる機能のようです。

下書きに保存してあるブログを開くと、テキスト部分には「クラシック」の表示が。

右上をタップすると、「ブロックへ変換」とありますのでやってみます。

書いたものがタイトル、段落というように要素ごとに分割され、四角い枠の中に入っていますね。これをブロックと呼ぶようです。

別ブログですが、ブロックに変換されたものはそれぞれに編集可能となります。例えばタイトル部分をクリックするとこのように表示され、一括してタイトル属性が適用されていることがわかります。

ちょっとした文章でも追加したいと考え、段落とタイトルの間をタップすると「+」マークが出て来ます。

さらにタップすると、吹き出しがてきます。ブロックには様々な種類の属性があり、予めこれらを決めて追加して行くということのようです。最初は慣れが必要ですが、ブログを書く際にパーツに分けて組み立てて行くという感じです。

ブロックは単位ごとに移動させることができたり、「ビジュアル編集」「HTML編集」「ブロックを削除」などが可能。全体を書き終えた後に再度文章の構成を考える時には便利です。

段落テキストをビジュアル編集で見ているところ。

少し細かいことをしたい時にはHTML編集にスイッチさせると、このように直接スタイルを書き込むことが可能になります。

CSS スタイルは、コントロール画面の「カスタマイズ」をタップ。

テーマ内のCSSを直接書き込むことができるので、自分で書いたカスタムCSSを保存しておくことができます。

ブロック要素は段落だけではなく、画像もOK。

シンプルに1枚だけアップロードする場合に加えて、複数枚をギャラリーとすることもできます。


このブログはiPadのスクリーンショットを先に取っておいてアップした後にテキストを埋めていくという方法を取りました。従って、アップした画像の間に順次段落ブロックを追加して行くという作業。

文章だけ先に書きたい時は、あらかじめ用意してあるテキストエディタ上のCSSも再現させておいたテンプレートファイルをあらかじめ用意しておきます。段落のブロック要素は「<p></p>」で囲まれますので、適宜コードを入れながら書き、終わったら「<body></body>」部分だけを WordPress にコピペ。

自動的にブロック化してくれるので、写真を埋め込みながら仕上げて行きます。

カテゴリー

iPad Pro

広告
%d人のブロガーが「いいね」をつけました。