デザインテンプレート設定

ページのデザインテンプレートを選択します。

※デザインテンプレートを変更すると、すでに設定している配色設定、カスタム指定が解除されます。

※設定変更後、このページに戻ってきます。

TOP画像設定

TOP画像を指定します。

外部公開されるページの上部に常時表示される画像です。

横 966pixcel × 縦 200 pixcelの画像を推奨します。

※「画像をアップロードする」によりアップロードと設定変更を行い、変更が完了後はこのページに戻ってきます。

TOP画像設定

配色設定

配色を設定します。

※設定変更後、このページに戻ってきます。

配色設定	1. 線の色 # 変更前変更後 2. ページ背景 # 変更前変更後 3. コンテンツ領域背景 # 変更前変更後 4. 枠色 # 変更前変更後 5. 見出し # 変更前変更後 6. 説明領域背景 # 変更前変更後 7. ボックスの背景 # 変更前変更後 8. 左メニュー枠色 # 変更前変更後 9. TOP背景 # 変更前変更後

背景画像設定

背景画像を指定します。

※「画像をアップロードする」によりアップロードと設定変更を行い、変更が完了後はこのページに戻ってきます。

背景設定

カスタム設定

スタイルシート(CSS)をカスタム指定します。

指定を行うことでオリジナルのページデザインを構築することができます。

指定するにはXHTML、CSSの知識が必要です。

※設定変更後、このページに戻ってきます。

カスタムCSS	/============ ☆ カスタマイズはこちら ☆ ==============/ #navi { position:absolute; top:183px; /-- ヘッダー画像上部の高さ＋ヘッダー画像の高さ --/ height:50px; } #menu01 { position:absolute; display: block; top:0px; left:-5px; width:158px; /-- メニューバーの幅 --/ height:50px; /-- メニューバーの高さ --/ background:url(http://chixi.jp/chixisblog_menu/top1_off.png) no-repeat; font-size: x-smal; } #menu01:hover { background:url(http://chixi.jp/chixisblog_menu/top1_on.png) no-repeat; color:#ff1493; text-decoration:none; } #menu01:link { color:#000000; text-decoration:none; } #menu01:visited { color:#000000; text-decoration:none; } #menu01:active { color:#ff1493; text-decoration:none; } #menu02 { position:absolute; display: block; top:0px; left:153px; width:158px; height:50px; background:url(http://chixi.jp/chixisblog_menu/top2_off.png) no-repeat; } #menu02:hover { background:url(http://chixi.jp/chixisblog_menu/top2_on.png) no-repeat; color:#ff1493; text-decoration:none; } #menu02:link { color:#000000; text-decoration:none; } #menu02:visited { color:#000000; text-decoration:none; } #menu02:active { color:#ff1493; text-decoration:none; } #menu03 { position:absolute; display: block; top:0px; left:311px; width:158px; height:50px; background:url(http://chixi.jp/chixisblog_menu/top3_off.png) no-repeat; } #menu03:hover { background:url(http://chixi.jp/chixisblog_menu/top3_on.png) no-repeat; color:#ff1493; text-decoration:none; } #menu03:link { color:#000000; text-decoration:none; } #menu03:visited { color:#000000; text-decoration:none; } #menu03:active { color:#ff1493; text-decoration:none; } #menu04 { position:absolute; display: block; top:0px; left:469px; width:158px; height:50px; background:url(http://chixi.jp/chixisblog_menu/top4_off.png) no-repeat; } #menu04:hover { background:url(http://chixi.jp/chixisblog_menu/top4_on.png) no-repeat; color:#ff1493; text-decoration:none; } #menu04:link { color:#000000; text-decoration:none; } #menu04:visited { color:#000000; text-decoration:none; } #menu04:active { color:#ff1493; text-decoration:none; } #menu05 { position:absolute; display: block; top:0px; left:627px; width:158px; height:50px; background:url(http://chixi.jp/chixisblog_menu/top5_off.png) no-repeat; } #menu05:hover { background:url(http://chixi.jp/chixisblog_menu/top5_on.png) no-repeat; color:#ff1493; text-decoration:none; } #menu05:link { color:#000000; text-decoration:none; } #menu05:visited { color:#000000; text-decoration:none; } #menu05:active { color:#ff1493; text-decoration:none; } #menu06 { position:absolute; display: block; top:0px; left:785px; width:160px; height:50px; background:url(http://chixi.jp/chixisblog_menu/top6_off.png) no-repeat; } #menu06:hover { background:url(http://chixi.jp/chixisblog_menu/top6_on.png) no-repeat; color:#ff1493; text-decoration:none; } #menu06:link { color:#000000; text-decoration:none; } #menu06:visited { color:#000000; text-decoration:none; } #menu06:active { color:#ff1493; text-decoration:none; } #menu-font { font-size:12; top:9px; position:relative; left: 2.5em; } /============ ☆ カスタマイズはここまで ☆ ==============/ CSSで指定します。

カスタムCSS

/*============ ☆ カスタマイズはこちら ☆ ==============*/
#navi {
position:absolute;
top:183px; /*-- ヘッダー画像上部の高さ＋ヘッダー画像の高さ --*/
height:50px;
}

#menu01 {
position:absolute;
display: block;
top:0px;
left:-5px;
width:158px; /*-- メニューバーの幅 --*/
height:50px; /*-- メニューバーの高さ --*/
background:url(http://chixi.jp/chixisblog_menu/top1_off.png) no-repeat;
font-size: x-smal;
}
#menu01:hover {
background:url(http://chixi.jp/chixisblog_menu/top1_on.png) no-repeat;
color:#ff1493;
text-decoration:none;
}
#menu01:link {
color:#000000;
text-decoration:none;
}
#menu01:visited {
color:#000000;
text-decoration:none;
}
#menu01:active {
color:#ff1493;
text-decoration:none;
}

#menu02 {
position:absolute;
display: block;
top:0px;
left:153px;
width:158px;
height:50px;
background:url(http://chixi.jp/chixisblog_menu/top2_off.png) no-repeat;
}
#menu02:hover {
background:url(http://chixi.jp/chixisblog_menu/top2_on.png) no-repeat;
color:#ff1493;
text-decoration:none;
}
#menu02:link {
color:#000000;
text-decoration:none;
}
#menu02:visited {
color:#000000;
text-decoration:none;
}
#menu02:active {
color:#ff1493;
text-decoration:none;
}

#menu03 {
position:absolute;
display: block;
top:0px;
left:311px;
width:158px;
height:50px;
background:url(http://chixi.jp/chixisblog_menu/top3_off.png) no-repeat;
}
#menu03:hover {
background:url(http://chixi.jp/chixisblog_menu/top3_on.png) no-repeat;
color:#ff1493;
text-decoration:none;
}
#menu03:link {
color:#000000;
text-decoration:none;
}
#menu03:visited {
color:#000000;
text-decoration:none;
}
#menu03:active {
color:#ff1493;
text-decoration:none;
}

#menu04 {
position:absolute;
display: block;
top:0px;
left:469px;
width:158px;
height:50px;
background:url(http://chixi.jp/chixisblog_menu/top4_off.png) no-repeat;
}
#menu04:hover {
background:url(http://chixi.jp/chixisblog_menu/top4_on.png) no-repeat;
color:#ff1493;
text-decoration:none;
}
#menu04:link {
color:#000000;
text-decoration:none;
}
#menu04:visited {
color:#000000;
text-decoration:none;
}
#menu04:active {
color:#ff1493;
text-decoration:none;
}

#menu05 {
position:absolute;
display: block;
top:0px;
left:627px;
width:158px;
height:50px;
background:url(http://chixi.jp/chixisblog_menu/top5_off.png) no-repeat;
}
#menu05:hover {
background:url(http://chixi.jp/chixisblog_menu/top5_on.png) no-repeat;
color:#ff1493;
text-decoration:none;
}
#menu05:link {
color:#000000;
text-decoration:none;
}
#menu05:visited {
color:#000000;
text-decoration:none;
}
#menu05:active {
color:#ff1493;
text-decoration:none;
}

#menu06 {
position:absolute;
display: block;
top:0px;
left:785px;
width:160px;
height:50px;
background:url(http://chixi.jp/chixisblog_menu/top6_off.png) no-repeat;
}
#menu06:hover {
background:url(http://chixi.jp/chixisblog_menu/top6_on.png) no-repeat;
color:#ff1493;
text-decoration:none;
}
#menu06:link {
color:#000000;
text-decoration:none;
}
#menu06:visited {
color:#000000;
text-decoration:none;
}
#menu06:active {
color:#ff1493;
text-decoration:none;
}

#menu-font {
font-size:12;
top:9px;
position:relative;
left: 2.5em;
}
/*============ ☆ カスタマイズはここまで ☆ ==============*/

CSSで指定します。

パーツ名	表示場所	内容
プロフィール	左右非表示
タグ一覧	左右非表示
ユーザーリンク	左右非表示
フリーエリア1(枠あり)	左右非表示	<div id="navi"> <a id="menu01" href="http://chixi.jp/?m=pc&a=page_o_public_invite" title="新規登録" target="_blank"><span id="menu-font">新規登録</span></a> <a id="menu02" href="http://chixi.jp/" title="SNS Chixi(ちぃ)" target="_blank"><span id="menu-font">SNS Chixi(ちぃ)</span></a> <a id="menu03" href="http://tmix.jp/chixi" title="WEBお絵かきＴシャツ" target="_blank"><span id="menu-font">WEBお絵かきＴシャツ</span></a> <a id="menu04" href="http://chixi.jp/?m=pc&a=page_o_sns_inquiry_other" title="お問い合わせ" target="_blank"><span id="menu-font">お問い合わせ</span></a> <a id="menu05" href="http://chixi.jp/?m=pc&a=page_o_sns_inquiry_other" title="ヘルプ" target="_blank"><span id="menu-font">ヘルプ</span></a> <a id="menu06" href="http://www.stellalink.co.jp/" title="ステラリンク" target="_blank"><span id="menu-font">ステラリンク</span></a> </div>
カレンダー	左右非表示
投稿月一覧	左右非表示
フリーエリア2(枠あり)	左右非表示
フリースペース2(枠なし)	左右非表示
タグクラウド	左右非表示
フリースペース1(枠なし)	左右非表示	<iframe src="http://chixi.jp/blogparts/main.php?id=0&rand=on&bgcolor=FFCDCC&fontcolor=FF2D3A" height="300" width="200" frameborder="0"></iframe>

デザイン設定

デザインテンプレート設定

TOP画像設定

配色設定

背景画像設定

カスタム設定

配置設定

配置設定