2014　1206更新
シリウスカスタマイズテーマ　画像　テーブル

 

シリウスには　サイトで商品陳列ができるテーブルという機能が
標準で備えられております　青印

 

通常の作業方法は多く公開されておりますので
当サイトでは　画像挿入や画像バナーコードで表現するスタイルの
手順を解説します

 

関連記事

 

4つの横並びを指定してみました

 

 

デフォルトでは以下のスタイル
すみません　当サイトはスタイルシートいじくりすぎで
下の箇所が　通常は白なのですが　赤になります

 

上が　メニューで下が記事や画像となります
通常の文字は黒ですが　当サイトでは白です

 

 

画像などは高さが自動調整されますが　横サイズは
サイトの記事カラム幅に自動固定されます

 

通常は以下のように表示されます

 

 

ですが　この構成がお気に召さない方は　すこしカスタマイズしてみましょう

 

---

 

上部メニューを削除して画像のみにする

 

手順

 

デフォルトの記述を修正します

 

<!-- ★テーブルタグここから★ -->
<table class="dsc2item col4" cellspacing="1">
<tbody>
<tr>
<th>項目名１</th>
<th>項目名２</th>
<th>項目名３</th>
<th>項目名４</th>
</tr>
<tr>
<td>項目１</td>
<td>項目２</td>
<td>項目３</td>
<td>項目４</td>
</tr>
<!-- ★insertRow(<tr><td>項目１</td><td>項目２</td><td>項目３</td><td>項目４</td></tr>)★ -->
</tbody>
</table>
<!-- ★テーブルタグここまで★ -->

 

上の記述を削除します

 

<tr>
<th>項目名１</th>
<th>項目名２</th>
<th>項目名３</th>
<th>項目名４</th>
</tr>

 

 

以下の記述になります
項目に画像コード配置

 

 

<!-- ★テーブルタグここから★ -->
<table class="dsc2item col4" cellspacing="1">
<tbody>
<tr>
<td>項目１</td>
<td>項目２</td>
<td>項目３</td>
<td>項目４</td>
</tr>
<!-- ★insertRow(<tr><td>項目１</td><td>項目２</td><td>項目３</td><td>項目４</td></tr>)★ -->
</tbody>
</table>
<!-- ★テーブルタグここまで★ -->

 

 

 

---

追記

 

今回は上の行を省くという方法ですが　サイトの背景が白以外の場合
当サイトみたいなカラー背景の場合

 

スタイルシートから背景色を変更が簡単な方法としては
逆の手順で下枠を削除し　上枠を使うこともできます

 

グレーの背景は　テーブルＣＳＳでカラーコード変更ができます

 

 

 

---

 

以下は　4つのコンテンツを表示した例です

 

こちらはバナーコードを配置した例です

 

 

テーブル枠はサイトのメインカラム幅に合わせて自動調整されますが
画像サイズは　調整されませんので　同サイズの画像を作る必要があります

 

スポンサーリンク

 

 

 

 

シリウステーブルカスタマイズ
シリウスカスタマイズ