サイトマップ
ブロックレイアウト？
ブロックレイアウト？ブロックの組み合わせでサイト内レイアウトを構築する仕組みは、
ＣＭＳなら concrete5、最近では、googleサイト（新バージョン）でも導入している
サイトレイアウトの新しいい？組み立て方法でしょうか。
記事スペースのカラムやサイドバーを一つのブロックとして割り当ててゆくですが、シリウスや
ブログに慣れ親しんでいると何とも最初はやりにくい...ま、それは置いときますね
まず、Microsoft edgeを見てみましょう
サイドバー以外はギャラリー対応のボックスをうまく並べてますね
門構えの構築や簡単ブログレイアウトもよいでしょうが、たまにはニュースサイト見たく？
フォトサイトにもできるかな?...こんなレイアウトも一サイトぐらいいいんじゃない...
もし、シリウスでブロックレイアウトというならこれでもいいかな？
でも、正確にいえばイチカラムでの入れ込みが良いとは思います。
イチカラムならサイドバーなしですが、ブロックをうまく配列すれば見た目は上例同様な
レイアウトを表示させることができます。
..ただし、サイドバー内テキストリンクは手動）
前置き
横3列や4列は、シリウス機能テーブル枠を使ってでもできますが、レスポンシブ作動では
横幅が狭まるだけで、ギャラリーブログみたいに縦配列しない...やればできるが面倒？
横2列は、レイアウト枠でも使えますが、デフォルトではやはり横に縮小するだけで縦並びに
ならない..
ですが、レイアウト枠は縦並びに対応できてます....
横2列なら以下ページでの解説するコードを参照ください。
レスポンシブ縮小に合わせて変化する記事内横並び画像の縦配列
さて、ブロックといってますが、シリウスに当てはめるとレイアウト枠の改造で対応できる？
と理解してのお話し...
でも、完全ブロックというわけでもない...類似程度の理解と？
ですので、ＣＭＳなどのブロック要素の配置、見た目は同じでもやりようは基本シリウス機能で
マウスでブロックを自由な配置などの操作はできません。
海外ブログなどを参照するとシリウスの2カラムでは、サイドバーが自動表示されるので
当てはまらい...
イチカラムならシリウス機能レイアウト枠の横サイズをうまく配分すれば可能かと？
（すみません、ブロックについてあれこれ言ってると先へ進めませんのでここで終わります）
この記事は、自分利用する際のコード置き場（忘却してしまう例が多い）の意味合いもあり
皆様に推奨するcontentsではありませんことご了承願います。
横3配列
スマートフォン画面対応...レスポンシブ作動は、画面を狭めてご確認ください。
左倉庫
レスポンシブ一番上
中央倉庫
レスポンシブ真ん中
右倉庫
レスポンシブ下
左倉庫 2段目
レスポンシブ一番上
中央倉庫2段目
レスポンシブ真ん中
右倉庫2段目
レスポンシブ下
横4配列
イチカラムでしたら、4列配置と考えられますね
一番端をサイドバーの意味合いでテキストリンク配置もできますね
記事1
テキスト
記事2
テキスト
記事3
テキスト
記事4
テキスト
配列の見た目は良いとして、記事の入れ込みは通常記載ではあるが、各コード内で
細かく編集するので、やや面倒..
ですので、実行する際はトップページだけ...
トップページだけイチカラムとして下層ページは2カラムならうまく配置処理できるかと
思います。
では、ＣＳＳ指示コードの配置へ進みましょう。
スタイルシートの一番下でもよいので以下を張り付け
（以下で3列 4列とも反映します）
.layout_tate3{
float:right;
}
.layout_tate3{
float:right;
}
/* 数値はあなたのサイト、レスポンシブに合わせて書き換え（これでもよい）*/
@media screen and (max-width: 640px) {
.layout_tate3{
float:none;
width:100%!important;
}
.layout_tate3{
float:none;
width:100%!important;
}
}
.layout_tate2{
float:left;
}
.layout_tate2{
float:left;
}
/* 数値はあなたのサイト、レスポンシブに合わせて書き換え（これでもよい）*/
@media screen and (max-width: 640px) {
.layout_tate2{
float:none;
width:100%!important;
}
.layout_tate2{
float:none;
width:100%!important;
}
}
横3配列
2カラム用のブロック例
上上ＤＥＭＯは、縦2段にしてますが、コピーコードは一段ですので、2．3段と追加する際は
複数配置です。
横3列配置で2カラムに使えると..
ただ、上から下まですべて組み分ける必要もなく、途中どまりで以下はイチカラムに
形成してもよいのではと...
もしくは、縦に複数配置すれば、ギャラリですかね？
ここから
<div class="layout_tate2" style="width:31.7%;padding:5px;">
<!-- ★▽左列ここから▽★ -->
<div class="nmlbox">
左倉庫
レスポンシブ一番上
</div>
<!-- ★△左列ここまで△★ -->
</div>
<div class="layout_tate2" style="width:31.7%;padding:5px;">
<!-- ★▽右列ここから▽★ -->
<div class="nmlbox">
中央倉庫
レスポンシブ真ん中
</div>
<!-- ★△右列ここまで△★ -->
</div>
<div class="layout_tate3" style="width:31.7%;padding:5px;">
<!-- ★▽右列ここから▽★ -->
<div class="nmlbox">
右倉庫
レスポンシブ下
</div>
<!-- ★△右列ここまで△★ -->
</div>
<br clear="all" />
横4配列
イチカラムでしたら、4列配置と考えられますね
一番端をサイドバーの意味合いでテキストリンク配置もできますね
ここから
<div class="layout_tate2" style="width:23%;padding:5px;">
<!-- ★▽左列ここから▽★ -->
<div class="nmlbox">
記事1
テキスト
</div>
<!-- ★△左列ここまで△★ -->
</div>
<div class="layout_tate2" style="width:23%;padding:5px;">
<!-- ★▽右列ここから▽★ -->
<div class="nmlbox">
記事2
テキスト
</div>
<!-- ★△右列ここまで△★ -->
</div>
<div class="layout_tate2" style="width:23%;padding:5px;">
<!-- ★▽右列ここから▽★ -->
<div class="nmlbox">
記事3
テキスト
</div>
<!-- ★△右列ここまで△★ -->
</div>
<div class="layout_tate3" style="width:23%;padding:5px;">
<!-- ★▽右列ここから▽★ -->
<div class="nmlbox">
記事4
テキスト
</div>
<!-- ★△右列ここまで△★ -->
</div>
<br clear="all" />
サイドバーでサイズを変える際は、数値で割合調整してください。
すべてが同じ割合でなくともよい...相応に適応...
認識しやすいように各枠内は、シリウス機能ボックス枠を入れてますが、削除で外れます。
枠を使う際、例では調整済みなんですが、
スタイルシートの右隣に以下コードあるのでが細くします。
.nmlbox {
border: 2px solid #CCCCCC;
}
当サイトは、0.5です....
ま、ここまででも使えると思いますが、構築の理解は個人差もあるので
自己努力で以降はお願いします。
後ほど気が付いたことあれば追記いたします。
関連記事を以下ご覧ください。