スタイルシート大幅変更～カウンター設置・壁紙固定・背景透過他～

２０１０年５月８日（土）

スタイルシートはみんカラに登録時はカーボン調の壁紙・ヘッダー画像・シルビアアイコンのみ。
途中、カウンター追加・ヘッダー画像変更・フッター画像追加・タイトルの変更。
２００９年６月１日からの『みんカラリニューアル』のちょっと前にヘッダー画像を大きいサイズで作ったくらい。
あとはプチ変更のみして来たけど、今回大幅な変更をしました。

全体的にモノクロです。

◇ ヘッダー画像 ◇
同じシルビアの写真ですが、タイトルフォント（影付き）や背景をすべて変更しました。

◇ 壁紙 ◇
写真を元に『Ｓ１５を花でたとえるなら？』のイメージで百合の画像・左に英語タイトル（影付き）・右に日本語タイトル（影付き）・うちの子（男の子）とバニーガールのシルエット・ヒップにＴＡＴＯＯ調のデザイン（シルビア Ｓ１５マーク・百合の紋章・タイトル等）を追加。※和彫り・洋彫りとは別にオリジナルな物にしてみました。あとは（Ｃ）ｋｕｒｕｒｉを追加。

◇ その他の変更点 ◇
上記の他に変更する点は、
カウンター行数を１０桁→６桁
壁紙の固定
ブログ、愛車紹介（パーツレビュー、整備手帳、フォトギャラリー、燃費記録）、おすすめスポットの背景の透過
サイドメニューの背景の透過

タグの背景の透過はしません。すべて透過しちゃうとメリハリのないものになってしまうから。
『みんカラ工房 ギャルソンルームミラー』の様にブラックボディーにブラックストーン？なにそれ！○○○な～し！になるので。

★ みんカラスタイルシート大幅変更に向け ★　

※ 私個人のページの設定が入っているのでご注意ください！　※

背景透過化に伴ってpng画像を作成する。

◆ 画像の準備 ◆

みんカラにログイン～マイページ～スタイルシート～詳細編集～コンテンツ共通

コンテンツ表示
background:url(画像のURL)の
画像のURLの部分をコピーしてインターネットエクスプローラー上で開き画像（gif）を保存する。

普段は「Ａｂｏｂｅ」の画像編集ソフトを使用していますが、他に３～４種類のソフトを試してみたところ、「AzPainter2」というフリーの画像変換ソフトが一番簡単で使いやすかったです。
なので、そちらを記載します。

◆ AzPainter2でgif画像をpng画像に変換 ◆

AzPainter2を起動。メニューバー～表示タブを選び「背景をチェック柄で表示」にチェックを入れる。
ファイルを開き上記で保存した画像を表示させる。
あとは通常のペイントソフトと同じで、パレットから好みの濃さの色を選んで塗りつぶす。
黒の画像の場合は左右端に１ドットずつ灰色の縦線が入っているので、ブラシツールで画像の上からまんべんなく塗りつぶす事。
メニューバーの～フィルタタブから「アルファ操作」～「明るい色ほど透明に」を選ぶ。
画像が透け下のチェック柄が見えたらＯＫ。

画像が出来上がったら出力。普通に保存した場合、透過の情報が保存されない為透過の効果がでない。注意！

メニューバーの選択範囲～「他へ出力」～「アルファ付きPNGファイル」で保存。

みんカラへスタイルシートの「スタイルシート用画像」にアップして置く。


★ 忍者ツールカウンター行数設定変更（確認の為） ★

忍者ツールにログイン～登録カウンター名をクリック～カウンター設定をクリック～メイン設定・カウンターイメージ
設定下の設定をクリック～10桁を6桁に変更～次の画面でOKをクリックで完了。

みんカラにログイン～マイページ～スタイルシート～詳細編集

ヘッダータイトル
カウンターを10桁から6桁に変更したのでズレが生じてる。
カウンターは10桁で400pxel　6桁では240pxel
上記から930pxel-240pxel=690pxelとなるので

line-height:100%;
font-size:8px;
margin:0;
width:930px;
padding-top:35px;
padding-right:0;
padding-bottom:0;
padding-left:54px;
この下の部分を追加、690pxに変更。
background-image:url("忍者ツールカウンターＵＲＬ");
background-position:690px top;
background-repeat:no-repeat;

で保存。

★ スタイルシート変更（基本スタイル） ★

スタイル簡易編集～ベーススタイルの読み込み～基本とするスタイルで「みんカラブラック」を選択、
「読み込み」をクリック。

・ 利用するナビゲーション
グレーを選択。

・ 本文・サイドメニューの位置
タイトル見出しアイコン
はそのまま。

・ ページの背景

背景画像の削除にチェックをいれる。

・ ヘッダー＆タイトル

ヘッダー画像の削除にチェックをいれる。

一度保存をクリック。
再度、簡易編集を開く。

・ ページの背景
背景画像の参照をクリック、デスクトップから画像を開き、容量が300KB以上なら「自動変換(1280×1280ピクセル以内)」にチェックをいれる。

背景画像の位置
水平方向 左
垂直方向 上
はそのまま。

背景画像のリピート
縦横リピート
はそのまま。

ページの文字色
本文
リンク（未訪問）
リンク（訪問済）
リンク（マウスオーバー）
はそのまま。

・ ヘッダー＆タイトル

ヘッダーの高さ　290ｐｘに設定。

ヘッダーの背景色
はそのまま。

ヘッダー画像の参照をクリック、デスクトップから画像を開く。

タイトル文字の大きさ　8ｐｘに設定。

タイトル文字の色
タイトル文字の色（マウスオーバー）
はそのまま。

タイトル文字の表示位置　上から　35ｐｘ
　　　　　　　　　　　　　　　 左から　54ｐｘに変更。

保存をクリックで簡易編集完了。

◆ 壁紙の固定化 ◆

詳細編集～ページの基本

※変更箇所のみ記載

利用するナビゲーション
グレーにチェック。

・ ページの基本

ユーザー領域
clear:both;
background-color:#000000;
color:#eee;
display:block;
background-image:url(スタイルシート用画像・壁紙ＵＲＬ);
background-repeat:repet;
の下に
background-attachment:fixed;
を追加。

それとbackground-color:#000000;
の#000000を消し
transrate
を追加 。

☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆
clear:both;
background-color:transrate;
color:#eee;
display:block;
background-image:url(スタイルシート用画像・壁紙ＵＲＬ);
background-repeat:repet;
background-attachment:fixed;
☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆
となる。

※作った壁紙のタイトルやシルエット、（Ｃ）ｋｕｒｕｒｉが思ったところに行かない為、１ｍｍずらして…もっと上か…と何回も壁紙を作り直しながらの作業でした。プレビュー時と保存してからで変わるしー！

◆ カウンター設置 ◆

・ ページの基本

ヘッダータイトル
line-height:100%;
font-size:8px;
margin:0;
width:930px;
padding-top:35px;
padding-right:0;
padding-bottom:0;
padding-left:54px;
の下に
background-image:url("忍者ツールカウンターＵＲＬ");
background-position:690px top;
background-repeat:no-repeat;
を追加。

☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆
line-height:100%;
font-size:8px;
margin:0;
width:930px;
padding-top:35px;
padding-right:0;
padding-bottom:0;
padding-left:54px;
background-image:url("忍者ツールカウンターＵＲＬ");
background-position:690px top;
background-repeat:no-repeat;
☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆
となる。

◆ ブログ、愛車紹介（パーツレビュー、整備手帳、フォトギャラリー、燃費記録）、おすすめスポットの背景の透過化 ◆

詳細編集～コンテンツ共通

※変更箇所のみ記載

・ ユーザーコンテンツ(共通)

コンテンツ表示上部
margin:0px;
padding:0px;
background:url(スタイルシート用画像・png画像ＵＲＬ) no-repeat bottom left;
height:4px;
width:620px;
clear:both;
上記アドレス部はみんカラのgif画像アドレスになっているので「スタイルシート用画像」からアドレスをコピーし、みんカラのgif画像アドレスを消しそこへpng画像ＵＲＬを貼り付ける。

コンテンツ表示
margin:0px;
padding:10px 20px 8px 20px;
background:url(スタイルシート用画像・png画像ＵＲＬ) repeat-y;
width:580px;
も同じく。

コンテンツ表示下部
margin:0 0 10px 0;
padding:0px;
background:url(スタイルシート用画像・png画像ＵＲＬ) no-repeat top center;
height:4px;
width:620px;
も同じく。

これでブログ、愛車紹介（パーツレビュー、整備手帳、フォトギャラリー、燃費記録）、おすすめスポットの背景が透過
する。

◆ サイドメニューの背景の透過化 ◆

詳細編集～サイドメニュー

※変更箇所のみ記載

・ サイドメニュー

サイドメニュー領域
width:300px;
padding-bottom:10px;
background:#333;
のbackground:#333;を消し下に
float:right;
background-image:url(スタイルシート用画像・png画像ＵＲＬ);
backgronund-repeat:repeat;
を追加。
アドレス部は「スタイルシート用画像」からpng画像アドレスをコピーしそこへ貼り付ける。

☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆
width:300px;
padding-bottom:10px;
float:right;
background-image:url(スタイルシート用画像・png画像ＵＲＬ);
backgronund-repeat:repeat;
☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆　☆
となる。

これでサイドメニューの背景が透過する。

各変更箇所をプレビューで確認したら、ページの一番下の保存をクリック。
最後にスタイルシートのトップページに戻り、「カスタムスタイル」の「適用」をクリックする。