2014　1227
シリウステンプレートカスタマイズテーマ　フリースペースをコンテンツ分け
シリウスのデフォルトテンプレート3カラム対応解説

 

 

シリウスの3カラムでフリースペースのデフォルト表示は
左にサイトメニューの上にｈ３　下にｈ４が表示されます

 

右のはフリースペースｈ５　ｈ６を表示設定となっています

 

表示はカテゴリー　エントリーページすべてに同スタイルが適用されますが

 

各ページのフリースペースの表示設定で記事コンテンツに合わせて
表示する　しないの選択が限られた範囲で可能であり
エントリーページに限り　ページ指定で一カラムという手法はできます

 

これがシリウスの難点ともいえるユーザーの悩みかなと

 

トップページのみならずほとんどのページで同じ広告やテキストでは
何とも？と思われる方もおられるかと思います

 

 

とりあえずは　シリウス機能として
ページごとにフリースペースの表示をする　しないは指定できますが

 

フリースペースが消えただけで記事カラムサイドに妙な空間ができるだけで

 

余り使える機能でもありません

 

---

 

組み合わせを増やす

 

いまいちの少数選択ですが

 

ｈ３　ｈ４フリースペースを左へ移動すると　

 

フリースペースの表示をする　しないでの指定組み合わせが
増えてやりやすくなります

 

---

 

 

フリースペースは全体設定で表示される

 

メインメニュー
上段　ｈ３
下段　ｈ４

 

サブメニュー
上段　ｈ５
下段　ｈ６

 

 

上記4フリースペースをトップ　カテゴリー　エントリーで組み合わせてか
もしくはコンテンツに合わせて構成を増やす方法を解説します

 

 

エントリーは個別指定で一カラムにできますので　あとのスタイル表現

 

 

---

 

 

今回の構成方法は
トップではフリースペースのｈ３メニューを単独かもしくはｈ４を
合わせて表示させ広告やテキスト配置

 

 

カテゴリー　エントリーでは単独か何れかを組合わせ分けての
メニュースタイルが配置出来ます

 

 

 

ｈ３　ｈ４フリースペースの位置替え

 

ここでは表示スタイルを説明して　カスタマイズ方はページ後半で記載

 

 

デフォルトでは　ｈ３はサイトメニューの上　
ｈ４はサイトメニューの下に表示されます

 

サブメニュー
上段　ｈ５
下段　ｈ６
は　右カラムに表示されますが　ｈ３　ｈ４メニューを左へ移動します

 

すると右に全てが表示されます

 

フリースペースを右に4つ移動すればカテゴリーエントリーで
好みの組み合わせができるようになるのです

 

ですが　トップページでは
ｈ３　ｈ４　ｈ５　ｈ６全てをトップに置く必要はありませんので

 

ここでは　ｈ３　まはｈ４を表示とします

 

 

---

 

 

どのようにフリースペーを分けるかに進みます

 

デフォルトスタイル変更は　各ＨＴＭＬテンプレートから行います

 

編集箇所です

 

デフォルトコード

 

<!-- ★サイドメニューここから★ -->
<div id="menu">
<% freeSpace3 %>

 

<% siteMenu %>
<% freeSpace4 %>
</div>
<!-- ★サイドメニューここまで★ -->

 

 

<!-- ★サブメニューここから★ -->
<div id="rmenu">
<% freeSpace5 %>

 

<% subMenu %>

 

<% freeSpace6 %>
</div>
<!-- ★サブメニューここまで★ -->

 

 

---

 

ｈ３　ｈ４フリースペースをｈ５　ｈ６のある右へ移動する記述

 

<% siteMenu %>
は　ページを表示する左のデフォルトメニューですのでそのままにします

 

変更後
<!-- ★サイドメニューここから★ -->
<div id="menu">

 

 

<% siteMenu %>

 

</div>
<!-- ★サイドメニューここまで★ -->

 

 

<!-- ★サブメニューここから★ -->
<div id="rmenu">
<% freeSpace3 %>
<% freeSpace4 %>
<% freeSpace5 %>

 

<% subMenu %>

 

<% freeSpace6 %>
</div>
<!-- ★サブメニューここまで★ -->

 

カテゴリー　エントリーページとも同作業を行います

 

<% subMenu %>を右から左に移動する場合は

 

ＩＤ＝menu内に移動してください

 

---

 

 

 

 

トップページのみｈ３メニューを表示させる

 

<!-- ★サイドメニューここから★ -->
<div id="menu">

 

<% siteMenu %>

 

</div>
<!-- ★サイドメニューここまで★ -->

 

 

<!-- ★サブメニューここから★ -->
<div id="rmenu">

 

<% freeSpace3 %>
<% subMenu %>

 

</div>
<!-- ★サブメニューここまで★ -->

 

ｈ４も表示させたい場合は　subMenuの下に
<% freeSpace4 %>を入れておいてください

 

 

---

 

以上が書き換え出来ましたら　

 

全体設定からフリースペースの非表示組み合わせで

 

ページごとに表示させたいフリースペースを指定します

 

上記に変更すると　全てのフリースペースを非表示にしない限り
何れか一つのフリースペースを表示できます

 

スポンサーリンク

 

 

フリースペースでメニュー構成を増やすカスタマイズ
シリウスでホットなクールテンプレートカスタマイズ
シリウスカスタマイズトップ