orange melody ♪

 

 

 

จากเอนทรี่แจกธีม เห็นบางคนก็สนใจเจ้าส่วน leg กัน
(ไม่รู้จะเรียกมันว่าอะไรเลยเรียกมันว่า "สามกล่อง" ใครมีชื่อเก๋ๆ เสนอแนะมาได้นะ)

※ ถึงจะบอกว่าเป็นส่วน leg แต่งจริงๆ ก็ปรับไปใช้กับส่วน neck ได้เช่นกัน ※

ทางที่ดีก็ควรจะมีพวก CSS reference ไว้ดูเวลาแก้ไข เพื่อความสะดวก :)

 

ก่อนอื่นก็ควรจะรู้ว่าแต่ละตัวควบคุมส่วนไหนของส่วน leg บ้าง (กดดูขนาดเต็มที่รูปได้เลย)
ถ้ารู้พวกนี้ อะไรๆ ก็ไม่ยากเกินความสามารถแล้ว ~

ถ้าใช้ Firefox ขอแนะนำให้ลงปลั๊กอินที่ให้เราแก้ CSS และอัพเดทไปพร้อมๆ กัน
(ถ้าใช้ Web Developer ให้กด Ctrl+E เพื่อเรียกตัวแก้ CSS ฮะ)
จะได้ไม่ต้องนั่งกดรีเฟรชในหน้า CSS Editor ตลอดเวลา (เพื่อความสะดวก ว่าอย่างงั้นเถอะ)

 

 ※ ตัวโค้ดแบบไม่มีคอมเม้นท์นั้นอยู่ท้ายเอนทรี่ฮะ สำหรับคนที่อยากก้อปไปใช้เลย ※

 

ตัวนี้ควบคุมกล่องใหญ่ของส่วน leg

#leg {
    background:#FBEC5D;
          ^ ถ้าไม่อยากให้มีสีพื้นหลัง (หรือเป็นพื้นหลังใส) ให้ใส่ none แทน
    text-align: left;
    font-family: 'Verdana'; <-- ชื่อฟ้อนต์
}

 

ตัวนี้ควบคุมกล่องเล็กในกล่องใหญ่

#leg .module{
    background:none; <-- ถ้าใส่ none มันจะใส พื้นหลังจึงกลายเป็นสีที่เราใช้ด้านบน
    display:block; <-- อันนี้สำคัญ ถ้าใส่ inline มันจะแสดงค่าต่างกันนะ
    float:left;
    margin:10px 0px 0px 15px; <-- ไว้จัดระยะห่างระหว่างแต่ละกล่องเล็กในกล่องใหญ่
    padding:2px 0px 5px 20px; <-- ระยะห่างของพวกตัวหนังสือหรือข้อมูลในตัวกล่องเล็ก
    width: 205px;
           ^ ความกว้างของแต่กล่องเล็กที่ต้องการ ขึ้นอยู่กับว่าต้องการกี่กล่อง และความกว้างของบล็อก เช่น ถ้าหากว่าต้องการ 4 กล่องก็ต้องลดความกว้าง หรือถ้าต้องการแค่สองกล่องก็เพิ่มความกว้าง เป็นต้น
}

※ สมมุติว่าเราใส่ background:none; ใน #leg และ background:โค้ดสี; ใน #leg .module
หน้าตาของเจ้าสามกล่องจะเป็นแบบในรูปด้านล่าง ซึ่งก็เป็นอีกแบบหนึ่งที่หลายๆ คนอาจจะสนใจนะ
ก็ต้องลงทดลองปรับเล่นๆ เอง ※

#leg .module ul{
    display:inline; <-- ทิ้งไว้แบบนี้แหละ
    list-style: none; <-- ไว้เลือกว่าต้องการพวกวงกลมด้านหน้าลิสต์หรือเปล่า
    margin:0px;
    padding:0px;
    font:11px 'Verdana';
}

ควบคุมตัวหนังสือหัวข้อจำพวก Page, Categories, Links เป็นต้น

#leg .module h2 {
    font-size:17px; <-- ขนาดฟ้อนต์หัวข้อ
    font-weight:normal;
           ^ เซตให้ตัวฟ้อนต์เป็นแบบธรรมดา ไม่หนา (ถ้าจะเอาหนาเปลี่ยนเป็น bold)
    text-transform:lowercase; <--
           ^ ทำให้มันเป็นตัวพิมพ์เล็กหมดเลย(ตัวเลือก uppercase กับ capitalize)
    font-family:'trebuchet ms';
    text-align:right; <-- การจัดวางตัวอักษร อย่างในตัวอย่างนี้คือวางด้านขวา
    color:#FFCC11; <-- สีตัวหนังสือ
}

 
#leg .module li {
    border-bottom: 1px dotted #FCD116;
           ^ ไว้เซตเส้นใต้ลิสต์ อันนี้จะเป็นจุดๆ ถ้าอยากเป็นเส้นตรงธรรมดาให้ใช้ solid หรือถ้าไม่อยากให้มีเส้นเลย ก็เปลี่ยนตัวเลขเป็น 0px แทน
    padding:3px 4px 3px 5px;
           ^ ไว้เซตความห่างระหว่างตัวอักษรกับเส้นใต้และรอบๆ ตัวหนังสือ
}

อันนี้เป็นสำหรับลิงค์ ถ้าไม่อยากจัดอะไรเป็นพิเศษ ก็น่าจะทิ้งไว้แบบนั้นได้

#leg .module li a{
    padding:2px 10px 2px 5px;
    font-size:10px; <-- ขนาดตัวอักษร
    color:#EEAD0E; <-- สีลิงค์
}

สำหรับลิงค์ที่เราเอาเม้าส์วางทับ

#leg .module li a:hover {
    padding:2px 10px 2px 5px;
    color:#999;
}

ไว้เปลี่ยนพื้นสีทั้งแถบของตัวลิสต์เวลาเอาเม้าส์วางทับ
ถ้าหากว่าเราใส่ค่าในด้านบนแทน มันจะเป็นแค่พื้นหลังของตัวอักษรแต่ไม่ใช่ทั้งบรรทัด
(ถ้าดูจากในรูป มันก็คือจะแถบที่เป็นสีเหลืองที่เข้มกว่าส่วนอื่นๆ นั่นเอง)

#leg .module li:hover {
    background-color:#FFE04F;
    border-color:#FFE04F; <-- สีกรอบ (ถ้าไม่อยากให้มันสีเดียวกับพื้นหลัง)
}

ก็มีแค่นี้ หวังว่าจะเป็นประโยชน์ต่อหลายๆ คนนะ 8D
มีคำถามอะไรก็สามารถทิ้งคอมเม้นต์เอาไว้หรือจะ EMS มาก็ได้