記事のブロックを横に並べる方法

NetCommons3では、ブロックを横に並べることができません。
これは、スマートフォンやタブレットなどの様々な画面サイズの端末に最適化するように、レスポンシブ対応という技術を導入したためと説明されています。

しかし、ちょっとした記事を横に並べたい事ってありますよね。
ということで、ここでは、「お知らせ」モジュールの中に、仮想でブロックを作り、ブロックが横に並んでいるように見える方法を紹介します。

この方法はNetCommons3 で採用しているCSS フレームワークのbootstrap に関するタグをお知らせモジュールの中に書くということで実現します。
bootstrap に関してはここでは解説しません。bootstrap を説明しているサイトや書籍で調べてください。

【サンプル１】

【ソース１】コピーして「お知らせ」モジュールの「ソースコード」エリアに貼り付けてください。

<div class="row"> <div class="col-xs-12 col-sm-6 col-md-3 block"> <section class="frame panel panel-primary nc-content-list plugin-announcements"> <div class="panel-heading clearfix">仮想ブロック１</div> <div class="panel-body block"> ここに記事を書きます。 </div> </section> </div> <div class="col-xs-12 col-sm-6 col-md-3 block"> <section class="frame panel panel-primary nc-content-list plugin-announcements"> <div class="panel-heading clearfix">仮想ブロック２</div> <div class="panel-body block"> ここに記事を書きます。 </div> </section> </div> <div class="col-xs-12 col-sm-6 col-md-3 block"> <section class="frame panel panel-primary nc-content-list plugin-announcements"> <div class="panel-heading clearfix">仮想ブロック３</div> <div class="panel-body block"> ここに記事を書きます。 </div> </section> </div> <div class="col-xs-12 col-sm-6 col-md-3 block"> <section class="frame panel panel-primary nc-content-list plugin-announcements"> <div class="panel-heading clearfix">仮想ブロック４</div> <div class="panel-body block"> ここに記事を書きます。 </div> </section> </div> </div>

【サンプル２】

【ソース２】コピーして「お知らせ」モジュールの「ソースコード」エリアに貼り付けてください。

<div class="row"> <div class="col-xs-12 col-sm-8 col-md-8 block"> <section class="frame panel panel-primary nc-content-list plugin-announcements"> <div class="panel-heading clearfix">仮想ブロック１</div> <div class="panel-body block"> ここに記事を書きます。 </div> </section> </div> <div class="col-xs-12 col-sm-4 col-md-4 block"> <section class="frame panel panel-primary nc-content-list plugin-announcements"> <div class="panel-heading clearfix">仮想ブロック２</div> <div class="panel-body block"> ここに記事を書きます。 </div> </section> </div> </div>

【注意点】

このタグを書くユーザに「Javascript等のHTMLタグを許可する権限」が必要です。
管理 ＞ ルーム管理 で権限を付与してください。