FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

全体を半透明にして背景画像を表示する

全体を半透明にして背景画像を表示するカスタマイズを紹介します。

スタイルシートの末尾に以下を加えてください。

【standardシリーズの場合】

.base_table {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}


【lightframeシリーズの場合】

#outline {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}


各数値はお好みに合わせて調整してください。

filter:alpha
0(透明)~100(不透明)

-moz-opacity
opacity

0.0(透明)~1.0(不透明)

これでbodyに設定した背景画像が透けて見えるようになります。

関連記事
[ 4233 ] おおおおー!!!
きたー!ありがとうございます、ありがとうございます。
早速使わしてもらいます、わがブログがカッコよくなりました。ヽ(^◇^*)/
ほんとにありがとうございました。
[ 2009/05/15 23:49 ] [ 編集 ]
[ 4236 ] あれ?
すいません、連没で。
早速コレを適応したのですが、適応されていません。
テンプレ編集の、プレビューからは適応されているのですが、更新してみてみると適応されていません。
ブラウザなどが原因なのでしょうか?Fire fox使ってます。
[ 2009/05/16 00:09 ] [ 編集 ]
[ 4238 ] > そーいちさん
現状を確認したいのでURLを教えてください。
[ 2009/05/16 00:41 ] [ 編集 ]
[ 4248 ]
すごい勢いで充実してきましたね。
多分今一番充実してますよ。

しかし、新型ウイルス問題で、とうとう来週は会社
休みになりそうです。
もろ地域区なんで。
色々おこるもんでえす。
[ 2009/05/16 18:17 ] [ 編集 ]
[ 4249 ] いたお さんへ
ごめんなさい、勘違いでした。なんだか適応されるのが遅かったらしくて。すいませんでした。
[ 2009/05/16 18:27 ] [ 編集 ]
[ 4250 ]
すみません、
filter:alphaを変えると、どこが変更されるのですか?
違いが分からないのでお聞きします。
[ 2009/05/16 19:26 ] [ 編集 ]
[ 4251 ]
↑↑透明度ですね。
0に近いほど透明度が濃く、100に近いほど
透明度が薄くなります。
つまり、背景画像の表示濃度の調整帯です。
[ 2009/05/16 19:36 ] [ 編集 ]
[ 4255 ] 行を開けるには・・・。
共有プラグインなどを、書き換えて好きなプラグインを作りたいんですけど、(このブログのお薦め カスタマイズの所見ないに)行を開けるにはどうしたらよいのですか?
Enterキーを押して、1行開けようとしても、それが反映されないのですが・・。
[ 2009/05/16 20:49 ] [ 編集 ]
[ 4256 ]
ブラグインのhtmlレベルの改行は<br>タグを文の語尾にお付けると改行されます。

こんな感じ<br>
[ 2009/05/16 21:01 ] [ 編集 ]
[ 4272 ] > あなろぐさん、ニダーさん、雲と雲との隙間のPSP の管理人 さん
あなろぐさん、ありがとうございます^^

ニダーさん、あなろぐさんが教えてくれた通り、それはIEの透明度です。ブラウザによって透明度の指定が違うのですが、filter:alphaはIEの透明度なんです。

雲と雲との隙間のPSP の管理人さん、あなろぐさんが教えてくれた通り、プラグインの行間には改行タグ<br />が必要です。改行したい箇所にこのタグを入れてください。
[ 2009/05/17 00:40 ] [ 編集 ]
[ 4287 ]
できました。ありがとうございます。
[ 2009/05/17 16:43 ] [ 編集 ]
[ 4302 ] > 雲と雲との隙間のPSP の管理人さん
できて良かったです。
教えてくれたあなろぐさん、ありがとうございました。
[ 2009/05/18 01:00 ] [ 編集 ]
[ 4319 ] 適応されません・・・
スタイルシートの本当に最後に加えたのですが、全く変化がありません・・・
入れるところを間違えたのでしょうか??

/* Last update 2008-02-18 Template by FC2 */
.base_table {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}

このような感じにいれましたが、違うのでしょうか??
[ 2009/05/18 20:49 ] [ 編集 ]
[ 4322 ] > ミヤさん
この記事は当サイトが提供しているテンプレートを前提にしています。

URLを教えてもらえればそのテンプレートに対応したコードも解ると思います。
[ 2009/05/18 22:24 ] [ 編集 ]
[ 4351 ]
先ほど、スタンダードピンクをDLさせていただきました!
それで、このようにしたのですが、どうにも・・
プレビューしてもならないのです~・・・!

/*** その他 ***/
p { margin: 2px 0; }
ul { margin:2px 0 5px 0; padding:0; }
li { margin-left:20px; margin-bottom:3px; }
form { margin:0; }
table { font-size:10pt; }
.c-both { clear:both; }
.readmore { margin-top: 10px; }
.readclose { margin: 10px 0; }
.page_navi { margin:30px 0; font-size:9pt; color:#808080; }
.base_table {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}


[ 2009/05/20 21:22 ] [ 編集 ]
[ 4360 ] > ミヤさん
特に問題なさそうなのですが・・・
現状確認のためURLを教えていただけますか?
[ 2009/05/21 00:45 ] [ 編集 ]
[ 4372 ]
このブログになります~;;
なぜでしょうか~?;;;
[ 2009/05/21 21:41 ] [ 編集 ]
[ 4377 ] > ミヤさん
それはstandardではなく、lightframeです。

#outline {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}

としてください。
[ 2009/05/21 23:13 ] [ 編集 ]
[ 4379 ]
ああ~!すみません~;;
今変えたのですが変化がありません・・・何か違うのでしょうか??

.c-both { clear:both; }
.readmore { margin-top: 10px; }
.readclose { margin: 10px 0; }
.page_navi { margin:30px 0; font-size:9pt; color:#808080; }
#outline {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}


[ 2009/05/22 00:09 ] [ 編集 ]
[ 4383 ] > ミヤさん
この記事はbodyに背景画像を設定したことを前提に書いてあります。

ミヤさんは今#outlineに背景画像を設定しているので、これをスタイルシートの末尾に追加してください。

#center-left {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}

#right {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}

または#outlineに設定している背景画像をbodyに設定してください。
[ 2009/05/22 01:09 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2023/09 | 10
- - - - - 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
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2023/09 | 10
- - - - - 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
ユーザータグ


△ ページトップへ戻る