[WordPress] Arkhe ブロックパターンライブラリの使い方

2022年8月13日2023年7月17日

Arkhe専用のブロックパターンライブラリが公開されました。コピペするだけなので、とっても便利です。CSSコードブロックが付いているので、カスタマイズが出来ます。素晴らしい！！

Arkhe パターンライブラリ

Arkhe パターンライブラリ | コピペで使える、Arkheテーマ専用のブロックパターン集コピペで使える、Arkheテーマ専用のブロックパターン集

情報としては大した内容ではありませんが、軽～くカスタマイズしたのでシェアします。初心者さんの助になれば嬉しいです。随時更新してゆく予定です。

ちなみに、Arkheは、基礎となる部分しかないテーマなので、どちらかと言うとWebの知識がある方向けです。ブロックパターンライブラリを使用しても、多くの部分は自作しなければなりません。

Webの知識が無くとも、ポチポチクリックするだけで簡単に見栄え良くサイトを作りたいのであればSWELLをお勧めします。ブロックパターンももっと簡単設定で完成しますし、種類も豊富でオススメです。

INDEX

準備

WordPressのテーマ「Arkhe」と「Arkhe Block」プラグインが必要です。インストールして下さい。無料版でもいくつかは対応できます。必要に応じてPro版の購入が必要です。

WordPress.org

Arkhe 制作テンプレート用のとてもシンプルなテーマです。あなたの好きなようにカスタマイズしてください。

WordPress.org 日本語

Arkhe Blocks “Arkhe”テーマに最適化された、Gutenbergを拡張するプラグイン。

サイトにアクセスし、好みのパターンを見つけます。コピーして、ブロックエディタにペーストするだけ！！

gnRichClmn03（汎用リッチカラム03・コンテンツ右）

Arkhe パターンライブラリ

gnRichClmn03（汎用リッチカラム03・コンテンツ右） | Arkhe パターンライブラリ Heading これはサブ見出しですこれはサブ見出しですこれはサブ見出しですこれはサブ見出しですここにはテキストが入りますここにはテキストが入りますここにはテキストが…

画像の高さ（縦横比率）の変更

デフォルトでは3:2に設定されています。好みの比率にカスタマイズできます。2:1にした場合の例です。
※ビジュアルエディタ上では反映されません。

.arkp-gnRichClmn03 .arkp-gnRichClmn03__imgWrapper > img {
    aspect-ratio: 3/2 ;

.arkp-gnRichClmn03 .arkp-gnRichClmn03__imgWrapper > img {
    aspect-ratio: 2/1 !important;

アスペクト比について

アスペクト比計算ツール（縦横比/16:9/4:3/3:2/2:1/黄金比） | WordPressやWebデザインなど紹介 Ocadweb アスペクト比計算ツール（縦横比/16:9/4:3/3:2/2:1/黄金比）は、画像サイズを16:9や3:2、4:3、黄金比などアスペクト比を簡単に計算をしてくれるツール。写真サイズを入力す…

テキストエリアの背景色の変更

.arkp-gnRichClmn03 {
    --arkp--cont--overlap--x: 8rem;
    --arkp--cont--bgc: #ココを好きな色にする;

アニメーションで動きをつける

テキストに動きを付けると、グッと変わります。アニメーションの付けたははいろいろありますが、CSSが手軽です。

@keyframesでいろいろ出来ます。とりあえず何かやってみた方が分かり易いと思います。

MDN Web Docs

@keyframes – CSS: カスケーディングスタイルシート | MDN @keyframes は CSS のアットルールで、アニメーションの流れに沿ったキーフレーム（または中間地点）のスタイルを定義することによって、一連の CSS アニメーションの中間…

例えは、scMV03のテキストに動きを付ける場合

/* scMV03 */
@keyframes fade-in {
  from {
      opacity: 0;
      transform: translateY(100px);}
  to {
      opacity: 1;
      transform: translateY(0);}
}
.arkp-scMV03 .ark-block-section__body{
    animation-name: fade-in;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
}

scMV05（メインビジュアル05）に付ける場合

@keyframes fade-in {
  from {
      opacity: 0;
      transform: translateY(100px);}
  to {
      opacity: 1;
      transform: translateY(0);}
}
.arkp-scMV05 .ark-block-heading{
    animation-name: fade-in;
    animation-duration: 2s;
    animation-delay: 0.2s;
    animation-timing-function:ease;
    animation-fill-mode: both;
}

これ便利です