ฮาวทูฉบับพระเจ้า : มาพวกเรามาทำธีม (1)
posted on 20 Jan 2005 21:43 by champcpe
หลังจากปล่อยให้สมาชิกทั้งหลาย มั่วกับการทำ advance theme มานาน ก็ถึงเวลาที่เราจะเปิดเผยวิธีการทำ theme ฉบับที่ค่อนข้างจะ official ให้คนที่รอคอยอ่านกัน (แต่กลัวว่าจะทำไม่สวยเท่าสมาชิกนะซี้)
ก่อนที่จะทำธีมได้ เราต้องรู้จักภาษาที่ใช้นิยาม theme กันเสียก่อน อ้อ ! ถ้าใครยังไม่รู้ว่าจะเปลี่ยน theme แบบ advance ได้อย่างไร ให้เข้าไปที่ส่วนจัดการบลอคของท่าน เห็นไอคอน
Themes หรือเปล่าครับ นั่นแหละกดเข้าไปเลย แล้วด้านล่างจะปรากฏให้เลือก คลิกคำว่า advance theme ด้านขวาจะเห็นตัวหนังสือเป็นพรืดๆๆๆ คล้ายภาษาต่างดาว
คนที่เห็นครั้งแรก ถ้าไม่รู้จักภาษานี้มาก่อน ก็คงจะล้มชักประดาตายด้วยความงง หรือไม่ก็ต้องค่อยๆ แกะเกากันเป็นจุดๆ ... ภาษานี้เรียกว่า CSS (Cascading Style Sheet) ครับ เป็นภาษาที่ใช้นิยามส่วนประกอบของหน้าเว็บ ธรรมดาสมมติเวลาเราเขียนเว็บ แล้วอยากให้ตัวหนังสือเป็นสีแดงที่ไหนเนี่ย เราจะต้องมาใช้แท็ค <<font color="red">> กันทุกครั้งไปใช่ไหมครับ แต่ css ทำให้เรื่องพวกนี้ง่ายขึ้นได้โดยการย่อแทคพวกนี้ เซฟเก็บไว้เหมือนเป็นหนึ่งสไตล์ ถ้าอ่านมาถึงตรงนี้ ยังไม่เข้าใจ ยังไม่ต้องงง เดี๋ยวอ่านตอนต่อๆ ไปก็เข้าใจเองครับ
บอกไว้ก่อนนะครับ ว่าตอนนี้เราจะยังไม่ไปยุ่งกับโค้ดพวกนี้ อยากให้สมาชิกที่อ่านอยู่ (ถ้ายังทำไม่เป็น) จัดการเตรียม layout คร่าวๆ ที่อยากให้บลอคของคุณเป็นซะก่อน โดยจะเตรียมใน photoshop หรืออะไร ก็แล้วแต่ถนัดครับ อย่างของผมที่จะเอามาเป็นตัวอย่าง เป็นรูปนี้...
ซึ่งถือว่าเป็นการ modify ที่ค่อนข้างจะมากเลยหละครับ คือเราจะเอา title และ "เขียนสุดท้ายเมื่อวันที่..." ออก แล้วก็ปรับ ด้านซ้าย และด้านขวา ให้ไม่เสมอกันด้วย (ในธีัมทั่วๆ ไปด้านซ้ายที่แสดง recommend&previous กับด้านขวาที่แสดง blog จะเสมอกัน) <-- ไม่รู้จะทำได้หรือเปล่านะเนี่ย ไว้มาทดลองไปพร้อมๆกันละกัน
ขั้นตอนนี้อย่าคิดว่ากระจอกนะครับ สำคัญที่สุดเลยหละ รูปสวยมีชัยไปกว่าครึ่ง ถ้ารูปไม่สวยถึงทำตรงส่วน coding ดียังไง ก็สู้ไม่ได้ครับ จัดการหาอะไรที่บ่งบอกความเป็นตัวคุณได้ดีที่สุด ถ้าจะให้ดี ให้เกี่ยวข้องกับเรื่องที่คุณเขียนด้วยจะเจ๋งมาก เช่น บลอคของคุณแมว catkun นั้น เข้ามาก็เห็นเป็นรูปแมวเลย ก็จะเข้าใจความบ้าแมวของเขาได้ตั้งแต่แรกพบ
ปล. ความกว้างของหน้าเพจที่เหมาะสม คือ 780 ครับ จะทำให้ผู้คนที่เปิดจอที่ความละเอียด 800x600 มองบลอคของเราได้อย่างพอดิบพอดี ไม่ต้องเลื่อนหน้าจอให้วุ่นวาย หรือถ้าใครจะเผื่อๆ ก็ทำไว้ที่ 760 ก็ไม่ว่ากัน
ปล. 2 Plants! ผ่านเข้ารอบชิงของ nectec แล้วหละครับ ดีใจ :D
ไปเตรียมรูปกับคิด layout มาให้ดีครับ ตอนหน้ามาต่อกัน (ไม่รู้จะจบภายในกี่ตอนนะ)
ก่อนที่จะทำธีมได้ เราต้องรู้จักภาษาที่ใช้นิยาม theme กันเสียก่อน อ้อ ! ถ้าใครยังไม่รู้ว่าจะเปลี่ยน theme แบบ advance ได้อย่างไร ให้เข้าไปที่ส่วนจัดการบลอคของท่าน เห็นไอคอน
Themes หรือเปล่าครับ นั่นแหละกดเข้าไปเลย แล้วด้านล่างจะปรากฏให้เลือก คลิกคำว่า advance theme ด้านขวาจะเห็นตัวหนังสือเป็นพรืดๆๆๆ คล้ายภาษาต่างดาวคนที่เห็นครั้งแรก ถ้าไม่รู้จักภาษานี้มาก่อน ก็คงจะล้มชักประดาตายด้วยความงง หรือไม่ก็ต้องค่อยๆ แกะเกากันเป็นจุดๆ ... ภาษานี้เรียกว่า CSS (Cascading Style Sheet) ครับ เป็นภาษาที่ใช้นิยามส่วนประกอบของหน้าเว็บ ธรรมดาสมมติเวลาเราเขียนเว็บ แล้วอยากให้ตัวหนังสือเป็นสีแดงที่ไหนเนี่ย เราจะต้องมาใช้แท็ค <<font color="red">> กันทุกครั้งไปใช่ไหมครับ แต่ css ทำให้เรื่องพวกนี้ง่ายขึ้นได้โดยการย่อแทคพวกนี้ เซฟเก็บไว้เหมือนเป็นหนึ่งสไตล์ ถ้าอ่านมาถึงตรงนี้ ยังไม่เข้าใจ ยังไม่ต้องงง เดี๋ยวอ่านตอนต่อๆ ไปก็เข้าใจเองครับ
บอกไว้ก่อนนะครับ ว่าตอนนี้เราจะยังไม่ไปยุ่งกับโค้ดพวกนี้ อยากให้สมาชิกที่อ่านอยู่ (ถ้ายังทำไม่เป็น) จัดการเตรียม layout คร่าวๆ ที่อยากให้บลอคของคุณเป็นซะก่อน โดยจะเตรียมใน photoshop หรืออะไร ก็แล้วแต่ถนัดครับ อย่างของผมที่จะเอามาเป็นตัวอย่าง เป็นรูปนี้...
ซึ่งถือว่าเป็นการ modify ที่ค่อนข้างจะมากเลยหละครับ คือเราจะเอา title และ "เขียนสุดท้ายเมื่อวันที่..." ออก แล้วก็ปรับ ด้านซ้าย และด้านขวา ให้ไม่เสมอกันด้วย (ในธีัมทั่วๆ ไปด้านซ้ายที่แสดง recommend&previous กับด้านขวาที่แสดง blog จะเสมอกัน) <-- ไม่รู้จะทำได้หรือเปล่านะเนี่ย ไว้มาทดลองไปพร้อมๆกันละกัน
ขั้นตอนนี้อย่าคิดว่ากระจอกนะครับ สำคัญที่สุดเลยหละ รูปสวยมีชัยไปกว่าครึ่ง ถ้ารูปไม่สวยถึงทำตรงส่วน coding ดียังไง ก็สู้ไม่ได้ครับ จัดการหาอะไรที่บ่งบอกความเป็นตัวคุณได้ดีที่สุด ถ้าจะให้ดี ให้เกี่ยวข้องกับเรื่องที่คุณเขียนด้วยจะเจ๋งมาก เช่น บลอคของคุณแมว catkun นั้น เข้ามาก็เห็นเป็นรูปแมวเลย ก็จะเข้าใจความบ้าแมวของเขาได้ตั้งแต่แรกพบ
ปล. ความกว้างของหน้าเพจที่เหมาะสม คือ 780 ครับ จะทำให้ผู้คนที่เปิดจอที่ความละเอียด 800x600 มองบลอคของเราได้อย่างพอดิบพอดี ไม่ต้องเลื่อนหน้าจอให้วุ่นวาย หรือถ้าใครจะเผื่อๆ ก็ทำไว้ที่ 760 ก็ไม่ว่ากัน
ปล. 2 Plants! ผ่านเข้ารอบชิงของ nectec แล้วหละครับ ดีใจ :D
ไปเตรียมรูปกับคิด layout มาให้ดีครับ ตอนหน้ามาต่อกัน (ไม่รู้จะจบภายในกี่ตอนนะ)
ไอ้แพท..
มาสเตอร์แชมป์
ฮ่าๆ
#1 By Catkun on 2005-01-20 21:49