TOP

2カラムを3カラムへ切り替える方法~その1

シリウスの現在用意されているレスポンシブテンプレートは、スマートフォンの閲覧を意識してか
3カラムは不要と1、2カラムのレイアウトに種類は限られておりますね

 

私も当初はサマーとフォンサイズでの閲覧が今後主要を占めるのだろうから2カラムでの
レイアウトでサイトを作るがご時世に合わせた構築方法だろう....とは理解しておりましたが
世の情勢を拝見しるとそうでもないような様子

 

ヤフーさんなど、PC閲覧ではいまだにトップは3カラム(スマホ用はスマホに合わせた
レイアウト)...ですね

 

で、私の理解でいえば、ブログ的、もしくは大型サイトでも無ければ2カラムで対応はできる
しかし、ある程度へとページが増量した、もしくはビジネス、アフィリエイトも含めて誘導する
リンクが多くなってきた...とするなら一部のサイトはトップページだけ3カラムでよいのだろう
....です

 

ですので、一部サイトに限り(当サイトも含めて)トップのみ3カラム仕様に切り替えました
以降、当サポートに切り替え方法を教えんかい?との強要がいくつも...うるさいほど...

 

で、致し方なく?公開いたします

 


 

レイアウトを3カラムにするカスタマイズの工程で、トップ以下の階層を2カラムにする際は、
class指定を行いますが説明は、順を追って進めますので当ページでは3カラムに変更する
手順で納め、class指定でカテゴリー以下を2カラムにする手順へと進みます

 

最初は、当サイトのかってではございますが、右サイドバーでリバース形式のスタイルで
進めてまいります

 

まずは、全てのレイアウトを3カラムにする手順を....デフォルトサイズ900pxを基本として

 

デフォルトレイアウトです

 

記事幅を狭めます
追加するサイドバーを183で入れ込む理由で

 

スタイルシートを開きます

 

ここで、width: 640px;を440に書き換えます

 

==================================================
メインコンテンツ
==================================================
*/
/* 記事領域
==================================================
*/
#main {
float: right;
overflow: hidden;
word-wrap: break-word;
width: 440px; */書き換えました*/
}

 

 

次にスタイルシートの一番下でよいので以下のBOXわくコードを
書き足してください

 

 

.sirius-box-1 {
font-size: px;
line-height: 14px;
 background-color: #000;
font-color: #fff;
top: -14px;
margin: 1em 0;
padding:14px;
width:183px;
 height:12px;
 border: 0.1px double #666;
 overflow: hidden;
 position: relative;
 left: 4px;
 background-position: right11px;
}

 

 

.sirius-box-2 {
font-size: 13px;
line-height: 1.0;
 background-color: #FFF;
 top: -21px;
margin: 0.5em 0;
  padding:10px;
 width:190px;
 border: 0.1px double #666;
 overflow: hidden;
 position: relative;
 left: 4px;
 background-position: right11px;
}

 

右にスペースが空きましたね

 

 

HTML TOPにクラス指定をします
class指定は、トップ、カテゴリー エントリーともすべてで...

 

<!-- ★ブログモードここまで★ -->
<% /AQNewEntries %>
<% /if %>
</div>
<div id="menu">

 

<% freeSpace3 %>
<% siteMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% subMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% freeSpace4 %>

 

</div>

 

ここに以下記載を追加します

 

<div class="sirius-box-1"> <span style="color:#FFFFFF"><span style="font-size:20px;">  information </span></span></div>
<% freeSpace5 %>
</div>

 

 

次にサイト全体設定からサブメニュー上段(フリースペース5)へ以下記載追加
見出しは未記入
改行する スタイルなしを指定

 

<div class="sirius-box-2">
記事メニュー

 

記事

 

記事

 

記事

 

記事
記事
</div>

 

 

 


 

まだ、レスポンシブコードは追加してません

 

ここではすべてのページを3カラムとする工程でした

 

class指定で、カテゴリー以下を2カラムにする説明も詳細を確認中なので
2日ほどお時間をいただきます

 

今日はここまで

更新履歴