R i j j y -[a x k i z e l]

ขอบคุณทุก comment นะครับ ผมจะทยอยเข้าไปตอบและไปเยี่ยมเยียนนะครับ 

ข้อควรระวัง : ถ้าอยากรู้รายละเอียดลึกๆ เชิงวิชาการหาเพิ่มเติมใน google นะครับ entry นี้ไม่ใช้ศัพท์วิชาการแต่อย่างใด  

entry นี้ต่อยอดจาก "ปัญหาแต่งบล็อค ถามมาตอบไป"

เคยประสบปัญหาเวลาแก้ไข css ธีมไหมครับ? พอจะแก้ส่วนใดส่วนหนึ่ง ก็มานั่งระลึกชาติว่าจะใส่โค้ดอะไรดี แล้วไอ้ส่วนนี้มันคืออะไร ตรงไหน ของบล็อคตูล่ะนี่

พี่น้องครับ! ด้วยเหตุผลข้างต้นนี่เอง ที่ทำให้ผมต้องออกมาเขียนบล็อคในวันนี้ (จริงๆ ไม่มีไรจะเขียนแล้วก็บอกเถอะ เอิ๊กๆ) ผมจะยกโค้ดสำคัญๆ และวิธีการใช้งานมาแนะนำในนี้ ซึ่งพี่น้องต้องการโค้ดแบบไหนขอได้ในนี้นะครับ แต่หากประสบปัญหาการแต่งบล็อคก็ไปที่ entry ปัญหาแต่งบล็อคนะครับ

//////////////////////////////////////////////////////////////////

อับดุลริจกลับมาอีกครั้ง ในโฉมใหม่ Rije 10 (คล้าย Sam 10 ซึ่งดันไปคล้าย Ben 10 ก๊าก)  จริงๆ มันก็ไม่เกี่ยวกันกับชื่อหรอกครับ ตั้งล้อไปงั้นๆ แหละ 5555

//////////////////////////////////////////////////////////////////

ตัวอักษร 

1. font:10px Verdana;
โค้ดกำหนดตัวอักษรขนาด 10 เป็นอักษรแบบ Verdana หรือถ้าเป็นตัวอักษรอื่นก็คั่นด้วย , แล้วใส่ "MS Sans Serif" เป็นต้น ตัวอย่าง

font:12px Tahoma, "MS Sans Serif";

ในรูปแบบนี้ระบบจะอ่านตัวอักษร Tahoma ก่อน ถ้าเครื่องไหนไม่มีมันก็จะไปอ่าน MS Sans Serif แทน (ซึ่งใครใช้ font ที่มีในเครื่องตัวเองแต่คนอื่นไม่มีเนี่ย เครื่องใครไม่มี font แปลกๆ มันก็จะไปอ่าน font ปกติในเครื่องที่มีแทน)

2. font-size:10px;
โค้ดนี้กำหนดแค่ขนาดตัวอักษรเฉยๆ ครับ เช่น ใน css ส่วน .entry .post ผมใส่ font-size:16px; ลงไป เวลาที่ผมเขียน entry โดยไม่ได้ปรับแต่งตัวอักษร มันก็จะอ่านโค้ด css ส่วนนี้ แล้วเปลี่ยนให้ตัวอักษรของผมใหญ่ 16px ตามที่ได้กำหนดไว้ครับ

3. color:#000000;
โค้ดสี ใช้กับตัวอักษรเท่านั้น เช่นในส่วน .entry .post เหมือนเดิม ผมใส่ color:#ff0000; ตัวอักษรใน entry ของผมก็จะเป็นสีแดงทั้งหมด (ยกเว้นส่วนที่แต่งสีเอาไว้)

4. text-align:left;
เป็นการจัดข้อความตัวอักษรให้อยู่ ซ้าย กลาง หรือขวา ของส่วนนั้นๆ เช่น จะจัด text ของ .entry .post ให้ชิดซ้ายก็ใช้ left ถ้าให้อยู่ขวาก็ใช้ right แล้วแต่กรณี มันจะไม่เหมือน float เพราะ text-align ไปจัดการที่ตัวอักษร แต่ float มันจะเหมือน align ใน html ซึ่งจะไม่ได้จัดการแค่ตัวอักษร แต่มันจะยกแผงอะไรก็ตามที่มันครอบเอาไว้อยู่ จัดให้อยู่ใต้คำสั่งมัน ถ้า text-align คือ ขุนพล float ก็คือราชา (ตูใหญ่สุด ไม่มีใครกล้าแหยม ว่างั้น)

ทำความเข้าใจเรื่องโค้ดสี 

วิธีดูโค้ดสีแบบยาก
ข้อควรแล้วแต่จะจำ : โค้ดสีแบ่งเป็น 6 ตัว (บางทีใช้ 3 ตัวก็ได้เหมือนกัน)

ตัวอย่าง ff00ff = rrggbb
คำอธิบาย :
rr คือ แดงแดง หรือ redred
gg คือ เขียวเขียว หรือ greengreen
bb คือ ฟ้าฟ้า หรือ blueblue 

ค่าสีจะเข้มโดยเรียงจากเลขดังนี้ 0 1 2 3 4 5 6 7 8 9 a b c d e f
เลข 0 สีจะมืดสุด และเลข f สีจะสว่างสุด ดังนั้นถ้าทุกสีรวมกัน สว่างสุดๆ เป็น #ffffff ก็จะเป็นสีขาว ตัวอย่าง สีแดง
ff0000 = rrggbb = ค่าสีแดงให้สีออกมาเยอะสุด ส่วนเขียวกับฟ้าจะให้ค่าสีต่ำสุด
คิดแบบโง่ๆ : โดยให้ 000000 คือสีดำ แล้ว ffffff คือสีขาว แล้วเรามีจานสี 1 ชุด ค่าตั้งต้นให้เป็น 0 ทั้งหมด คือไม่มีสีใดๆ เลย นอกจากดำ แล้วใส่สีแดงลงไป เอาสักค่า 77 ละกัน อยู่กลางๆ ก็เหมือนเอาสีแดงสดๆ เลยนะ สดๆ เลย มาผสมกับสีดำ โทนสีแดงจะดรอปลง คือไปเป็นสีแดงหม่น หรือเราเห็นเป็นสีแดงเข้ม
คิดแบบ photoshop : จากคิดแบบโง่ๆ มาผสม โดยลองโยนมันไปที่ photoshop ดู เวลาเราเลือกสี เช่น สีแดง แล้วมันจะมีเกรดความเข้มสว่างๆ ข้างๆ ตอนเลือกสี ถ้าเราลากเกรดแสงลงไปที่สีดำ มันจะทำให้สีแดงเข้ม ความหมายเดียวกัน คือ เอาสีแดงไปผสมสีดำ 770000 โดยที่เราไม่ได้ใส่สีเขียวกับฟ้าลงไป มันก็จะเป็นสีแดงเข้ม

การผสมสี : ถัดมาเมื่อเราเข้าใจเรื่องโค้ดสีระดับหนึ่งแล้ว ลองมาคิดเล่นๆ ถ้าเราผสมสีแดงกับสีฟ้าจะเกิดอะไรขึ้น สีจะกลายเป็นสีอะไร จากโค้ด ff00ff
สีแสงที่แสงสว่างสุด กับสีฟ้าที่แสงสว่างสุด จะกลายเป็นสีชมพู เอ๊ะ ไม่ใช่แดงฟ้ารวมกันได้สีม่วงเหรอ? ใช่ครับได้สีม่วง แต่ทำไมผมเขียนว่าชมพู นั่นก็เพราะว่าค่าแสงของทั้งสองสีมันสว่างไงครับ ทำให้สีม่วงสว่างจนเป็นโทนชมพู แต่ถ้าเราปรับเกรดลงมาเป็น 770077 ซึ่งเป็นค่าความสว่างของสีทั้งสองระดับกลาง มันจะเห็นเป็นสีม่วง ลองคิดเล่นๆ มีเกรดสีม่วงจากเข้มสุดเลย คือม่วงดำจนดำไปเลย แล้วไล่โทนสีไปสว่างจนเป็นสีขาว ในจินตนาการไว้นะครับ เราจะเห็นม่วงไล่ไปเป็นสีชมพูครับ

วิธีดูโค้ดสีแบบง่าย
1. ใช้โค้ดสีจากโปรแกรมแต่งภาพเอา เช่น Photoshop เป็นต้น
2. หาภาพโค้ดสีจาก Google โดยค้นหาคำว่า Color Code ซึ่งจะมีโค้ดสีบอกเอาไว้เยอะมาก
3. เปิดเว็บหา Color Wheel จะมีเว็บที่เราจิ้มสีแล้วมันจะบอกโค้ดสีมาให้เราทันที บางเว็บมีการเทียบสีให้เราด้วย ซึ่งสะดวกในการนำไปใช้หลายๆ งาน ทั้งงานด้านออกแบบด้วยครับ

สรุป : สีมีค่าระดับความเข้มและสว่างจาก 0-f ค่า 7 และ 8 คือค่ากลางของแสง ตำแหน่งตัวโค้ดทั้ง 6 แบ่งเป็นของสีแดง สีเขียว สีฟ้า (หรือจะเรียกว่าน้ำเงินก็ได้ครับ) เวลาอยากได้สีที่โดนใจจริงๆ ใช้ photoshop แล้วเอาโค้ดสีมาแปะจะสะดวกที่สุด หรือมีวงล้อสี ที่มีโค้ดสีให้ทั้งหมดก็จะง่ายขึ้นเยอะเลยครับ

การใส่โค้ดในส่วนต่างๆ 

บางทีพี่น้องก็คงคิดอยากจะใส่โค้ดในส่วนของลิงค์ ทำลูกเล่นกับภาพ เอาเมาท์ชี้แล้วภาพเปลี่ยน บลาบลาบลา อะไรก็ว่าไป ทีวีไดริจขอเสนอ เทคนิคการใช้โค้ดให้เต็มประสิทธิภาพ

ขั้นแรก อยากใส่โค้ดกับลิงค์  
จำไว้อย่างครับ โค้ดลิงค์จะเป็น <a href=""></a> ได้ตรง a เนี่ยสำคัญมาก!! เพราะมันหมายถึงลิงค์นะ กูจะลิงค์มรึงละนะ

เวลาเขียนโค้ดใน css เช่น .entry .title h2 คือส่วน entry นี้ๆ ตรงหัวข้อ entry (title) ขนาดตัวอักษรที่ใช้ h2 ถ้างงกรุณาเปิดโค้ด view source นั่นล่ะครับ ดูตามประกอบ แล้วหาชื่อ entry ใช้บล็อคผมก็ได้ ก็หาไปเลยครับ "css กับการแต่งบล็อค" สิ่งที่พบคือ

<h2><a href="http://rije.exteen.com/20090107/css-1">css กับการแต่งบล็อค</a></h2>

อ่ะ ตรงนี้เราจะจัดการกับส่วนของลิงค์ คือ ประโยค "css กับการแต่งบล็อค" นั่นล่ะครับ

เวลาจะเขียนโค้ดกำหนดอะไรเนี่ย เราต้องชี้คำสั่งไปที่ตรงส่วนๆ นั้นเสียก่อน ก็จะเป็นว่าผมจะสั่งไปที่ title ของ entry นะ (กำหนดทีเดียวสั่งได้ทุก entry) โดยจะให้เวลาเอาเมาท์ชี้เนี่ยเป็นสีฟ้า แต่ก่อนจะเอาเมาท์ชี้เนี่ยก็ให้เป็นสีเขียวแล้วกัน ก็เริ่มชี้ไปเลยครับ

.entry .title a{
//จะใส่โค้ดในส่วนนี้
} 

.entry .title a:hover{
//คำสั่งเวลาเอาเมาท์ชี้
} 

ตอนนี้เราเขียน css เรียกชี้ไปที่ title แล้วนะครับ แต่ยังไม่มีอะไรเกิดขึ้นเพราะยังไม่ได้ใส่คำสั่งอะไรลงไปเลย จากนั้นทำความเข้าใจด้วยภาพประกอบด้านล่างก่อนนะครับ จากภาพเนี่ยจะเห็นว่า entry มาก่อน title มาก่อน a ซึ่ง entry กับ title เรียกผ่านคลาส (จาก source จะเป็น <div class="entry">) แต่ a ไม่ใช่คลาส เวลาเรียกพวกคลาสจะใช้ . นำหน้า (เพิ่มเติม : เป็น id จะใช้ # เรียก)

แต่จริงๆ แล้วเราจะชี้ไปเน้นๆ เลยว่าที่ title ก็ได้ครับ ก็จะเป็น .title a{} กับ .title a:hover{} ได้เลยครับ จากนั้นเรามาใส่โค้ดครับ จากที่ว่าไว้ เวลาไม่ชี้เมาท์เป็นสีเขียว

.title a{
color:#00ff00;
}

เวลาชี้เป็นสีฟ้า

.title a:hover{
color:#0000ff;
}

อธิบาย : a คือชี้บอกตรงส่วนลิงค์ใน title แต่หากเป็น a:hover หมายถึงเวลาเอาเมาท์ชี้ ตัวอย่างอื่นๆ

a:link =  จุดเชื่อมโยงลิงค์ (ถ้ายังไม่ได้กดลิงค์ก็จะเป็นตัวนี้)
a:visited = ลิงค์ที่เราเคยกดเข้าไปแล้ว
a:hover = เวลาเอาเมาท์ชี้ที่ลิงค์
a:active = ลิงค์ที่เรากำลังกดค้างไว้อยู่

ต่อมาเราอยากให้เวลาชี้ลิงค์ที่ title แล้วมีสีพื้นหลังด้วยทำยังไง
ก็ใส่้โค้ดพื้นหลังลงไปครับ

background:#สี url(ภาพ) repeatหรือไม่; กับอีกอย่าง
background-color:#สี;

งงเหรอครับ? ก็ดูโค้ดเลยแล้วกัน

background:#0000ff url(http://rije.exteen.com/avatar.jpg) repeat;
background-color:#0000ff;

เวลาเอาเมาท์ชี้ลิงค์จะเป็นพื้นหลังสีฟ้าครับ

อธิบายเรื่อง repeat 
เวลาที่เราใช้ background แล้วอยากให้ภาพซ้ำ แต่ไม่ใช่ซ้ำทั้งหมดทั้งเพจ ควรใช้ repeat ยังไง

repeat-x : ค่า x คือเราจะทำการซ้ำภาพไปทางแนวราบ
repeat-y : ค่า y คือเราจะทำการซ้ำภาพดิ่งลงไปด้านล่าง

วิธีการที่มันจะทำการภาพซ้ำเริ่้มจากจุดไหน?
เริ่มที่จุด 0,0 ครับ คือจุดซ้ายบนสุดของบราวเซอร์ครับ (เอ่อ เลยไปแล้วครับไม่ใช่ตรง file ลงมาหน่อยครับ ยังอยู่ในเพจครับไม่ใช่เมนูด้านบน) นั่นล่ะครับถ้าแกน x ก็ไปทางขวาจนสุดทะลุ scrollbar ถ้าแกน y ก็ดิ่งลงล่างไปเรือยๆ นั่นแล

อ้าว! แล้วจะทำให้มันอยู่แค่ตำแหน่งหนึ่งๆ ตำแหน่งเดียวทำยังไง?

ไม่ยากครับ ไม่ยาก ดับดุลริจช่วยคุณได้เสมอ เราไปถามดับดุลริจกันครับ

อับดุลริจเอ้ย! (เอ้ย!) ถามไรตอบได้ (ได้)  งั้นขอถามหน่อยจะทำให้พื้นหลังแสดงที่ตำแหน่งใดตำแหน่งหนึ่ง แบบกำหนดเองได้ไหม?

- โอ้ย จะยากอะไร ก็เอาโค้ดนี้ไปใช้เลย

background-position:x%,y%;
x คือจากแกน x ไปกี่ % (ไปทางขวา)
y คือจากแกน y ไปกี่ % (ไปทางใต้ดิน เอ้ยไปด้านล่าง)

แล้วถ้าเกิดอยากทำให้ภาพอยู่กับที่  เวลาเลื่อน scrollbar ลงมาแล้วภาพไม่ไหลตามมาทำยังไง?

- อันนี้ไม่ยากๆ เอาโค้ดนี้ไป

background-attachment: fixed;  ตัวเดียวอยู่ 

อ้าวแล้วถ้าเป็นภาพล่ะไม่ใช่ลิงค์

ขั้นสอง อยากใส่โค้ดกับภาพ 

- ตรงส่วน a ก็แก้เป็น img ส่วนถ้าเมาท์ชี้ภาพก็ใช้

a:hover img ตามด้วย {} นั่นแล  เอาไปประยุกต์กับส่วนอื่นๆ ได้

วิธีการดูตำแหน่งต่างๆ
ผมเคยเขียนเอาไว้แล้ว ลองดูประกอบที่
> มาแต่งธีมแจ่มๆ ให้บล็อคของคุณกัน
> #2 มาแต่งธีมแจ่มๆ ให้บล็อคของคุณกัน

ซึ่งผมว่าอ่านจากที่ผมเคยเขียนไว้ก็ได้นะครับ นำมาประยุกต์ใช้ได้เหมือนกัน

วิธีสร้าง opacity กับภาพ
ผมขอยกตัวอย่างมาจากลิงค์แบนเนอร์ทางขวามือของบล็อคนะครับ อันดับแรกเมื่อไม่ได้เอาเมาท์ชี้ที่รูปภาพจะมืดลง แล้วพอเอาเมาท์ชี้ภาพจะสว่้างขึ้น (เท่ากับภาพจริง) อันนี้ผมใส่้ class ของตัวเองชื่อว่า rije ดูตัวอย่างก่อนนะครับ

.rije img{
padding-top:5px;
opacity: 0.6;
-moz-opacity: 0.6;
filter: Alpha(Opacity=60);
}

.rije a:hover img{
background:#cc0066;
opacity: 1;
-moz-opacity: 1;
filter: Alpha(Opacity=100);
} 

โค้ดจะคล้ายกับของบล็อคคุณ xvista ตรงส่วน fav นั่นล่ะครับ

อธิบาย : เพิ่มโค้ด css ไว้ที่ Theme>css ของเรานั่นเอง โค้ดตัวแรก ผมสั่งให้ภาพมี opacity ดรอปลงมาอยู่ที่ 60% (ความชัดเจนของภาพ) ส่วนเมื่อเอาเมาท์ชี้ผมคืนค่าให้ opacity เป็น 100% (ชัดเจนสุดๆ เลย)

แต่โค้ด opacity ผมใส่ลงไป 3 ตัวติดกัน ผมขอแนะนำโค้ด opacity 4 ตัวแล้วกันนะครับ 

opacity:1; // ใช้กับทุกบราวเซอร์
-moz-opacity:1; // ใช้กับ Firefox 0.9 (เห็นเค้าไม่แนะนำให้ใช้กันแล้ว)
filter:Alpha(Opacity=100); // ใช้กับ IE 5-7
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; // ใช้กับ IE 8

ก็เลือกเอาไปใช้กันให้ถูกละกันนะครับ ^^

วิธีการทำไปใช้ : ตอนลิงค์เราต้องเขียนเรียกคลาสของเรานะครับ แต่ของผมทำลิงค์แบนเนอร์ด้วย custom code จึงไม่ต้องมาเรียกซ้ำทุกลิงค์ วิธีการเรียกแต่ละอย่างมีดังนี้

1. เรียกผ่านตัวลิงค์เลย
<a href="ลิงค์" class="rije"><img src="ภาพ"></a> 

2. เรียกผ่าน div
ในกรณีนี้ผมยัดลง custom code แล้วค่อยเรียกครับก็จะเป็น
<div class="rije">
//ลิงค์ทั้งหมด
</div>  

///////////////////////////////////////////////////////////////

จะมีความรู้เรื่อง css มาเพิ่มเติมอีกรอหน่อยนะครับ 

อยากรู้ความรู้อื่นๆ เข้าลิงค์ความรู้ด้านบนนะครับ (อนาคตอาจจะกลายเป็นชื่ออื่นแหงๆ เลย 5555 เพราะก่อนหน้ามันเป็น Tutorial)

///////////////////////////////////////////////////////////////

ยาวมากครับ แต่สงสัยอะไรถามได้ครับ หรือมีคำแนะนำดีๆ ผมขอนำมาต่อยอดใน entry นี้เลย