■掲示板に戻る■ ■過去ログ倉庫一覧■

1 ：容姿：2012/01/14(土) 22:19:53 ID:HKPx5tMg

HTMLとかCSSとかデザイン関係のことを教えていこうかと思います

神が創設した掲示板
http://jbbs.livedoor.jp/internet/13754/

2 ：容姿：2012/01/14(土) 22:23:36 ID:HKPx5tMg

知識を身に付ければこんな美しい板ができます

http://jbbs.livedoor.jp/internet/13754/

3 ：容姿：2012/01/14(土) 22:33:22 ID:HKPx5tMg

背景画像を固定させたい場合は次のようにします。

<style type="text/css">
<!--
body {
background-color: #ffffff;
background-image: url("アップロードした画像のURL");
background-repeat: no-repeat;
background-attachment: fixed;
background-position:100% 100%;
}
-->
</style>

4 ：容姿：2012/01/14(土) 22:37:53 ID:HKPx5tMg

ちなみに画像をアップロードする方法は
アップローダーに登録して画像をアップするだけです

5 ：可夢偉(てる)(・ω・´)：2012/01/14(土) 22:41:40 ID:OPbjW6aA

容姿の掲示版の背景、綺麗だな＾＾

6 ：容姿：2012/01/14(土) 22:43:29 ID:HKPx5tMg

ありがとう＾＾

7 ：容姿：2012/01/14(土) 22:53:57 ID:HKPx5tMg

背景画像を設定した！
だけどせっかくの背景がローカルやスレッドで見えない…

そんなときは"filter:alpha(opacity=50)"をtableにぶち込む！
するとhttp://jbbs.livedoor.jp/internet/13754/みたいにスッケスケ（ｲﾔﾝ////

しかしこのままだと透かしたくない場所まで透けてしまいます
透かしたくない場所に<div style="position:relative;">を入れれば大丈夫です

8 ：容姿：2012/01/14(土) 22:57:39 ID:HKPx5tMg

うんうん

最初はなんのこっちゃだと思うけど使っているうちにだんだんと理解できるようになるよ＾＾

9 ：容姿：2012/01/15(日) 13:09:51 ID:HKPx5tMg

次のようなJBBSの独自タグをレスの本文のどこかに入れると、書き込まれたレス全体の文字色を変える事が出来ます。

<jbbs fontcolor="#16進数">

16進数の部分はff0000のように書きます。
#16進数の部分はダブルクォートで囲う必要はありません。
このタグは、閉じる必要がありません。
複数使った場合、最初のものが有効となり、2つ目以降はそのまま表示されます。

10 ：容姿：2012/01/15(日) 13:12:38 ID:HKPx5tMg

こういうことです

11 ：容姿：2012/01/15(日) 13:13:50 ID:HKPx5tMg

<jbbs fontcolor=#EF007C>こういうふうに付けてください

12 ：容姿：2012/01/15(日) 13:16:28 ID:HKPx5tMg

でもいちいち文字色を入力するのは面倒ですよねｗ

そんなときはhttp://jbbs.livedoor.jp/internet/13754/みたいに文字色選択機能を付ければよいのです！

13 ：容姿：2012/01/15(日) 13:19:25 ID:HKPx5tMg

javascriptを利用して自動的にレス本文中に挿入することで、文字色の選択を行うことができます。
まず次のスクリプトを、カスタムヘッダーに書き込みます。

<script type="text/javascript" charset="Shift_JIS">
<!--
/* 文字色選択関係 */
colorname = new Array(
'#ffffff',
'#11F224',
'#3BF5E2',
'#FFEF00',
'#EF007C',
'#ff99ff'
);
/* 文字色を指定する文字列を作成 */
function SelectColor()
{
/* document.write('文字色\n ');*/
for (i=0; i < colorname.length; i++) {
document.write('<input name=usrcolor type="radio" value="' + colorname[i] + '"');
if ( i == 0 ) {
document.write(' checked');
}
document.write('><span style="color:' + colorname[i] + '\; background:transparent\;">■</span>\n');
}
document.write('<br>\n');
}

/* 書き込み時に文字色を追加 */
function AddColor(form) {
mailmsg = form.MAIL.value;
if (mailmsg.match(/@/) == 'null' && choice != 0) {
mailmsg = 'icn' + choice + '_' + mailmsg;
}
form.MAIL.value = mailmsg;
for (i = 0; i < form.usrcolor.length; i++) {
if(form.usrcolor[i].checked) {
usrcolor = form.usrcolor[i].value;
}
}
message = form.MESSAGE.value;
message = '<jbbs fontcolor=' + usrcolor + '>' + message;
form.MESSAGE.value = message;
}
//-->
</script>

14 ：容姿：2012/01/15(日) 13:21:26 ID:HKPx5tMg

カスタムスレッドで、書き込みフォームのinputタグのonClickに、色指定処理関数を追加します。

<input type=submit value="書き込む" name="submit" onClick="AddColor(form)">

15 ：容姿：2012/01/15(日) 13:22:00 ID:HKPx5tMg

カスタムスレッドで、書き込みフォームの本文欄の箇所の前に、文字色選択ラジオボタンを追加します。

<SCRIPT>SelectColor()</SCRIPT>

16 ：容姿：2012/01/15(日) 13:27:07 ID:HKPx5tMg

うんうん

これはJavaScriptといいます

ちょっと難しいかな？

17 ：容姿：2012/01/16(月) 02:11:58 ID:HKPx5tMg

ググればでる！

18 ：おひさま：2012/01/16(月) 17:46:24 ID:EEOuKk2c

なんかすごい詳しいね━━━━!!

19 ：容姿：2012/01/16(月) 18:20:42 ID:HKPx5tMg

そんなことないよ

これを応用できる人はいくらでもいるからね

20 ：よーし：2012/01/17(火) 17:48:30 ID:HKPx5tMg

うんうん

何か分からないことがあったら聞いてくれ

21 ：よし：2012/01/28(土) 21:35:31 ID:HKPx5tMg

実はそんなに詳しくないﾜﾗﾜﾗ

22 ：容姿：2012/02/05(日) 14:22:03 ID:HKPx5tMg

なんかデザイン変わったね

23 ：琥珀(てる)(・ω・´)：2012/02/22(水) 16:35:05 ID:???0

>>13
難しい笑

挙げ乙

■掲示板に戻る■ ■過去ログ倉庫一覧■