蒼井プレ之進のブログ一覧

6月10日のブログに
透過png(半透明背景)に関する
追記を書きました。
↑これを使うと文字・写真が透けないコンテンツが
作れます。　ぜひ、上記ブログもご参照ください。

★スタイルシート透過に関して追記しました★
下の方にあるのでチェックしてみてくださいね（*^o^）ノ

こんばんは♪
昨日は夜間巡回の仕事だったので朝に帰宅して爆睡。
昼起きて爆笑くんとランチデート帰ってきて爆睡。
そして、いま起きて頭が冴えわたってます(｀･ω･´)ｼｬｷｰﾝ
そんな体内時計狂いまくりのプレ之進です♪

さて、6/1に新スタイルシートへの強制移行実行ということで
旧スタイルシートを最後まで貫いていた方々のページも
テンプレデザインになってしまいました…。

そこで、お友達の皆さんの中でも
またスタイルシートを弄ってみようかな♪
と、いう方いらっしゃると思います。

そんな方のために、
私が知ってることのいくつかをアップしておきます。
よかったら、参考にしてみてくださいね～（*^o^）ノ

スタイルシートの基本的な形は
旧CSSよりかなりわかりやすくなっていると思います。
「簡易編集」を使えば、
背景画像やヘッダ画像、アイコンなどがアップできるので
自分好みに変えちゃってください♪
[保存]のボタンを押さなければ保存されないので
気に入ったページになるまで、プレビュー＆戻るを繰り返すといいと思います。
詳しい方法はみんカラサポートブログを読んでチェックしてください♪


★今回は詳細編集のほうを使います★

○背景の固定化
通常、背景画像をアップすると連続してても、１枚絵でも
スクロールをするとブログなどのコンテンツと一緒に動いてしまいますよね
それを動かなくさせて、コンテンツのみをスクロールさせる方法です
「マイページのスタイルシート」→「詳細編集」→「ページの基本」→「ユーザー領域」

　　clear:both;
　　background-color:#000000;
　　color:#eee;
　　display:block;
　　background-image:url(画像のアドレス);
　　background-repeat:repet;
　　background-position:50% 50%;

上のような記述になっていると思います。
１．７番目の記述の下に↓を追加します。
　background-attachment:fixed;　　←コレ

２．２番目の記述の　#000000　を　transrate に変更

これで背景が固定されます。
（※注意　簡易編集を変更する度に再度やり直す必要があります。）

背景の位置に関しては上記のCSSの下から２行目を
　　background-repeat:no-repet;
にすることでアップした画像１枚だけの表示になります
一番下の　background-position:50% 50%;　は位置決めになりますので
数値をいろいろいじって一番いい場所に決めてください。


○背景画像が見えるようにコンテンツを透明化させる
私のブログで言うとブログの部分は透けてませんが
右のカレンダー部分は透けてますよね？（PC環境によります。）
そういう状態にする設定の仕方です。
「マイページのスタイルシート」→「詳細編集」→「コンテンツ共通」→「コンテンツ領域」

　　overflow:hidden;
　　display:block;

上のような記述があります。
１．２番目の記述の下に↓を追加します。
　filter:alpha(opacity=90);　←コレ

数字の90を小さくすれば透明率が高くなり背景が見易くなります。
反対に文字は薄くなります。


同様に…

◎右側のサイドメニュー欄（プロフ画像、カレンダー、お友達、カテゴリー等）の透明化
「マイページのスタイルシート」→「詳細編集」→「サイドメニュー」→「サイドメニュー領域」
　　width:300px;
　　padding-bottom:10px;
　　background:#333;
上のような記述があります。
１．３番目の記述の下に↓を追加します。
　filter:alpha(opacity=90);　←コレ


◎プロフィール画面の左側（プロフ画像、友達、ファン）の透明化
「マイページのスタイルシート」→「詳細編集」→「プロフィール」→「左カラム領域」
　　display:block;
　　overflow:hidden;
　　background:#333;
上のような記述があります。
１．３番目の記述の下に↓を追加します。
　filter:alpha(opacity=90);　←コレ


◎プロフィール画面の右側（自己紹介、最新ブログ等）の透明化
「マイページのスタイルシート」→「詳細編集」→「プロフィール」→「右カラム領域」
　　display:block;
　　overflow:hidden;
上のような記述があります。
１．２番目の記述の下に↓を追加します。
　filter:alpha(opacity=90);　←コレ


◎タブ（ブログ、愛車紹介、おすすめスポット、掲示板、プロフ）の透明化
「マイページのスタイルシート」→「詳細編集」→「タブ」→「タブ（通常）のスタイル」
　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;
上のような記述があります。
１．９番目の記述の下に↓を追加します。
　filter:alpha(opacity=90);　←コレ

上記のすべての場合において
数字の90を小さくすれば透明率が高くなり背景が見易くなります。
反対に文字は薄くなります。


…えらいごちゃごちゃしてしまいましたが
やってみれば意外と簡単なことです。
せっかくブログやってるんですから、
個性のあるステキなブログにしていきましょう!!

間違ってるとこあれば教えてください…


★追記★
当ブログにコメントをいただきました、
あるまじろうさんからIE以外でのブラウザでも
透過をかけられる方法を教えていただきました。
あるまじろうさん本当にありがとうございます!!

filter:alpha(opacity=90);
-moz-opacity:0.9;
opacity:0.9;

緑色が前回までの付け足す分水色がさらに付け足す分です♪
初めて弄られる方は３行まとめて付け足せばOKです

なお、この方法で透過させると
写真や文字も色が薄くなって透けてしまうため
（ページの表示も重くなり遅くなります…（汗））
「透過png画像」というものを使って、
コンテンツの背景のみを透過させる方法を勉強中です。
またできたらご報告いたしますので、よろしくお願いいたします!!

★追記の追記★
ブログ内追記部分の３行をコピペして使った場合
「プロパティは半角英数で入力してください」と出てしまうのは
私の余計なスペースの問題です…
修正しておきましたので再度チャレンジをお願いします…（汗）
今後ともよろしくお願いします
何度もｺﾞﾒﾝﾈ（ノд｀）ｳｳｳ..

◎追記の追記の追記◎
6/10のブログ：背景の透過についての研究結果（透過.pngを使ってみる♪）
整備手帳：透過.pngを使って半透明背景を作る