記事内にフレーム枠で区切りをつけてフェイスブック覧やメール窓口
その他　テキスト覧を複合で2列２段で表示するという形態があります

 

ブログや大手サイトではよくあるスタイルで自分サイトに取り入れたい方も
おられますね

 

 

ご質問内容

 

今回教えて頂きたいのは　HPにメディア掲載　登録　ブログ
Facebookページを4つの2列2段配列するにはどのようにしたら
よろしいでしょうか？

 

2015　0408

 

サポートよりの質問がよせられましたのでここに記載します

 

シリウスでそのよなスタイルを使用する際はレイアウト枠処理で進めます

 

 

---

 

シリウスサイトでの質問とお判断してご返事いたします

 

4つの枠構成でよろしいでしょうか

 

参考サイトの4つの枠構成確認致しました　

 

 

枠が4つあるように見えますが

 

2列の　2段重ね　ですね

 

シリウスの場合　記事カラム内のどこか良いところで

 

操作画面でボックス枠をクリック

 

次のメニューから　レイアウト枠を表示させます

 

レイアウト枠は　とこ2列の枠が　二つ並ぶとなります

 

その枠内にテキストを配置すればよいのです

 

 

ですが　参考ブログは一カラムで　その他は2カラムとかも
構築内で使われているようです

 

 

一カラムなら　サイト幅に合わせてサイズ限界まで自動拡大表示ですが

 

2カラムですと
サイトメニュー前で止まります

 

 

 

以下記載　二つあります

 

コピーしてサイト内に張り付ければ4つの枠が確認でき

 

枠内に各々コンテンツをいれます

 

 

 

以下は　デフォルトひとつ

 

改行例一つあります

 

 

デザインを加えれば　参考サイト見たく4構成になるはずです

 

 

<div class="layout_l" style="width:49%;">
<!-- ★▽左列ここから▽★ -->
<span style="color:#000000">メディア掲載</span>
左横
テキスト
テキスト
<!-- ★△左列ここまで△★ -->
</div>
<div class="layout_r" style="width:49%;">
<!-- ★▽右列ここから▽★ -->
右横
メールマガジン
テキスト
あれこれ
<!-- ★△右列ここまで△★ -->
</div>
<br clear="all" />

 

上2列が上段

 

ここから下段
<div class="layout_l" style="width:49%;">
<!-- ★▽左列ここから▽★ -->
<span style="color:#000000">ブログ</span>
テキスト
テキスト
<!-- ★△左列ここまで△★ -->
</div>
<div class="layout_r" style="width:49%;">
<!-- ★▽右列ここから▽★ -->
ファイスブックページ
メールマガジン
テキスト
あれこれ
<!-- ★△右列ここまで△★ -->
</div>
<br clear="all" />

 

 

 

 

 

改行後

 

 

 

<div class="layout_l" style="width:49%;">
<!-- ★▽左列ここから▽★ -->
<hr style="border-bottom:solid 1px #CCC" border="0" />
<span style="color:#000000">メディア掲載</span>
左横
テキスト
テキスト

 

 

<hr style="border-bottom:solid 1px #CCC" border="0" />
<!-- ★△左列ここまで△★ -->
</div>
<div class="layout_r" style="width:49%;">
<!-- ★▽右列ここから▽★ -->
<hr style="border-bottom:solid 1px #CCC" border="0" />
右横
メールマガジン
テキスト
あれこれ

 

 

<hr style="border-bottom:solid 1px #CCC" border="0" />
<!-- ★△右列ここまで△★ -->
</div>
<br clear="all" />
上2列が上段　　この3列行は削除
ボーダー線　削除可能
ここから下段
<div class="layout_l" style="width:49%;">
<!-- ★▽左列ここから▽★ -->
<hr style="border-bottom:solid 1px #CCC" border="0" />
<span style="color:#000000">ブログ</span>
テキスト　　　　　　　　　　　　　　　　　　　テキスト
テキスト
テキスト

 

 

<hr style="border-bottom:solid 1px #CCC" border="0" />
<!-- ★△左列ここまで△★ -->
</div>
<div class="layout_r" style="width:49%;">
<!-- ★▽右列ここから▽★ -->
<hr style="border-bottom:solid 1px #CCC" border="0" />
ファイスブックページ
メールマガジン
テキスト
あれこれ

 

 

 

<hr style="border-bottom:solid 1px #CCC" border="0" />
<!-- ★△右列ここまで△★ -->
</div>
<br clear="all" />

 

 

ボーダー線の色替えは#CCC　カラーコードを変える
線の太さは　border=1px数値追加
<hr style="border-bottom:solid 1px #CCC" border="0" />

 

スポンサーリンク

 

 

 

 

 

4つの広告＆テキスト覧を記事内に表示させたい
シリウスカスタマイズサポートフォーラム一覧
シリウスカスタマイズサポートフォーラム
シリウスカスタマイズ