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

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

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

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

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

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

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

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

このショートコード

[flexbox flexchildren=1]
[flexitem margin=10]
[profile name="DigiPress Boy" namesize=22 authorurl="#" profimgurl="http://demo.dptheme.net/dp9/wp-content/uploads/sites/7/boy.jpg" profsize=160 topbgcolor=#fff twitterurl="#" facebookurl="#" googleplusurl="#" youtubeurl="#" pinteresturl="#"]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
[/profile]
[/flexitem]
[flexitem margin=10]
[profile name="Ms. DigiPress" namesize=22 authorurl="#" profimgurl="http://demo.dptheme.net/dp7/wp-content/uploads/sites/2/girl-flowers1-620x422.jpg" profshape="circle" profsize=160 topbgcolor=#fff twitterurl="#" facebookurl="https://www.facebook.com/digipressthemes" googleplusurl="https://plus.google.com/" youtubeurl="#" pinteresturl="#" hoverfx=1]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。[/profile]
[/flexitem]
[flexitem margin=10]
[profile name="Mr. DigiPress" namesize=22 authorurl="#" profimgurl="https://digipress.info/_wp/wp-content/uploads/2014/05/boy.jpg" profsize=160 topbgcolor=#fff twitterurl="#" facebookurl="#" googleplusurl="#" hoverfx=2]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
[/profile]
[/flexitem]
[/flexbox]

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

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

このショートコード

[flexbox flexchildren=1]
[flexitem margin=10]
[profile name="DigiPress Boy" namesize=18 authorurl="#" profimgurl="http://demo.dptheme.net/dp9/wp-content/uploads/sites/7/boy.jpg" profsize=140 topbgcolor=#fff twitterurl="#" facebookurl="#" youtubeurl="#" pinteresturl="#"]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
[/profile]
[/flexitem]
[flexitem margin=10]
[profile name="Ms. DigiPress" namesize=18 authorurl="#" profimgurl="http://demo.dptheme.net/dp7/wp-content/uploads/sites/2/girl-flowers1-620x422.jpg" profshape="circle" profsize=140 topbgcolor=#fff twitterurl="#" facebookurl="https://www.facebook.com/digipressthemes" pinteresturl="#" hoverfx=1]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。[/profile]
[/flexitem]
[flexitem margin=10]
[profile name="Mr. DigiPress" namesize=18 authorurl="#" profimgurl="https://digipress.info/_wp/wp-content/uploads/2014/05/boy.jpg" profsize=140 topbgcolor=#fff twitterurl="#" facebookurl="#" googleplusurl="#" hoverfx=2]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
[/profile]
[/flexitem]
[flexitem margin=10]
[profile name="Madam DigiPress" namesize=18 authorurl="#" profimgurl="http://demo.dptheme.net/dp8/wp-content/uploads/sites/6/escena_profile.jpg" profshape="circle" profsize=140 topbgcolor=#fff twitterurl="#" facebookurl="https://www.facebook.com/digipressthemes" pinteresturl="#" hoverfx=1]
DigiPressは他を圧倒するデザイン性とパフォーマンスを備えています。このプロフィールボックスもDigiPress専用ショートコードで表示しています。
[/profile]
[/flexitem]
[/flexbox]

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

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!

このショートコード

[flexbox flexchildren=1]
[flexitem margin=30]
<p class="ft28px b">Let's Try Flexbox Shortcode!</p>
<div class="ft14px"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<ul>
  <li>Lorem ipsum dolor sit amet consectetuer.</li>
  <li>Aenean commodo ligula eget dolor.</li>
  <li>Aenean massa cum sociis natoque penatibus.</li>
</ul>
<a href="#" class="btn ft16px">TRY IT NOW!</a>
</div>
[/flexitem]
[flexitem margin=30]
<img src="https://digipress.info/_wp/wp-content/uploads/2015/10/fleximg.jpg" alt="fleximg" width="100%"  style="margin-top:0;" />
[/flexitem]
[/flexbox]

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

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!

このショートコード

[flexbox flexchildren=1]
[flexitem margin=30 flex=1]
<img src="https://digipress.info/_wp/wp-content/uploads/2015/10/fleximg2.jpg" alt="fleximg2" width="100%" class="img-circular" />
[/flexitem]
[flexitem margin=30 flex=2]
<p class="ft28px b">Very Useful Shortcode</p>
<div class="ft14px"><p>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.</p>
<ul>
  <li>Lorem ipsum dolor sit amet consectetuer.</li>
  <li>Aenean commodo ligula eget dolor.</li>
  <li>Aenean massa cum sociis natoque penatibus.</li>
</ul>
<a href="#" class="btn ft15px">TRY IT NOW!</a>
</div>
[/flexitem]
[/flexbox]

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

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

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

このショートコード

<div class="al-c">
<p class="ft35px b mg50px-btm">CENTERING STYLE</p>
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.
</div>
[flexbox alignh="center"]
[flexitem margin=5]
<a href="#" class="btn ft15px">LEARN MORE</a>
[/flexitem]
[flexitem margin=5]
<a href="#" class="btn btn-blue ft15px">SHOW SAMPLE</a>
[/flexitem]
[flexitem margin=5]
<a href="#" class="btn btn-orange ft15px">BUY PLUGIN</a>
[/flexitem]
[/flexbox]