【Hima Art Utility】プラグインの中の、ブロックテーマであるTT2(Twenty Twenty-Two)に特化した便利機能の紹介ページです

カラーパレットの追加

ブロックの文字や背景などで選択できるカラーパレットを拡張し、さまざまな色を選択できるようになります。

また、任意に最大3つの色を登録ができる機能も追加しています。

アイキャッチ画像のLazyloadを無効にする

個別の投稿・固定ページの本文内にあるアイキャッチ画像に対して、WordPress標準で与えられるloading属性を、lazyからeagerに強制変更します

この機能により、LCP(最初に見える画面上で最もサイズが大きいコンテンツ要素を表示させるタイミング)の改善が見込めます

LCP(Largest Content Paint)についてはこちら>>

ただし、本機能はファーストビュー(最初に表示される画面)かどうかを正確に判断するものではなく、かつ、アイキャッチ画像を投稿や固定ページのそれと同じように出力するものすべてに同じ処理を行うため、場合によっては悪化する可能性があります

本機能を有効化したら、必ずLighthouse等のツールを使って、状況の確認を行うようにしてください

個別コンテンツのみに適用させていますので、ブログ形式のトップページ、その他一覧ページなどでは適用されないようにしています

「最近の投稿」ブロックの画像調整

「最近の投稿」ブロックでは、出力する画像サイズの指定と、縦横サイズは指定できるものの、この調整ではスタイルがしっくりこないことがあります。

本機能は、「最近の投稿」ブロックのアイキャッチ画像の幅を列幅いっぱいにし、指定した高さに拡縮します。

調整を有効にするかどうかのスイッチがあり、スイッチをONにすると機能が働きます。

スイッチをONにした状態で高さに任意の数字を入れると、その高さに拡縮し、画像を中央を中心に切り抜き(拡張)します。

投稿・固定ページのアイキャッチ画像の最大高を強制

サイト内すべての投稿・固定ページのアイキャッチ画像の最大の高さを強制します。

スイッチにより有効/無効の切り替えができます。

有効にした場合は最大の高さが400pxに強制され、画像の中心を基準に拡大縮小されます。

また、任意の高さを指定することもできます。

アイキャッチ画像の自動設定

アイキャッチ画像を設定していない状態で下書き保存した場合や公開した場合に、投稿・固定ページのアイキャッチ画像を自動挿入します。

自動挿入するアイキャッチ画像は設定画面上で指定できます。

アイキャッチ画像を任意で非表示にする

投稿・固定ページ編集画面の「アイキャッチ画像の表示」欄にチェックを入れると、個別の投稿、個別の固定ページの画面ではアイキャッチ画像を表示しないようにします。

display:noneを指定する簡易的なもので、出力自体を制御するものではありません

また、以下の設定をしておくことで「アイキャッチ画像の表示」欄にチェックを入れた投稿および固定ページでクエリーループブロックを使用した際に、同ブロックのアイキャッチ画像が同時に非表示となってしまうのを防ぐことができます。

  1. テーマエディターで、「個別投稿」「固定ページ」テンプレート上のアイキャッチ画像ブロックに任意の追加CSSクラスを追加
  2. プラグインの設定画面で、非表示のスイッチを有効にするCSSクラスを指定

上記指定をしない場合は、単純に「個別投稿(singleというbodyクラス)」「固定ページ(pageというbodyクラス)」で個別ページと判別して非表示にします

サイト背景画像の設定

ブロックテーマでは、テンプレート全体をカバー画像で覆ったり、クラシックテーマのカスタマイザーを復活させて背景画像を設定する方法がありますが、前者は全テンプレートに設定する必要があって面倒、後者はテーマエディター(テンプレートエディター)上で再現できないデメリットがあります。

本機能では、プラグイン設定画面から簡単にサイト全体に適用させる背景画像を設定することができます。

もちろん、テーマエディター上にも背景画像が適用されますので、背景画像があることを意識しながらのテンプレート、テンプレートパーツのデザインが可能です。

また、投稿・固定ページ編集画面では背景画像を適用させないようにするスイッチも設けており、本文の背景が白の場合でも、背景画像に邪魔されずに投稿の作成ができます。

詳しい仕様や設定方法については以下をご覧ください。

theme.jsonファイルの上書き

ブロックテーマの基本情報が書かれているtheme.jsonの情報をプラグインの管理画面から変更できる機能です。

バージョン2.8の段階では、デフォルトのフォントファミリー(文字種)を変更することができるようにしています。