スティッカム「新プロフ」対応のカスタマイズ（CSS編）

「新プロフ」対応の
カスタマイズ

Bill is a funny painter.

スティッカム「新プロフ」対応のカスタマイズ

あらかじめ用意された『サイトテンプレート』に飽き足らない方の為の
『新プロフ』カスタマイズの仕方解説： （ｽﾀｲﾙｼｰﾄ編集・CSS編）

基本的にオリジナルテンプレートの作り方は、「旧プロフ」での手順と同じです。
ただし、#或いは.から始まる「ブロック要素の割り当て名称」が異なっています。
また、無料会員の場合、使えるCSSに制限があります。
旧プロフカスタマイズ

1.バックに写真を貼った基本パターン（ブロック背景色有）


上の画像はプロフのイメージです。

「旧プロフィール」で使えた「半透明にする」   filter: Alpha(opacity=80);  は、使用不可のようです。
ただし、「透明」にする  background:transparent;  は、可能かもしれません。
下記のCSSの設定は、上記の画像のプロフのものです。（透明化されたものは次の項でご紹介します）

body{
background-image: url('http://***.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
#userTop .nav ul{background:#99FF99;
color:#000000;
font-size:9pt;
}
#userTop .nav ul li a{background:#99FF99;
color:#000000;
font-size:9pt;
}
.section .header{background:#99FF99;
color:#000000;
font-size:9pt;
}
.section .header h2,.section .header p a{background:#99FF99;
color:#000000;
font-size:9pt;
}
.section{background:#CCFFFF;
filter: Alpha(opacity=00);
color:#000000;
font-size:9pt;
border-style:solid;
border-width:2px;
border-color:#00CED1;
}
#userTop,.section .contents{background:#CCFFFF;
filter: Alpha(opacity=00);
color:#000000;
font-size:9pt;
border-style:solid;
border-width:2px;
border-color:#00CED1;
}
.section .contents a{background:#CCFFFF;
filter: Alpha(opacity=00);
color:#000000;
font-size:9pt;
border-style:solid;
border-width:2px;
border-color:#00CED1;
}

上記のコードをコピーして、マイページのオリジナルテンプレートの編集画面に貼り付けると同じように反映されます。編集はIEで行う方がよいでしょう。Firefoxではスクロールしない不具合があります。
filter: Alpha(opacity=00); は、本来必要ないと思われるのですが、反映結果がおかしくなるので一応入れておいて下さい。（調査中）

2.バックに写真を貼った基本パターン（ブロック透明化）

上の画像は上のソースのうち background:#CCFFFF; を background:transparent; に入れ替えたプロフのイメージです。 無料会員では半透明は不可ですが、透明化は可能です。
A-cats-A （キャッツ）様より、透明化が可能との情報を掲示板に頂きました。御礼申し上げます。

body{
background-image: url('http://***.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
#userTop .nav ul{background:#99FF99;
color:#000000;
font-size:9pt;
}
#userTop .nav ul li a{background:#99FF99;
color:#000000;
font-size:9pt;
}
.section .header{background:#99FF99;
color:#000000;
font-size:9pt;
}
.section .header h2,.section .header p a{background:#99FF99;
color:#000000;
font-size:9pt;
}
.section{background:transparent;
filter: Alpha(opacity=00);
color:#000000;
font-size:9pt;
border-style:solid;
border-width:2px;
border-color:#00CED1;
}
#userTop,.section .contents{background:transparent;
filter: Alpha(opacity=00);
color:#000000;
font-size:9pt;
border-style:solid;
border-width:2px;
border-color:#00CED1;
}
.section .contents a{background:transparent;
filter: Alpha(opacity=00);
color:#000000;
font-size:9pt;
border-style:solid;
border-width:2px;
border-color:#00CED1;
}

以下が「無料会員が使える適応可能なCSS」です。

※適用可能なCSS
border(none,0-3px) / padding(top,bottom:0-100px left,right:0-50px) / font-family / font-style / font-variant / font-weight / font-size / font / color / background / background-attachment / background-color / background-image / background-position / background-repeat / cursor / text-shadow / text-decoration / text-align / text-justify / vertical-align / text-underline-position / text-transform / white-space / line-break / word-break / word-wrap / line-height / list / marker
（スティッカム　マイページのデザイン管理より引用）

現在「新プロフィール」について私自身不明な点が多いです。分かり次第記事に反映したいと思います。
また、有料の「マイスタイルプラン」ではCSSの制限は少ないようです。おそらく「旧プロフ」並みのカスタマイズは可能なようです。

ページのTopへ

お知らせ：びるのホームページは、いろいろなコンテンツを用意しております。よかったら覗いてみてください。