■ナビゲーション

ちびまる商店店主のブログ一覧

2009年08月27日

スタイルシート弄り　まとめ

スタイルシートをカスタマイズする際に役に立てば・・・
と思い個別にアップしたブログへのリンクを作りました。

スタイルシート弄り　背景の透過
ブログ・愛車紹介・おすすめスポット・掲示板・プロフィールなどの切り替えボタンの透過
ブログやパーツレビュー部分の背景透過
コメント部分の透過
サイドメニューの透過
サイドメニュータイトル（プロフィール・お友達・ファン・リンクといった見出し部分）の透過

ブログや愛車紹介の本文部分だけでなく、上端・下端も透過させる方法
ブログ・愛車紹介・パーツレビュー・整備手帳・フォトギャラリーなどの部分で「スタイルシート弄り　背景の透過」では透過出来ていなかったトップ＆ボトムの部分を透過させる方法です。

プロフィール部分を透過背景にする方法
プロフィールページの自己紹介欄や最新ブログ一覧の部分を透過背景にする方法です。

プロフィールの左サイドバーとブログ投稿日付欄を透過背景に
プロフィールページの左側にあるサイドバー部分の透過
各ブログの最後に表示される投稿日付・コメント数・トラックバック数・カテゴリーなどの透過

AzPainter2で好みの色の透過背景を作る
好きな色で背景を透過させたい方におすすめ♪

ネ申さ～ん！！　修正版　スケスケスタイルシートでっせ ;^_^A
ヘッダー画像と背景画像を差し替えれば・・・　誰でもスケスケの透過背景スタイルに♪

ヘッダー領域を拡げる方法
厳密にはヘッダー領域を広げるのではなく、タブの位置を下げているだけなんですが・・・

ブログに画像を複数貼る方法
スタイルシートとは直接関係有りませんが、防備録として(^^;)

※間違いなど有りましたら・・・ご指摘ください（＾＾；

Posted at 2009/08/27 20:50:43 | コメント(9) | トラックバック(0) | スタイルシート弄り | 日記

2009年08月04日

プロフィール部分を透過背景にする方法

背景の透過方法について以前少し書いたのですが、今回はプロフィール部分を！とのリクエストが有りましたので、少し書きたいと思います。

基本的には、

background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);
backgronund-repeat:repeat;

↑この３行をスタイルシートの透過させたい部分に追加してやればOKなのですが、background-color:#000000; の様に背景色が設定されている場合には削除しないと背景が透過しないので、ご注意を！

突然カラフルな画像が現れましたが、プロフィール部分を透過背景にするには何処を弄れば良いかを色分けして見ました。

赤はプロフィール見出し
黄緑はプロフィールタイトル
水色はみんカラ参加日
青はコンテンツタイトル
黄色は投稿記事テーブル
ピンクは投稿記事一覧へ　となっています。

こんな感じで解りますかね！？

※間違いなど有りましたら、お知らせ下さい＾＾；

Posted at 2009/08/04 23:17:14 | コメント(6) | トラックバック(0) | スタイルシート弄り | 日記

2009年04月12日

スタイルシート弄り　背景の透過

スタイルシート弄りの記録として背景透過についてアップします！
（※みんカラブラックをベースに弄っています）

スタイルシートの詳細設定画面には以下の分類があります。

ページの基本　タブ　コンテンツ共通　ブログ　プロフィール　愛車紹介
　スポット/マイ掲示板　コメント　サイトメニュー

■まずは「タブ」部分の「タブ(通常)のスタイル」です。
　
font-size:12px;
width:19.5%;
height:30px;
float:left;
display:block;
text-align:center;
background:#666;　← ここを
margin:0 0.6% 0 0;
line-height:2.5;

↓

font-size:12px;
width:19.5%;
height:30px;
float:left;
display:block;
text-align:center;　
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);
background-repeat:repeat;　← このように変更します
margin:0 0.6% 0 0;
line-height:2.5;

すると↓この様になります(^^)/

■今度は「コンテンツ共通」部分の「コンテンツ表示」です。
　ここを弄ると、ブログやパーツレビューの背景が透過します。

margin:0px;
padding:10px 20px 8px 20px;
background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/contents.gif) repeat-y;　← この下線部分を
width:580px;

↓

margin:0px;
padding:0px 0px 8px 0px;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);
background-repeat:repeat;　← この様に変更します
width:620px;

すると↓背景が透過しました(^^)/

■今度は「コメント」部分の「コメントテーブル」です。
　コメント部分全体の背景設定になります。

vertical-align:top;
background:#333;　← ここを

↓

vertical-align:top;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);　← この様に変更します
background-repeat:repeat;

■「コメントタイトル」部分
　名前が表示される部分です。

background:#333;　← この行を削除します
padding:8px 0 5px 10px;
font-weight:bold;
font-size:12px;

■「コメント日付」部分は、

background:#333;　← この行を削除
color:#999;
text-align:left;
padding-left:10px;
font-size:10px;
line-height:0.5;
font-family:Verdana;

■「コメント表示」部分
　コメント内容の表示部分です。

margin:5px;
background:#333;　← この行を削除します
padding:5px;
font-size:12px;
line-height:1.65;

すると↓スッキリします(^^)v

■「サイドメニュー」部分の「サイドメニュー領域」は、
　サイドメニュー部分の背景設定です。

width:300px;
padding-bottom:10px;
background:#333;　← ここを

↓

width:170px;
padding-bottom:10px;
float:right;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);
background-repeat:repeat;　← この様に変更します

すると↓この様に背景が透けて見えます(^^)v

■サイドメニュータイトル
　プロフィール・お友達・ファン・リンクといった見出し部分です。

font-size:12px;
padding:3px 0;
background:#222;　← ここを
color:#eee;
text-align:center;

↓

font-size:12px;
padding:3px 0;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);
background-repeat:repeat;　← この様に変更します
color:#eee;
text-align:center;

↓バッチリです(^_^)v

以上です。

最後までご覧頂き有難う御座いました。

※スペルミスが有ったので訂正しました（2011-09-01）
　backgronund-repeat: は
　background-repeat: の間違いです！(￣ェ￣;)

間違っている部分が有りましたらコッソリお知らせ下さい(^^;

Posted at 2009/04/12 21:32:28 | コメント(34) | トラックバック(0) | スタイルシート弄り | 日記

2009年04月09日

これなら大きめ画像もOK！

右側に表示されているサイドバーの幅を小さくし、余った領域に画像をオーバーフローさせる事で大きめの画像をブログに貼れる様に成りました。
因みにこの画像幅は740pxです。

この記事は、hide_3569さんのスタイルシートについてを元に書いています。

Posted at 2009/04/09 21:32:15 | コメント(3) | トラックバック(0) | スタイルシート弄り | 日記

2009年04月07日

スタイルシートリニューアル(^^)/

みんカラのリニューアルに伴って、ここ数日スタイルシートをいじくっていましたが、やっと納得出来る状態に成りました(^^)/

もっといい感じの背景用の画像を撮りに行かなくちゃ(>_<)

Posted at 2009/04/07 11:08:11 | コメント(1) | トラックバック(0) | スタイルシート弄り | 日記

<< 前のページ

次のページ >>

プロフィール

「花粉のせいで鼻水ダラダラ・・・　頭も痛い(T_T)」

何シテル？ 03/02 23:06

ちびまる商店店主 [ 埼玉県 ]

時々自己満足な弄りをして楽しんでいるオヤジです（＾＾；）

ユーザー内検索

掲示板

ちびまる商店店主の掲示板

<< 2025/6 >>

リンク・クリップ

[ルノーカングー] 3Mヘッドライトコーティング施工カテゴリ：その他（カテゴリ未設定） 2025/05/20 00:29:31
[ルノーカングー] 車検見積もりカテゴリ：その他（カテゴリ未設定） 2025/05/20 00:27:18
[ルノーカングー] エンジンオイル&エレメント交換カテゴリ：その他（カテゴリ未設定） 2025/05/20 00:04:01

[ 他のクリップをチェック ]

愛車一覧

日産セレナ
H18年3月15日納車のライダーＳです。 ■メーカーオプション　バイキセノンヘッドラ ...

[ 愛車一覧 ]

過去のブログ

2013年
01月	02月	03月	04月	05月	06月
07月	08月	09月	10月	11月	12月
2012年
01月	02月	03月	04月	05月	06月
07月	08月	09月	10月	11月	12月
2011年
01月	02月	03月	04月	05月	06月
07月	08月	09月	10月	11月	12月
2010年
01月	02月	03月	04月	05月	06月
07月	08月	09月	10月	11月	12月
2009年
01月	02月	03月	04月	05月	06月
07月	08月	09月	10月	11月	12月
2008年
01月	02月	03月	04月	05月	06月
07月	08月	09月	10月	11月	12月
2007年
01月	02月	03月	04月	05月	06月
07月	08月	09月	10月	11月	12月
2006年
01月	02月	03月	04月	05月	06月
07月	08月	09月	10月	11月	12月

RSS2.0

ヘルプ｜利用規約｜サイトマップ

日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

ちびまる商店 店主のブログ一覧

スタイルシート弄り まとめ