OrigamiUIは、コーディングの知識がなくてもWordPressの管理画面から簡単な操作をするだけで自由にレイアウトを組み立てられるようにするための、WordPressブロックエディター向けプラグインです。
WordPressの管理画面や公式サイトから無料でダウンロードすることができます。
-> ダウンロードはこちら
OrigamiUIでできること
OrigamiUIでは縦横レイアウトやグリッドレイアウトに対応したブロックを使って、Wordpressの管理画面上でレイアウトを作ったりスタイルを作ることができます。
OrigamiUIではノーコードで以下のようなレイアウトを作成することができます。
縦横レイアウト
コンテンツを縦並びや横並びに配置できます。画像とテキストが横並びで表示したり、グリッドレイアウトと組み合わせてブログの記事一覧のようなコンテンツを作成できます。
- 要素間のスペース(ギャップ)の設定
- ブレークポイントで縦並びと横並びを切り替え
- 整列（Align Items）や均等配置（Justify Content）
-> 詳しくはこちら
グリッドレイアウト
コンテンツを縦横に並べたグリッドレイアウトを作成することができます。クエリループの中でも使用できるため記事一覧コンテンツも作成可能です。
- ブレークポイントごとの列数指定
- 要素間のスペース(ギャップ)の設定
- カラムのオフセットの設定
- クエリループ内での使用
-> 詳しくはこちら
絶対配置のレイアウト
要素を左上や中央などに配置することができます。
- Positionプロパティ(absoluteやfixedなど)の設定
- 9つのマスから位置の指定
- 縦横に半分外に出す設定
-> 詳しくはこちら
スタイリング
WordPressの標準機能を使ったスタイルやブレークポイントごとのスペース設定、サイズ設定が可能です。また、CSSコードを追加することでもできるため、複雑なスタイルにも対応可能です。
- ブレークポイントごとのスペース(余白)設定
- ブレークポイントごとのサイズ設定
- ブレークポイントごとの表示/非表示設定
- WordPress標準のスタイル設定(フォントや背景、枠線など)
- CSSコードを使ったスタイリング
-> 詳しくはこちら
OrigamiUIのブロック
ノーコードでWordpressサイトのレイアウトやスタイルを作れるOrigamiUIでは以下のブロックが含まれています。
- グループ: レイアウトやサイズを自由に設定できるブロック
- コンテナ: コンテナ幅の中にコンテンツを入れるためのブロック
- グリッド: グリッドレイアウトを作れるブロック
- カラム: グリッドの中で列を作るためのブロック
- オフキャンバス: オフキャンバス(ドロワー)メニューを作成できるブロック
- トグル: オフキャンバスの開く/閉じるを制御できるブロック
レスポンシブに対応したレイアウトはグループやコンテナブロックで作成できます。
グリッドレイアウトを作るにはグリッド、カラムブロックを使用します。
オフキャンバスブロックでは内部にグループブロックを入れてレイアウトを作成できます。
オフキャンバスの表示/非表示はトグルブロックで行います。
それぞれのブロックでは内部にさらにブロックを重ねて複雑なレイアウトを作成可能です。
詳しい使い方はこちら
WordPressの基本的なブロックの設置や操作、パターンを使った再利用、テンプレートの作り方についても以下のページで解説しています。
