このページでは、Arkhe Blocks / Arkhe Blocks Pro によって利用可能になる「カスタムブロック」について紹介していきます。
▼ 無料版の「Arkhe Blocks」でも利用可能なブロック
※ 一部の機能に制限があります。
▼ PRO版（「Arkhe Blocks Pro」）で利用可能になるブロック
▼ PRO版で、さらに、テーマがArkheでのみ利用可能なブロック
（ ↑ この目次も、Arkhe Blocks のブロックです）
「アコーディオン」ブロック
クリックしてコンテンツを展開することができるブロックです。
アコーディオン A だよ
ここはアコーディオン A のコンテンツです。
デフォルトではコンテンツ部分が閉じた状態ですが、「最初から開いておく」ことも可能です。（Pro Ver. 2.0 ~）
アコーディオン B だよ
ここはアコーディオンBのコンテンツです。
ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。長年にわたり、私は学区と長寿であれば、そのような刺激の取り組み、彼女のうち、運動の利点を分注を邪魔されたする人が来ます。
「コンテナ」ブロック
一言で説明すると、ほぼグループブロックと同じようなブロックです。
ここはコンテナブロックです。
- グループブロックと同じように複数のブロックをグループ化して配置することができます。
- コアの仕様変更に左右されません。
- paddingを細かく指定したり、インナーにdivを挟むかどうかを選択できます。
「Q&A」ブロック
質問と回答がセットになったブロックです。
- 質問Aだよ
-
回答Aだよ。
ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。
- 次の質問Bだよ
-
回答Bだよ。
ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。長年にわたり、私は学区と長寿であれば、そのような刺激の取り組み、彼女のうち、運動の利点を分注を邪魔されたする人が来ます。
「通知」ブロック
こんな感じで、強調して伝えたいコンテンツを作成できるブロックです。
３種の「スタイル」 x 5種の「通知タイプ」があり、バリエーションも豊富です。
シンプルなスタイルの例。
以下のアイコンが利用可能です。
- Font Awesome Free
- Ionicons v5
- Feather Icons
svgとして出力するため、ファイルの追加読み込みもありません。
その他のスタイルバリーエーションの例
ロレム・イプサムの座り雨。
ロレム・イプサムの座り雨。
ロレム・イプサムの座り雨。
ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。長年にわたり、私は学区と長寿であれば、そのような刺激の取り組み、彼女のうち、運動の利点を分注を邪魔されたする人が来ます。
「説明リスト」ブロック
- 説明リストとは
-
HTMLでいうと
dl/dt/ddタグのこと。 - 用語A
-
用語の解説とかに使えるよ。
ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。
以下のように、dtとddタグを並列に並べて配置することも可能です。
- 項目と説明を
-
横並びに配置することも可能！
- メニューA
-
1,000円
- メニューB
-
2,000円
みたいな感じで使えるね！
「ステップ」ブロック
物事の手順や段階の流れを説明するのに便利なブロックです。
スタイルが3種類あり、各ステップごとにカラーを変えたりラベルを変えたりもできます。
デフォルトスタイル
ロレム・イプサムの座り雨。
ロレム・イプサムの座り雨。
ロレム・イプサムの座り雨。
「大」スタイル
ロレム・イプサムの座り雨。
ロレム・イプサムの座り雨、トマ好き学習エリット。
しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。
ロレム・イプサムの座り雨。ロレム・イプサムの座り雨。
「カード」スタイル
ステップ形式のコンテンツが作成できます。
ステップ形式のコンテンツが作成できます。
ステップ形式のコンテンツが作成できます。
「タイムライン」ブロック
タイムライン形式のコンテンツを作成できるブロックです。
シェイプ部分は塗りつぶしたり色を付けたり、アイコンを使用（Pro版のみ）したりできます。
▼ 使用例 A
ここにコンテンツを自由に配置できます。
ブロックエディターの登場。
記念すべきバージョン 1.0 は 2004年。
▼ 使用例 B
「タブ」ブロック
ここはタブ 1 のコンテンツです。
- スタイルは２種類あります。
- タブがたくさんある場合に、ナビゲーション部分を横スクロールで表示させることも可能です。
- 最初に開いておくタブ番号も指定可能。（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アイコンとコンテンツの並びを切り替え可能
- バナー型への切り替え
等の機能により、様々なレイアウトを実現できます。
「デフォルト」スタイル
ここには自由にコンテンツを配置できます。
ここには自由にコンテンツを配置できます。
ここには自由にコンテンツを配置できます。
ここには自由にコンテンツを配置できます。
ここには自由にコンテンツを配置できます。
アイコンの色指定も可能です
Font Awesome のアイコンも使えます。
SVG直書きでで自由なアイコンも描けます。
「バナー」スタイル
背景オーバーレイの透明度も設定できます。
ここには自由にコンテンツを配置できます。
ここには自由にコンテンツを配置できます。
ここには自由にコンテンツを配置できます。
ここには自由にコンテンツを配置できます。
その他のレイアウト例
アイコンは色も設定できます。
SVG直書きでで自由なアイコンを描けます。
Font Awesome のアイコンも使えます。
ここには自由にコンテンツを配置できます。
ここには自由にコンテンツを配置できます。
ここには自由にコンテンツを配置できます。
「スライダー」ブロック
PROのみ
- 画像または動画のみのメディアスライダー
- 背景にメディア＋自由なコンテンツのリッチスライダー
の2種類のスライダーが使用可能です。
メディアスライダーの例
リッチスライダーの例
また、以下の動画のように、swiper.jsで使用可能なオプションのいくつかを利用できるようになっています。
「投稿リスト」ブロック
PROのみ
Arkheテーマのアーカイブページと同じデザインで投稿リストを呼び出します。
表示する投稿数や記事情報・レイアウトなどの設定や、ID・投稿タイプ・カテゴリー・タグ・タクソノミーなどでの絞り込みも可能です。
- カード型・リスト型・テキスト型からレイアウトを選べます。
- 表示数・抜粋文の文字数・並び順などの設定が可能です。
- 公開日・更新日・カテゴリー・著者情報の表示・非表示の切り替えが可能です。
- idで指定した投稿だけを並べたり、任意のタクソノミー条件での絞り込みも可能です。
リスト型での表示例
「RSS」ブロック
PROのみ
RSSフィードのリストを、Arkheテーマに馴染むデザインで呼び出します。
- カード型・リスト型・テキスト型からレイアウトを選べます。
- 表示数の設定が可能です。（最大10）
- サイト名・公開日・著者情報・サムネイル画像の表示・非表示の切り替えが可能です。