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


    シリウスカスタマイズ 記事一覧を記事中段へ移動して情報を解り易く明示しましょう グーグル検索で好評かを得られるかも?

    スポンサー広告

    当該サイトコンテンツ関連記事

    画像を横並びで複数配置する場合はテーブル枠を使います

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

     

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

     

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

     

    関連記事

     

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

     

     

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

     

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

     

     

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

     

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

     

     

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

     


     

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

     

    手順

     

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

     

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

     

    上の記述を削除します

     

    <tr>
    <th>項目名1</th>
    <th>項目名2</th>
    <th>項目名3</th>
    <th>項目名4</th>
    </tr>

     

     

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

     

     

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

     

     

     


    追記

     

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

     

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

     

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

     

     

     


     

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

     

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

     

     

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

     

    スポンサーリンク

     

     

     

     

     

    シリウステーブルカスタマイズ記事一覧

    テーブルの囲い枠を外す方法

    2014 1207シリウスカスタマイズテーマ テーブル枠削除当該コンテンツは 上部ぱテ-ブルカスタマイズページからの継続解説となりますシリウステーブルカスタマイズここではテーブルを表示した際に見られる 囲い枠線を削除する手順を解説してまいりますテーブル表示の際現れる枠線は その時のスタイルによっては...

    ≫続きを読む

     

     

     

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

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト