テーマArkheのブロックパターンライブラリを使ってみた

2022年7月31日

ワードプレスのテーマArlheでブロックパターンライブラリが使えるようになりました。

使い方はすごくシンプルなので早速使ってみた感じをお届けしたいと思います。

ワードプレス　テーマArkheとは

人気テーマSWELLの制作者さんがつくっているWEB制作者用ベーステーマです。

公式サイト	公式サイトへ
制作者	株式会社LOOS
コンセプト	WEB制作者のベースに最適なテーマ
主な用途	お店や会社などのビジネスサイトおよび販売サイト
価格	テーマは無料。機能拡張用の有料ブラグインあり

テーマ自体は無料で使用できますが、有料版の機能拡張用プラグインArkhe Pro Packも準備されています。

私はSWELLもArkheも使っていますが、コーディングを交えてオリジナリティの高いWEB制作となるとArkheのほうが圧倒的に使いやすいです。逆にコーディングせずとなればSWELLの豊富な機能がモノをいいます。

Arkheパターンライブラリとは

Arkheユーザーに向けの専用ブロックパターンライブラリです。パターンをコピペしてブロックエディターに貼り付けるだけで素敵なコンテンツが作成できます。

2022年7月31日現在、69パターンが登録されています。

Arhkeのパターンライブラリ公式ページはこちら

Arlheパターンライブラリの使い方

使い方概要

パターンライブラリ公式ページグローバルメニューの”当サイトの使い方”をクリックすると簡単に解説されています。解説動画もあります。

とはいえ、直感的に使えるので特に解説すべきことはないかも。

ようは

1. テーマArkheをインストールしたワードプレスサイトを準備する
2. 気に入ったパターンを探す（サイト上部の検索ボックスが便利）
3. パターンをコピーする（”コピーする”をクリックするだけ）
4. ワードプレスサイトのブロックエディターを開けてペーストする

とこれだけです。

Arkheパターンライブラリの特徴と注意点

使い方は簡単ですが、Arkheならではの工夫と注意点があります。

• シンプルに検索がしやすい
• 付加情報に”Proブロックあり”とあるパターンは有料版プラグインArlhe Blocks Proが必要
• ブロックエディターにコピペするとCSSのカスタムコードも同時に開いてその場で編集可能

パターン検索がしやすい

ページ上部の検索ボックスからパターンの絞り込みが可能です。

今後パターンが増えるとともに検索可能項目も増えるでしょうね。楽しみです。

”Proブロックあり”と”無料で利用可”

先の検索可能項目にも入っていますが、”Proブロックあり”を使うためには有料プラグインArkhe Blocks Proがサイトにインストールされている必要があります。

無料版をお使いの場合は、”無料で利用可”にチェックを入れて絞り込むとよいでしょう。

今のところ、圧倒的に無料版で利用できるパターンの方が多いのが良心的なところです。でも有料版であればもっといろいろ高機能なパターンができるはずなので期待したいところですね。

ブロックエディターにパターンをコピペするとその場でCSSが編集できる

これは後で実施事例でも説明しますが、パターンをブロックエディターにコピペすると、そのすぐ下にパターンのCSS用ブロックが開いて編集することができます。これはワードプレス標準のブロックパターンにはない大きな特徴・メリットですね。

ワードプレス自体はノンコードでいろいろできる方向に進化していますが、実際コーディングなしでは痒いところに手が届くデザイン調整ができません（特にレシポンシブ対応）。

さすが、WEB制作者の立場をよく考えていただいていて嬉しくなりました。

使用実施例

今回はメインビジュアルの中からパターン”メインビジュアル02”をを選んで使ってみます。メインビジュアル02はスライダーを使った1stビュー用パターンです。

１．パターンを選んでコピーする

①用途でメインビジュアルを選択
②”パターンを検索”をクリック
③メインビジュアル02を選ぶ

メインビジュアル02が見つかったら、”コピーする”ボタンをクリックすればOKですが、もしレシポンシブ含めてパターンの詳細を確認したければ、パターン画像をクリックすれば詳細画面となります。

２．ブロックエディターにパターンをペーストする

コピーしたパターンをブロックエディターの本文欄にペーストします。すぐにブロックエディター内にパターンが表示されます。

これだけでプレビューまたは更新してweb表示させれば、パターンが反映されているのが確認できます。

以下はPCでの表示。きちんと画面の高さいっぱいに調整されて表示されます。もちろんスライダーも切り替わります。

次にスマホ表示です。ヘッダーのサイトタイトルがいけていませんが（汗）、メインビジュアルはスマホ画面の下までできちんと収まっているのがわかります。

３．CSSを編集してみる

ブロックエディターに戻って、今ペーストしたパターンの下をスクロールしてみてみましょう。

CSSコードを記載したカスタムCSSブロックがパターン下に自動挿入されています。

このCSSを編集してみましょう。例えば、メインビジュアル内の見出しフォントが元々5remを2remに変更してみます。

すると特に更新ボタンなど何も押さなくても、即座にブロックエディター内のスタイルに反映されます。

ブロックエディタービジュアル確認しながらCSSを編集できるのは、WEB制作においてはすごく便利ですよね。

このように、ブロックパターンライブラリを使えば、コンテンツ制作スピードを大幅にアップできるようになります。

• パターンをコピペするだけで素敵なコンテンツ雛形を配置できる
• 画像入れ替えやテキストの編集をすればオリジナルコンテンツになる
• CSSもブロックエディター内で変更できる

まとめ

ArkheはWEB制作用のベーステーマとして使い勝手のよいテーマですが、パターンライブラリの登場によりますますWEB制作が便利になりました。CSSもブロックエディター内でビジュアル確認しながら編集できるので、コーディングでオリジナリティを出したいときにも威力を発揮します。

現段階ではまだライブラリパターン数は69パターンだけとはいえ、リリース当初にしてはずいぶん多いなと思いました。これからますますパターン数が増えることを期待します。

また、有料プラグインArkhe Blocks Proを導入すれば全パターンが利用できるので、興味のある方はこの機会に検討してみてはいかがでしょうか？Arkhe Blocks Proを購入するならば、他のプラウグインとセットになったArkhe Pro Packがおすすめです。