• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

高度なカスタマイズ

フレックスボックスでコンテンツをレスポンシブ化して並べよう

フレックスボックスでコンテンツをレスポンシブ化して並べよう

DigiPress専用プラグインである「Shortcodes for DigiPress」には、2つ以上のコンテンツを水平に並べて表示できる “フレックスボックス” ショートコードがあります。

フレックスボックスショートコードについてはこちら
フレックスボックスショートコードのオンラインマニュアル

このショートコードの機能をうまく活用することで、あらゆるレイアウトを複雑なCSSやHTMLの構造を必要とせず、さらにレスポンシブデザインにまで対応させて簡単に表示することが出来るようになります。

ここでは、よくお問い合わせいただく要件を元に、いくつかのレイアウトの作成例を提示します。

プロフィールコンテンツを並べて表示

フレックスボックス用ショートコードとプロフィール用ショートコードを組み合わせれば、海外サイトでよく見かけるような横並びのプロフィールコンテンツを簡単に表現できます。

プロフィールショートコードについてはこちら
プロフィールショートコードのオンラインマニュアル

3つのプロフィールを並べる場合の表示例

DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。

このショートコード

このように、例えばプロフィールコンテンツを4つ並べる場合は、さらにprofileショートコードをflexitemショートコードで括って追加すれば表示できます。

4つのプロフィールを並べた場合の表示例

DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。

このショートコード

画像とテキストを横並びに表示

1カラムのセールスページなどでよく見かける表示スタイルもテキストと画像をflexitemショートコードでそれぞれ括るのみです。

テキストを左側、画像を右側に表示した例

Let’s Try Flexbox Shortcode!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

  • Lorem ipsum dolor sit amet consectetuer.
  • Aenean commodo ligula eget dolor.
  • Aenean massa cum sociis natoque penatibus.

TRY IT NOW!

fleximg

このショートコード

画像をCSSで円形にして左側、テキストを右側に表示した例

画像を円形にするDigiPress専用のCSSセレクタ(img-circular)を指定します。
さらに、右側のテキスト部分のフレックスアイテムはflex=2というオプションを指定して画像を表示する左側の2倍の幅にしています。
fleximg2

Very Useful Shortcode

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem.

  • Lorem ipsum dolor sit amet consectetuer.
  • Aenean commodo ligula eget dolor.
  • Aenean massa cum sociis natoque penatibus.

TRY IT NOW!

このショートコード

フレックスボックスのセンタリング表示

フレックスボックスショートコードには様々なオプションがありますが、水平中央寄せオプション(alignh=center)を利用した表示例を示します。

通常コンテンツと組み合わせた表示例

CENTERING STYLE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

このショートコード

URL
TBURL

COMMENT ON FACEBOOK

Return Top