
- 2014
07/31
Thu 公開終了⇒Design218-CROSSxS2
category: ⇒公開終了

12作目※9/13承認 ⇒ 2014/07/31公開終了しました。
Design218*CROSSxS1
利用規約をご覧ください
シンプルな幅可変・2カラム(右)テンプレート
プラグイン(1)(2)は右カラム。プラグイン(3)はindexページでのみ、1つ目の記事の上に表示されます。indexエリア変数を使用しています。追記は折りたたみ式。
続きにTips×1つあります。参考までにどうぞ。
素敵な素材をお借りしました
ラメ入り紅茶様
「CROSS×S1」の2カラム
背景は「血痕」として配布されているものですが
今回は「生まれたてのウイルス」のイメージとしてお借りしました
その他・関連記事
CROSS:十字レイアウトの変更方法
「Design218-CROSSxS2」のスタイルシート編集部分で変更します
- /*---------------------------------------------------------
★レイアウト関連
---------------------------------------------------------*/
div#container
{
width:70%; ← ブログ全体の割合(70%を100%とする)
text-align:left;
margin:0 auto 0 auto;
padding:0;
}
div#primary-column
{
float:left;
width:66%; ← 70%(=100%)のうち66%が左カラム
}
div#secondary-column
{
float:right;
width:32%; ← 70%(=100%)のうち32%が右カラム
padding-left:2%; ← 70%(=100%)のうち2%が左カラムと右カラム間の余白
margin:150px 0;
}
.line1{
width:100%;
height:100%;
text-align:left;
border-bottom:1px solid #990000; ← 十字の横線:ヘッダー部(ブログタイトル下)
}
.line2{
width:100%;
height:100%;
text-align:left;
border-top:1px solid #990000; ← 十字の横線:フッター部(ページナビ上)
}
.line3{
width:70%; ← 十字の縦線を境として、その左が18%(余白側):右が82%(エントリー側)=100%
height:100%;
text-align:left;
margin:0 0 0 auto;
padding:30px;
border-left:1px solid #990000; ← 十字の縦線
}- /*---------------------------------------------------------
comment
formコメントの投稿