Arkhe Blocks のカスタムブロック一覧

このページでは、Arkhe Blocks / Arkhe Blocks Pro によって利用可能になる「カスタムブロック」について紹介していきます。

無料版の「Arkhe Blocks」でも利用可能なブロック

  • アコーディオン
  • コンテナ
  • Q&A
  • 説明リスト
  • 目次
  • 通知
  • セクション
  • セクション見出し
  • タブ
  • ステップ
  • タイムライン
  • ブログカード
  • リッチカラム

※ 一部の機能に制限があります。

PRO版(「Arkhe Blocks Pro」)で利用可能になるブロック

  • ボックスリンク
  • スライダー 【β機能】(v.1.9 ~)
  • 制限エリア(v.2.4 ~)

PRO版で、さらに、テーマがArkheでのみ利用可能なブロック

  • 投稿リストブロック
  • 固定ページリストブロック
  • RSSブロック

( ↑ この目次も、Arkhe Blocks のブロックです)

「アコーディオン」ブロック

クリックしてコンテンツを展開することができるブロックです。

アコーディオン A だよ

ここはアコーディオン A のコンテンツです。

デフォルトではコンテンツ部分が閉じた状態ですが、「最初から開いておく」ことも可能です。(Pro Ver. 2.0 ~)

アコーディオン B だよ

ここはアコーディオンBのコンテンツです。

ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。長年にわたり、私は学区と長寿であれば、そのような刺激の取り組み、彼女のうち、運動の利点を分注を邪魔されたする人が来ます。

「コンテナ」ブロック

一言で説明すると、ほぼグループブロックと同じようなブロックです。

ここはコンテナブロックです。

  • グループブロックと同じように複数のブロックをグループ化して配置することができます。
  • コアの仕様変更に左右されません。
  • paddingを細かく指定したり、インナーにdivを挟むかどうかを選択できます。

「Q&A」ブロック

質問と回答がセットになったブロックです。

質問Aだよ

回答Aだよ。

ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。

次の質問Bだよ

回答Bだよ。

ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。長年にわたり、私は学区と長寿であれば、そのような刺激の取り組み、彼女のうち、運動の利点を分注を邪魔されたする人が来ます。

「通知」ブロック

ポイントだよ

こんな感じで、強調して伝えたいコンテンツを作成できるブロックです。

3種の「スタイル」 x 5種の「通知タイプ」があり、バリエーションも豊富です。

シンプルなスタイルの例。

アイコンの自由度も高い!

以下のアイコンが利用可能です。

  • Font Awesome Free
  • Ionicons v5
  • Feather Icons

svgとして出力するため、ファイルの追加読み込みもありません。

その他のスタイルバリーエーションの例

ロレム・イプサムの座り雨。

ロレム・イプサムの座り雨。

設定方法

ロレム・イプサムの座り雨。

警告!

ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。長年にわたり、私は学区と長寿であれば、そのような刺激の取り組み、彼女のうち、運動の利点を分注を邪魔されたする人が来ます。

「説明リスト」ブロック

説明リストとは

HTMLでいうとdl/dt/ddタグのこと。

用語A

用語の解説とかに使えるよ。
ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。

以下のように、dtddタグを並列に並べて配置することも可能です。

項目と説明を

横並びに配置することも可能!

メニューA

1,000円

メニューB

2,000円

みたいな感じで使えるね!

「ステップ」ブロック

物事の手順や段階の流れを説明するのに便利なブロックです。

スタイルが3種類あり、各ステップごとにカラーを変えたりラベルを変えたりもできます。

デフォルトスタイル

STEP
手順その壱

ロレム・イプサムの座り雨。

STEP
手順その弐

ロレム・イプサムの座り雨。

STEP
手順その参

ロレム・イプサムの座り雨。

「大」スタイル

STEP – 1
Aをする

ロレム・イプサムの座り雨。

STEP – 2
次に、Bをする

ロレム・イプサムの座り雨、トマ好き学習エリット。
しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。

STEP – 3
完了です

ロレム・イプサムの座り雨。ロレム・イプサムの座り雨。

「カード」スタイル

手順
手順そのいち

ステップ形式のコンテンツが作成できます。

手順
手順そのに

ステップ形式のコンテンツが作成できます。

手順
手順そのさん

ステップ形式のコンテンツが作成できます。

「タイムライン」ブロック

タイムライン形式のコンテンツを作成できるブロックです。
シェイプ部分は塗りつぶしたり色を付けたり、アイコンを使用(Pro版のみ)したりできます。

▼ 使用例 A

2022年5月24日
WordPress 6.0 がリリース

ここにコンテンツを自由に配置できます。

2018年12月6日
WordPress 5.0 がリリース

ブロックエディターの登場。

2004年1月3日
WordPress 1.0 がリリース

記念すべきバージョン 1.0 は 2004年。

▼ 使用例 B

8:00
家を出発
9:00
バスに乗る
12:00
食事を取る
13:00
昼寝をする

「タブ」ブロック

ここはタブ 1 のコンテンツです。

  • スタイルは2種類あります。
  • タブがたくさんある場合に、ナビゲーション部分を横スクロールで表示させることも可能です。
  • 最初に開いておくタブ番号も指定可能。(Pro版のみ)

「ブログカード」ブロック

内部リンクでも外部リンクでも、ブログカード化して表示できます。

「リッチカラム」ブロック

コアのカラムブロックの上位互換となるようなブロックです。

  • PCサイズ / Tabletサイズ / Mobileサイズ ごとに列数を設定可能
  • カラム間のgapとカラム内のpaddingを指定可能(Proのみ)
  • さらに、各カラム項目も個別で横幅・paddingを設定可能(Proのみ)
  • 横スクロールで表示することも可能

例1 : PC 4列 | Tab 2列 | Mobile 1列

カラムだよ

カラムだよ

カラムだよ

カラムだよ

例2 : PCは6:4の比率で2列、Tab, Mobileでは1列

さらに、シャドウスタイルをONにしてgapを4remと広くしています。

PCでは 60% サイズ、
SPでは 100% になります。

PCでは 40% サイズ、
SPでは 100% になります。

「セクション」ブロック

コアブロックの「カバーブロック」の高機能版のようなブロックです。
デフォルトで「全幅」状態になっていますが、普通幅でも使用可能です。

セクション見出し

これは「セクション見出し」ブロックです
  • セクションとしてまとめたいコンテンツをグループ化して配置できます。
  • 背景にはメディア(画像・動画)を表示できます。
  • セクション全体のテキストカラーも一括で指定できます。
  • 上下の境界線を斜めにしたり、波のようにしたりも可能です。(Proのみ)

セクション02

高さ」や「内側の余白」を調節したり、
内部コンテンツの位置をどこに揃えるかを設定したりもできす。

※ この半透明エリアは「コンテナ」ブロックです


セクション03

  • 背景にメディアを表示する時は、
    • PC / SP でそれぞれ個別にメディアを設定できます。
    • メディアの上に被せるオーバーレイカラーも設定できます。
    • 画像であれば、リピート背景も設定できます。(リピート背景時はPC/SPでも切り替えはできません)
    • また、「ドットフィルター」を適用させることも可能です。

※ このセクションブロックでは、PCデバイスでは動画、SPデバイスでは画像が表示されています。

「ボックスリンク」ブロック

PROのみ

ボックス全体がリンク化したコンテンツを、複数並べて表示できます。

  • 画像比率の指定
  • アイコンの使用
  • デバイスでの列数切り替え
  • 画像orアイコンとコンテンツの並びを切り替え可能
  • バナー型への切り替え

等の機能により、様々なレイアウトを実現できます。

「デフォルト」スタイル

「バナー」スタイル

背景オーバーレイの透明度も設定できます。

その他のレイアウト例

「スライダー」ブロック

PROのみ

  • 画像または動画のみのメディアスライダー
  • 背景にメディア+自由なコンテンツのリッチスライダー

の2種類のスライダーが使用可能です。

メディアスライダーの例

リッチスライダーの例

Slider 1

ここに自由にコンテンツを配置できます。

Slider 2

ここに自由にコンテンツを配置できます。

Slider 3

ここに自由にコンテンツを配置できます。

また、以下の動画のように、swiper.jsで使用可能なオプションのいくつかを利用できるようになっています。

「投稿リスト」ブロック

PROのみ

Arkheテーマのアーカイブページと同じデザインで投稿リストを呼び出します。
表示する投稿数や記事情報・レイアウトなどの設定や、ID・投稿タイプ・カテゴリー・タグ・タクソノミーなどでの絞り込みも可能です。

  • カード型・リスト型・テキスト型からレイアウトを選べます。
  • 表示数・抜粋文の文字数・並び順などの設定が可能です。
  • 公開日・更新日・カテゴリー・著者情報の表示・非表示の切り替えが可能です。
  • idで指定した投稿だけを並べたり、任意のタクソノミー条件での絞り込みも可能です。

「RSS」ブロック

PROのみ

RSSフィードのリストを、Arkheテーマに馴染むデザインで呼び出します。

  • カード型・リスト型・テキスト型からレイアウトを選べます。
  • 表示数の設定が可能です。(最大10)
  • サイト名・公開日・著者情報・サムネイル画像の表示・非表示の切り替えが可能です。

Arkhe Blocks Proを購入する