レイアウトの追加について

2017年9月4日 at 19:01

C5 8.2.1を使用中です。

テーマ「パレット」のフッターエリアにレイアウトの追加で全幅では、「グリッド:Twitter bootstrap」がありますが、Right SidebarやLeft Sidebarでは「グリッド:Twitter bootstrap」は選べず、「グリッド:自由形式のレイアウト」しか選べません。
サイドバーがあるページテンプレートでも「グリッド:Twitter bootstrap」を選べるようにする方法をご教示ください。

タグ:

Re: レイアウトの追加について

2017年9月5日 at 11:41
モモさま

フッターエリアはページフッターのことですよね。

サイドバーがあるページテンプレートでも「グリッド:Twitter bootstrap」を選べるようにする方法をご教示ください。

結論から書くと right_sidebar.php、left_sidebar.php の

<?php
$a = new Area('Page Footer');
//$a->enableGridContainer();
$a->display($c);
?>

でコメントアウトしている行をアンコメントしてください。
それで、Bootstrap を選択できるようになります。

何故、コメントアウトしているかというと『左右に余白を作りたくなかったから』です。
ページヘッダーエリアも同じようにコメントアウトしていますので、ヘッダーにあるパンくずのようにページの左右いっぱいまで表示します。
ただ、Bootstrap を使いたい場合もあると思うので、最低限の修正ですむようにコメントアウトにしています。
Bootstrap を使っても余白ができないようにもできるんですが、色々とね... (^-^)

application フォルダにテーマをコピーして修正してくださいね。

よろしくお願いします。
 

Re: レイアウトの追加について

2017年9月5日 at 14:33
ありがとうございます。
アンコメントしたら、Bootstrapが使えるようになりました。
が、反対に左右に余白がないブロックができなくなりました。
トップページでは両立しているのですが、サイドバーありではできないのでしょうか?
 

Re: レイアウトの追加について

2017年9月5日 at 15:17
モモさま

反対に左右に余白がないブロックができなくなりました。

上記の説明の通りです。
余白を無くすために Bootstrap を使っていません。

トップページでは両立しているのですが、サイドバーありではできないのでしょうか?

どこのエリアでしょうか?
ホームのページフッターエリアでも、同じように左右に余白ができます。
これは、Bootstrap の仕様で必然的に幅が決まります。(1170px、970px、750px など...)
なので、余白を消したい箇所の幅を100%になるようにカスタマイズすれば、左右の余白はなくなると思います。

よろしくお願いします。
 

Re: レイアウトの追加について

2017年9月5日 at 15:35
トップページと同じ仕様にしたいのですが、、

http://ast-kikou.com/c5/ ←トップページ

http://ast-kikou.com/c5/information/greeting ←右サイドバー付きページ
 

Re: レイアウトの追加について

2017年9月5日 at 16:48
サイドバーのページの表示が正しいと思います。
ホームのマップ部分に Bootstrap が適用されていないようですが...

マップの下に画像ブロックを配置しても同じように左右いっぱいになりますか?
 

Re: レイアウトの追加について

2017年9月5日 at 17:09
トップページのマップの下に大きな画像を入れましたが、コンテンツ幅しか表示されませんでした。
 

Re: レイアウトの追加について

2017年9月5日 at 17:26
コンテンツ幅しか表示されませんでした。

ですよね。
それが正しいと思います。
なので、Google マップブロックの箇所がおかしいと思うのですが、普通にブロックを配置したんですよね?
 

Re: Re: レイアウトの追加について

2017年9月5日 at 17:46
そうです。
何もブロックのないエリアでしたが、マップを入れて、レイアウトを2つに分割したのを追加したと思います。
 

Re: レイアウトの追加について

2017年9月5日 at 18:05
おそらく、Google マップブロックを追加しても同じように余白ができると思うので、それを元にカスタマイズした方がいいと思います。
 

Re: レイアウトの追加について

2017年9月5日 at 18:37
色々試しましたが、トップページと同様にはできませんでした。
どちらかを取るしかないと言うことですか、、
ありがとうございました。
 

Re: レイアウトの追加について

2017年9月5日 at 18:51
トップページと同様にはできませんでした。

この余白のない表示が、正常な表示ではないと思います。
なぜ、このようになったのかはわかりませんが、これは一旦削除した方がいいのでは?

ちなみに、サイドバーのページでも余白のない表示にはできますよ。
『レイアウトデザインを編集』とスタイルシートの記述で、左右100%表示は可能です。
 

Re: レイアウトの追加について

2017年9月6日 at 10:45
どのようにCSSに記述するのでしょう?
左右100%にするとすべてが余白なしになりませんか??
 

Re: レイアウトの追加について

2017年9月6日 at 11:28
モモさま

スタイルシートだけではできません。
上記のように『レイアウトデザインを編集』とスタイルシートで実現できます。
添付画像を見てもらうとわかると思いますが、参考サイトのように上が2カラム、下が余白無しです。

答えを書くのは簡単なんですが...

ヒントとしては、『<div class="container">』の横幅を100%にして左右のパディングを0にすれば OK です。
でも、これだけでは書かれているようにすべての『<div class="container">』の余白がなくなります。
なので、余白をなくしたい『<div class="container">』だけに適用させるために『レイアウトデザインを編集』を利用するということです。

もし、書いてることが全然わからないということであれば、余白なしにする方法を書きますね。

よろしくお願いします。
 

Re: レイアウトの追加について

2017年9月6日 at 13:58
ありがとうございます。
レイアウトデザイン編集でグリッドコンテナを無効にしたら同じような表示になりました。
 

Re: レイアウトの追加について

2017年9月6日 at 15:12
私が考えていた方法とは違いますが、その方法でもできますね。
とりあえず、思ったように表示することができてなによりです (^-^)