ブログ

これはプラグイン版のGutenberg（ver 8.5.1）を有効化して確認しています。UI等は変更になる可能性が大いにあります！（現に、8.4からブロック選択のUIが変わっています）プラグインを入れれば同様の動作は確認 […]

WordPress 5.5で、ブロックエディターに機能が追加されます。その名も「ブロックパターン」！ 新しいUI（※）と一緒にチェックしていきましょう。 これはプラグイン版のGutenberg（ver 8.4）を有効化し […]

WordPress 5.4にて、editor-gradient-presetsというサポートが追加されました。 まだどんなブロックにも追加できるというわけではない（現時点ではカバーやボタンのみのようです）ですが、特にボタ […]

WordPress Tavernで取り上げられた、Gutenberg Template Libraryを試してみました。 ブロックそのものを作るわけではない 流し見時点で勘違いしていたのですが、ブロックを生成するJSコー […]

「最新の記事」を取得するブロックがありますが、サムネイルを取得したり、好みのHTMLを書き換えたりするような自由度はありません。 そこで、今回はAdvanced Posts Blocksという、投稿を取得するブロックプラ […]

WordPressを新規インストールしたときに「カスタマイズ」からトップページや投稿記事、メニューなどが用意できる機能があるのは知っていますか？（※ WordPress4.7以上） リリース当初はクラシックエディターでし […]

テーマにCSSを用意することで、ブロックにもCSSを当てることができます。 どんなブロックがあるか、どういうHTMLが生成されているのかは当サイトのブロック一覧でまとめていますので、ぜひ参考にしてくださいね。 一般ブロッ […]

例えばボタンのブロックは、「塗りつぶし」と「アウトライン」が選べますが、新たに自分でスタイルを追加することができます。 段落や見出しといったブロックはもちろん、グループやカラムといった、いわゆるインナーブロックにも使える […]

左上にあるiのマークをクリックすると、現在書いている記事のコンテンツ情報がチェックできます。 今自分が何文字くらい書いているのか、ブロックは何個使っているのかといった情報の他、見出しを使っていれば文書構造のチェックもでき […]

デフォルトでは、ブロックエディターは幅広や全幅には対応していません。 サイトでよく見る、「全幅背景がついたコンテンツ」が、グループブロックの登場によりとてもやりやすくなったので、ぜひとも幅広・全幅は使えるようにしたいです […]

段落やグループといった一部のブロックには、色設定として文字の色や背景色を変えるカラーパレットの機能がついています。 このカラーパレットは、管理画面で設定するものではなく、テーマで設定したカラーが適用されます。 カラーパレ […]

複数の記事で同じ内容を使いまわしたいというときには、「再利用ブロック」が使えます。 再利用ブロックに変換したものは、ブロック一覧の「再利用可能」内に表示されます。 再利用ブロックを呼び出したあと、内容を編集することもでき […]

昨日のブログ記事でブロックの選択方法について書きましたが、実はブロックエディターはマークダウンやWord原稿からのコピー・ペースト（コピペ）にも対応しています。 実際にやってみて、ちょっと環境によってはコピペにコツがいる […]

このサイトのブロック紹介ページの「ブロックの選択方法」でしているように、ブロックの横の[+]をクリックして選択する方法が一番わかりやすいですが、実は他にもブロックを選択する方法があります。 / (スラッシュ)を先頭に入れ […]

ブロックエディターで書いているとき、上に配置や（ブロックによっては）太字などを選択するツールバーが表示されますよね？ でもこれ、画面の高さが担保されていないと、詳細設定が途中で切れてしまいます。 また、あまりにも高さが足 […]

サイトのリニューアルでブロックエディターに切り替えたものの、過去の記事の切り替えはどうすればいいでしょう？ 数十件の記事であれば、少しの手間でブロックエディターに切り替えられるかもしれません。しかし、それが数百、数千だっ […]

WordPressには、テーマの表示をチェックするための「テーマユニットテスト」というものがあります。いわゆる確認用の記事のインポートですね。 手動で確認のための記事を入れるのは大変なので、こういったテストデータはどんど […]

WordPressのブロックエディター（Gutenberg）について学ぶためのサイトをオープンしました。 現在はα版となっており、搭載されているブロックが吐き出すHTMLや、細かなTIPSを紹介しています。 Create […]