ノーマル形式
ポートフォリオ１ : ３カラム、カテゴリーカラー反映
ポートフォリオ１ : ４カラム
ポートフォリオ２ : ３カラム
マガジン形式 : ３カラム
専用プラグイン「DigiPress Ex - BLocks Free」、または「DigiPress Ex - Blocks」とセットで利用すると、WordPress の標準ブロックを大幅に拡張して使い勝手を向上させます。 さらにオリジナルブ...
DigiPressテーマには、いくつかの便利なショートコードが初めから用意されており、記事やウィジェットに用いることができます。
マガジン形式 : ４カラム
DigiPressテーマにはテキストやコンテンツを用途に応じて装飾する様々なスタイルシートが用意されています。詳細は続きをチェック！
コメントは無効です。この投稿ではコメントフォームは表示されないはずです。
添付された画像URLの表示サンプル リンクされた画像URLの表示サンプル
専用プラグイン「DigiPress Ex - BLocks Free」、または「DigiPress Ex - Blocks」とセットで利用すると、WordPress の標準ブロックを大幅に拡張して使い勝手を向上させます。...
スライダー（４種類） : カルーセルタイプ
このショートコードを使用するにはDigiPressテーマ専用のプラグイン(有料)が必要です
22.0〜 19.0〜 11〜 6.1〜 12.10〜 4.4〜 7.1〜
任意の複数コンテンツを横または縦に並べたフレックスボックスを表示できます。
最もシンプルな例(パラメータなし)
※視認性のためサンプルは背景カラーを付けています。
1つ目のコンテンツ。
2つ目のコンテンツ。
3つ目のコンテンツ。
このショートコード
[flexbox] [flexitem] 1つ目のコンテンツ。 [/flexitem] [flexitem] 2つ目のコンテンツ。 [/flexitem] [flexitem] 3つ目のコンテンツ。 [/flexitem] [/flexbox]
水平方向に中央寄せした例
1つ目のコンテンツ。
2つ目のコンテンツ。
3つ目のコンテンツ。
このショートコード
[flexbox alignh="center"] [flexitem] 1つ目のコンテンツ。 [/flexitem] [flexitem] 2つ目のコンテンツ。 [/flexitem] [flexitem] 3つ目のコンテンツ。 [/flexitem] [/flexbox]
右寄せした例
1つ目のコンテンツ。
2つ目のコンテンツ。
3つ目のコンテンツ。
このショートコード
[flexbox alignh="right"] [flexitem] 1つ目のコンテンツ。 [/flexitem] [flexitem] 2つ目のコンテンツ。 [/flexitem] [flexitem] 3つ目のコンテンツ。 [/flexitem] [/flexbox]
表示幅いっぱいに等間隔に並べた例
1つ目のコンテンツ。
2つ目のコンテンツ。
3つ目のコンテンツ。
このショートコード
[flexbox alignh="between"] [flexitem] 1つ目のコンテンツ。 [/flexitem] [flexitem] 2つ目のコンテンツ。 [/flexitem] [flexitem] 3つ目のコンテンツ。 [/flexitem] [/flexbox]
表示幅に合わせて自動で等幅表示した例
※既定では要素間は20pxのマージンがあります。
1つ目のコンテンツ。
2つ目のコンテンツ。
3つ目のコンテンツ。
要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。
要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。
このショートコード
[flexbox flexchildren=1] [flexitem] 1つ目のコンテンツ。 [/flexitem] [flexitem] 2つ目のコンテンツ。 [/flexitem] [flexitem] 3つ目のコンテンツ。 要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。 [/flexitem] [/flexbox]
要素間のマージンをなくして等幅表示した例
1つ目のコンテンツ。
2つ目のコンテンツ。
3つ目のコンテンツ。
要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。
要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。
このショートコード
[flexbox flexchildren=1] [flexitem margin=0] 1つ目のコンテンツ。 [/flexitem] [flexitem margin=0] 2つ目のコンテンツ。 [/flexitem] [flexitem margin=0] 3つ目のコンテンツ。 要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。 [/flexitem] [/flexbox]
3番目の要素を他の2倍の幅で自動表示した例
1つ目のコンテンツ。
flex=1
flex=1
2つ目のコンテンツ。
flex=1
flex=1
3つ目のコンテンツ。
この要素のみ他のサイズの2倍の幅で表示されるように指定しています。
flex=2
この要素のみ他のサイズの2倍の幅で表示されるように指定しています。
flex=2
このショートコード
[flexbox] [flexitem flex=1] 1つ目のコンテンツ。 flex=1 [/flexitem] [flexitem flex=1] 2つ目のコンテンツ。 flex=1 [/flexitem] [flexitem flex=2] 3つ目のコンテンツ。 この要素のみ他のサイズの2倍の幅で表示されるように指定しています。 flex=2 [/flexitem] [/flexbox]
