現在の閲覧者数:
本家「びるのホームページ」へ
外部認証ログイン
Twitter ID


共通メニュー
スティッカム「プロフ」のカスタマイズ(CSS編)



  「プロフ」の
カスタマイズの手順

目次

  ・第一章
(背景画の準備)

  ・第二章
(CSSつくーるで、コードを作る)

  ・第三章-1
(CSS編集・半透明サンプル)

  ・第三章-2
(CSS編集・透明サンプル1)

  (CSS編集・透明サンプル2)

  ・第三章-3
(CSS編集・壁紙タイルサンプル)

  ・参考リンク集



  ※ この記事への問い合わせは、掲示板にお願いします。 




Bill is a funny painter.

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

あらかじめ用意された『サイトテンプレート』に飽き足らない方の為の
『プロフ』カスタマイズの仕方解説 : 
(スタイルシート編集・CSS編)


Homeへ番外編へ

★番外編も設けました。「NEXT」をクリック!

プロフのカスタマイズ、みなさん、苦労されてるんですね。何人かのメンバーから問い合わせがございました。
文章で伝えるのは、とっても難しいのですが、カスタマイズの仕方一応書いてみます。
専門家ではないので、誤り等あるかもしれませんが、ご容赦ください。
今後、画像を添えて、わかりやすい解説ページなるよう改良するつもりですが、とりあえず文字にて手順を紹介いたします。




★プロフィール(プロフ)のカスタマイズ

第一章(背景画の準備)

1:背景画の入手  プロフィールの背景に使う、背景画を用意します。
 自分で描いた絵・写真や 素材屋さんからお気に入りの映像を手に入れます。
 背景画はjpg.gif.png等のファイル形式で配布されています。
 ただし、stickamに画像をアップロードする場合は原則jpg形式のみです。


2:背景の出し方をあらかじめ決めてそれに適した画像に加工する。

 1.200x200ピクセルなどのサイズで描かれた絵を敷き詰めて背景とする。
 2.一つの写真を画面いっぱいに表示する。
 
 大きく分けて2つの方法があります。
 2.の場合 映像を1280x800ピクセル位に「リサイズ」する必要があります。
 画像ソフトなどで、大きくしてください。「その際アスペクト比を崩さないよう注意してください」


3:背景画のアップロード
 通常背景画は、インターネット上にアップされた画像をurlで指定して表示させるのでどこかのサイトにアップロード する必要があります。

 1.スティッカムの「写真」へのアップロード
 2.「直リンク」が可能な 自分の持つ、ブログやHPのアドレスからurlを指定
 3.スティッカムの「ブログパーツ設定」から「スティッカムのプレーヤーのスキン」として、アップロード


以上3つの方法があります。

1.の場合、すでにスティッカムの「写真」にアップしたものを流用したい場合、欠点は「ネタばれ」してしまうこと。

2.の場合、「直リンク」が可能でなければできないという欠点があります。
  (多くの無料HPは直リンクできない場合があります。)利点はファイル形式を問わないということです。
  たとえばアニメーションgifの画像が利用でき、動きのある背景になります。
※注:ただし、他人のHPからの「直リンク」はルール違反です。絶対にやめましょう。

3.の場合、これは私が推奨する方法です。スティッカム以外のサイトを利用するのは面倒という人向きです。
  「ネタばれ」もしません。ただ、アップロードできるファイルサイズに制限があります。(300KB)まで またjpgのみです。


ページのTopへ


第二章(CSSつくーるで、コードをつくる)

「CSSつくーる」にて、CSS(スタイルシート)のコード(ソース)をつくり マイページの所定の場所に貼り付ける。

「CSSつくーる」では、
1.「メッセージ編集」・・・メッセージの編集
2.「背景編集」・・・背景画あるいは色の設定
3.「コンテンツ編集 [タイトル]」・・・タイトル部分の背景・色・文字色・サイズの設定
4.「コンテンツ編集 [内容]」・・・プロフィール・メッセージの背景・色・文字色・サイズの設定、
  および枠線の太さ・線種・色の設定

ただし、1.「メッセージ編集」は、マイページ上でも出来ますので何も書かずにおきます。
後半の2〜4の項目がCSSの設定です。 これらの部分に、分けて設定をすることになります。

とりあえず、3.4の項目を設定してみます。色の指定に限りがありますがとりあえず自分のイメージに合った色等を
プレビューを見ながら選択します。

大体決まったら、「CSS作成」を押して、コードを表示させます。
コピーして、オリジナルテンプレート編集画面の
<style type="text/css">が表示されているページに貼り付け保存します。

(その時 あらかじめ入っている。<style type="text/css">の文字は消去してから貼り付けたほうがよいでしょう。
「CSSつくーる」から掃きだされたコード(ソース)にも<style type="text/css">の文字が入っているのでダブってしまうからです。)

保存が終わったら、プロフィールを確認してみましょう。

以下のリンク先は、「CSSつくーる」の使い方の参考になるページです。
「CSSつくーる」によって、どこが編集されるかが「図解」されています。
「音の魔術師」さんの『プロフィールページのカスタマイズ講座』より

ページのTopへ


第三章-1(CSSの編集)

メッセージ部半透明サンプル


CSSのコード(ソース)をいじってカスタマイズする。

CSSの記述方法は、http://www.tohoho-web.com/css/index.htmを参考にしてください。

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

下記に現在の私のプロフのCSSの設定をコピーいたしましたのでそれを参考にしてください。
<style type="text/css">


body{
background-image: url('http://***.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
div.profilePhotoTitle, div.profileInfoTitle, div.profileAboutTitle, div.profileMediaTitle, div.profileCommentTitle, div.profileFriendTitle, div.profileMessageTitle, div.profileRssTitle{
background:#99FF99;
color:#000000;
font-size:9pt;
}
#profilePhoto, #profileFriend, #profileComment,#profileAbout, #profileInfo, #profileMessage, #profileMediaPhoto, #profileMediaAudio,#profileMediaVideo, div.profileRss{
background:#CCFFFF;
filter: Alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
color:#000000;
font-size:9pt;
border-style:solid;
border-width:2px;
border-color:#00CED1;
}



</style>
上記のコードだけでは、背景画のアドレスが架空のものになっているので、表示されません。
しかし、コードをコピーして、マイページのオリジナルテンプレートの編集画面<style type="text/css">が表示されているページに貼り付けた後、自分のアップした画像のurlをbackground-image: url('http://***.jpg');の行に書き込み保存さえすれば、同じように反映されるはずです。お試しください。




以下は、CSSコードの解説です。

上から5行目の
background-image: url('http://***.jpg');()内' 'に囲まれたところにあらかじめアップした背景の画像のアドレスを入れます。
(私のように一つの写真を画面いっぱいに表示する場合、あらかじめ背景画のサイズは1280x800位にリサイズして アップしてください。)

※注
アドレスは、スティッカム「写真」へアップした場合、アップした写真の「拡大写真」のページで右クリック→プロパティー→アドレスの部分をコピー、画面を閉じて上記の説明の所に貼り付けてください。
「スティッカムのプレーヤーのスキン」の保存場所にアップした場合は、アップされた画像の縮小画像で、右クリックして同じ操作をしてください。
「自分のHPスペース」の場合は アップしたアドレスがわかっていると思うのでそれを入力してください。


次の行の
background-repeat: no-repeat;
このno-repeadは、背景画を繰り返さない設定です。

次の行の
background-attachment: fixed;
このfixedは、背景画を固定して、スクロールさせない設定です。

以上の設定は、CSSの背景画では、比較的重要です。

現在、メッセージの部分が半透明の設定になっています。
filter: Alpha(opacity=80);  この部分です。
この(opacity=80)の内の数字を変えると透明の度合が変わります。0に近づくほど透明になります。
2008.11.8 FireFox等のIE以外のブラウザ対応の為、一部コード追加

半透明や透明の設定は、http://www.tohoho-web.com/css/reference.htm#Filterこのページを参考にしてください。


最後のほうの行に border-color:#00CED1; があります。  この:(コロン)のあとの#00CED1は色を表します。
この部分をたとえば#000000とすれば「黒」に#FFFFFFにすれば「白」になります。
http://www.tohoho-web.com/wwwcolor.htmを参考にすれば文字の打ち直しで 色を変えることができます。

ページのTopへ


第三章-2(CSSの編集)

メッセージ部透明サンプル1



    
上の画像は以前作ったプロフのイメージです。

下記にそのプロフのCSSの設定をコピーいたしました。
<style type="text/css">


body{
background-image: url('http://***.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
div.profilePhotoTitle, div.profileInfoTitle, div.profileAboutTitle, div.profileMediaTitle, div.profileCommentTitle, div.profileFriendTitle, div.profileMessageTitle, div.profileRssTitle{
background:#99FF99;
color:#000000;
font-size:9pt;
}
#profilePhoto, #profileFriend, #profileComment,#profileAbout, #profileInfo, #profileMessage, #profileMediaPhoto, #profileMediaAudio,#profileMediaVideo, div.profileRss{
background:#E0FFFF;
filter: Chroma(color=#E0FFFF);
color:#000000;
font-size:9pt;
border-style:solid;
border-width:2px;
border-color:#00CED1;
}



</style>
上記のコードだけでは、背景画のアドレスが架空のものになっているので、表示されません。
しかし、コードをコピーして、マイページのオリジナルテンプレートの編集画面<style type="text/css">が表示されているページに貼り付けた後、自分のアップした画像のurlをbackground-image: url('http://***.jpg');の行に書き込み保存さえすれば、同じように反映されるはずです。お試しください。




以下は、CSSコードの解説です。

現在、メッセージの部分が透明の設定になっています。
background:#E0FFFF;
filter: Chroma(color=#E0FFFF);
  この部分です。

このfilter: Chroma(color=#E0FFFF);は、透明にするフィルターの設定で、
前の行のbackground:#E0FFFF;に書かれている#E0FFFFの色を透明にしなさいという意味です。

  また、filter: Chroma(color=#******);は、枠罫線border-color:#******;を透明にするにも有効です。
枠罫線border-color:#******;の色を透明にしようとするbackground:#******;と同じ色にすれば透明化出来ます。2008.11.27追記

半透明や透明の設定は、http://www.tohoho-web.com/css/reference.htm#Filterこのページを参考にしてください。

※注
スティッカム「プロフ」でfilter: Chroma(color=#******);をつかって透明設定をするときは、なるべく
背景色「白」  background:#FFFFFF;にしないでください。
どうせ、透明で消えてしまうから問題ないと思いがちですが、白い色が全て透明になってしまうのです。
「写真」を縦にしてアップした場合、左右に余白ができますが、その余白が透明になって抜けてしまうのです。
細かいことですがご注意ください。

また、filter: Chroma(color=#******);を使わずに透明にする方法としては、
第三章-1 「メッセージ部半透明サンプル」に出てきたフィルター設定  filter: Alpha(opacity=80);を使う方法があります。(opacity=80)の内の80の値を0にすると透明になりますが、「メッセージ」「タイトル」「枠線」他全て透明になってしまいます。これでは、元も子もありません。フィルター設定は、用途によって使い分けてください。



追加記事:  メッセージ部透明サンプル2

2008.11.19 Filterを使わずに透明にする方法・・・FireFox等のIE以外のブラウザにも対応

透明サンプル1に示したfilter: Chroma(color=#******);を使った方法で、透明化した場合IE以外のブラウザでは透明になりません。  以前から何とかならないかと思案していたのですが、 スティッカムで知り合ったCSS編集に詳しいある方から、filterを使わず簡単に透明にする方法を教えていただきました。
こちらの設定の方が、ブラウザ毎の表示の違いが起きにくいので、よりよいと思います。

ただIEのシェアが高いのでfilterを使った設定でも、気にならないのであれば変更する必要はないと思います。
(私の場合、他のブラウザとの整合もなるべく取りたいので変更いたしました。)

下記が、そのプロフのCSSの設定です。
見え方はfilter: Chroma(color=#******);を使った時とほぼ同じです。
<style type="text/css">


body{
background-image: url('http://***.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
div.profilePhotoTitle, div.profileInfoTitle, div.profileAboutTitle, div.profileMediaTitle, div.profileCommentTitle, div.profileFriendTitle, div.profileMessageTitle, div.profileRssTitle{
background:#99FF99;
color:#000000;
font-size:9pt;
}
#profilePhoto, #profileFriend, #profileComment,#profileAbout, #profileInfo, #profileMessage, #profileMediaPhoto, #profileMediaAudio,#profileMediaVideo, div.profileRss{
background:transparent;
color:#000000;
font-size:9pt;
border-style:solid;
border-width:2px;
border-color:#00CED1;
}



</style>

以下は、CSSコードの解説です。

現在、メッセージの部分が透明の設定になっています。
background:transparent;  この部分です。
以前はbackground:の後に色コードを入力していましたが、色コードの代わりにtransparent;を入力することにより透明化します。
これにより、前出のfilter: Chroma(color=#******);が不要になります。(こちらの方がシンプルで簡単ですね。)
まあ、2通りの透明化の方法、両方覚えておいても損はないと思います。いろいろ応用が利きますよ。

  また、background:transparent;と同じく、枠罫線border-color:transparent;にすれば枠罫線も透明することができます。2008.11.27追記

ページのTopへ


第三章-3(CSSの編集)

壁紙タイルを使ったサンプル


下の「壁紙タイル素材」を背景画像として、並べてみました。

                            

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

下記にそのプロフのCSSの設定をコピーいたしました。
<style type="text/css">


body{
background-image: url('http://***.jpg');
background-repeat: repeat;
background-attachment: fixed;
}
div.profilePhotoTitle, div.profileInfoTitle, div.profileAboutTitle, div.profileMediaTitle, div.profileCommentTitle, div.profileFriendTitle, div.profileMessageTitle, div.profileRssTitle{
background:#99FF99;
color:#000000;
font-size:9pt;
}
#profilePhoto, #profileFriend, #profileComment,#profileAbout, #profileInfo, #profileMessage, #profileMediaPhoto, #profileMediaAudio,#profileMediaVideo, div.profileRss{
background:#E0FFFF;
filter: Chroma(color=#E0FFFF);
color:#000000;
font-size:9pt;
border-style:solid;
border-width:2px;
border-color:#00CED1;
}



</style>
上記のコードだけでは、背景画のアドレスが架空のものになっているので、表示されません。
しかし、コードをコピーして、マイページのオリジナルテンプレートの編集画面<style type="text/css">が表示されているページに貼り付けた後、自分のアップした画像のurlをbackground-image: url('http://***.jpg');の行に書き込み保存さえすれば、同じように反映されるはずです。お試しください。




以下は、CSSコードの解説です。

壁紙タイルを使う場合
body{
background-image: url('http://***.jpg');
background-repeat: repeat;
background-attachment: fixed;
}
この部分のアンダーラインの部分を変更します。

このbackground-repeat: repeat;は、壁紙タイル画像を繰り返す設定で、
background-repeat: repeat;に書かれているrepeat;を入力することで繰り返しになります。   ちなみに1枚の写真を背景画とする場合は、第三章-1・2にあったようにbackground-repeat: no-repeat;になります。

背景画像の並べ方設定は、http://www.tohoho-web.com/css/reference.htm#background-repeatこのページを参考にしてください。

※透明化は、filter: Chroma(color=#******);を使用しています。
ブラウザの表示が気になる人は、メッセージ部透明サンプル2を参考にして下さい。

ページのTopへ


参考リンク集

今回は、私のプロフを例にしましたが、皆さんの好みに合わせて 怖がらずにCSSの設定をいじってみましょう。
この程度の説明で理解していただけるか疑問ですが チャレンジしてみてください。

お問い合わせは、「びる」のBBSにお願いします。わかる範囲でお答えします。


スティッカムのプロフのカスタマイズについて調べていたらこんなHPを発見しました。
これも参考になるかも。

「音の魔術師」さんの『プロフィールページのカスタマイズ講座』
「音の魔術師」さんのプロフィール

運営スタッフブログより「プロフィールテンプレート」
↑  CSSのコードが載っているので参考になるかも。
運営スタッフブログより「プロフィールカスタマイズ」
↑  ごく初歩的なカスタマイズの方法です。画像の表示(貼り方)が参考になるかも

ページのTopへ


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

Copyright 2008 - 2009 Bill is a funny painter. All Rights Reserved.  びるのホームページ | CMS分室
Since Feb.1.2009

ページのTopへ