TOP

1カラムを2カラムのブロックレイアウトにしてみる

シリウスの1カラムレスポンシブテンプレートを使っての2カラムレイアウト変更とは?
通常の2カラム仕様例のお話ではなく、ブロック配分するレイアウト枠使用でのお話です。

 

ま、面倒なお話ですが、シリウスの2カラムのレイアウトとは、サイトバーにページのメニュー
そして、フリースペースを読み込ませれば4つの特定メニューウィンドウを表示させることは
できますね..

 

フリースぺースは、各ページで表示する、しないは設定できますことも前置き...

 

ですが、世の中に散乱?するサイト郡を拝見いたしますとサイドバーにサイト内に存在する
はずの他ページメニューが見当たらない...という例...ございますでしょう?

 

大くは、サイト内誘導のためメニューは認識できる範囲内にあるのですけど...

 

他コンテンツを見せない...
読者の集中力を分散させないような構築...アフィリサイト...

 

もしくは、ウィキペディアみたいな?
ウィキは、左に小さくメニューありですが、センター及び右サイドはページコンテンツのみですね

 

サイドバーで表示するのは、簡易なテキスト、リンクメニューはの記事コンテンツ関連のみ....

 

例が乏しく申し訳ございませんが、多くでは使わないけれど特異なサイトであれば1カラムで
ありながらも上でいうレイアウトを使ってみるのも一考ではないでしょうか?

 

 

あたし例では、3サイト使用しています..とある説明サイトで?

 

とりあえず簡単に作ってみました...こんな感じ...エントリーP使用..見た目は2カラムですね

 

フリースペースがページに合わせていくつでも自動作成できれば、何ら頭痛めることも
ないのですが、4つではね...余り見せたくない無関連メニューでも表示されてしまう..
非表示にすればスパースが開いてしまう..等々..

 

うまく構築できない...が理由のレイアウト枠使用なんです。

 

ただ、レイアウト枠を使うとなると記事、サイドバー記事の調整は手動ですので、デフォルト時
のようにスムーズに事は進みません..

 

ま、慣れればそんなでもありませんけど...

 

ブロックレイアウト配分は70対30ほどでは位置決めするとよいでしょう

 

最後に

 

レイアウト枠はそのまま使うとレスポンシブ作動の際、横幅が縮小して読みずらくなりますので
サイドバーが、記事巻末へ自動で移動するようCSS指定は忘れずに..

 

こちらのページ内にある記事に合わせ、HTMLコード作成、レイアウト枠CSS指定コードを
合わせ使えばスマートフォンでレスポンシブ反応いたします。
フッターをワードプレスみたいにワイド化してみよう

 

エントリーページをスタイルの割り込みでイチカラムにしてから始めるとよいかもしれません。

 

 


 


 

シリウスサイトを2カラムブロックレイアウトにすると?
シリウスレイアウトにブロック要素組み込む?
トップページ