css

สืบเนื่องจากวิธีการขยายขนาดความกว้างของบล็อก
จนทำให้มีพื้นที่เพิ่มเติมสำหรับเขียนเอ็นทรีกันอย่างเมามัน

เมื่อได้พื้นที่เพิ่มขึ้นมาแล้ว หลายคนอาจจะเริ่มมองถึงเทคนิคขั้นถัดไปที่จะเอามาทำให้
บล็อกซับซ้อนขึ้นไปอีกขั้นหนึ่ง นั่นคือ การทำ sidebar ให้โผล่ขึ้นมาในบล็อกทั้งสองฝั่ง

ซึ่งผมจะไม่เขียนอธิบายวิธีการทำ sidebar แบบนั้นให้หรอก

. . .

นั่น งงกันใหญ่ ( บางคนถึงกับบ่นอุบว่า แล้วเอ็งจะเขียนเกริ่นมาทำปลากระป๋องทำไม )

. . .

เชอะ ชิ ชะ ก็ที่ไม่เขียน เพราะจะมาแนะนำเอ็นทรีที่มีคำอธิบายวิธีการเอาไว้อย่างละเอียดดี
และเข้าใจง่ายอยู่แล้วต่างหาก นั่นคือเอ็นทรีเรื่อง "ทำบลอคที่มีเมนูทั้งซ้าย-ขวากัน" ของคุณ sa-i

ตอนนี้คิดว่าคนส่วนใหญ่คงจะเริ่มชินกับการแต่งธีมหรู ๆ ในเวอร์ชั่นใหม่แล้ว (หลังจากที่มึนกัน
มาอยู่ระยะหนึ่ง) คาดว่าตอนนี้คงจะมีคนเริ่มสนใจที่จะแต่งธีมให้ซับซ้อนขึ้นไปอีกระดับหนึ่ง
แต่ก็ยังไม่เห็นมีลิ้งค์ไปที่เอ็นทรีนั้นเสียที ทั้งที่คุณ sa-i เขียนเอาไว้ตั้งแต่วันแรก ๆ ทีเอ็กทีน
เปลี่ยนเวอร์ชั่น ก็เลยอยากเอามานำเสนอให้ทั่วถึงกันอีกครั้งหนึ่ง

หากใครสนใจก็ลองไปปรับแต่งบล็อก ตามคำอธิบายนั้นละกันครับ ไม่ยากอย่างที่คิดหรอก

แต่ยังไงก็ตาม ผมยังก็คิดว่าบล็อกต้องกว้างหน่อยล่ะ

ป.ล.
เห็นคุณเจ้าชายน้อยแต่งบล็อกแบบใหม่ โดยการนำเอา sidebar ไปแปะติดกันในฝั่งเดียว
ซึ่งดูแล้วดูเท่ห์ดีทีเดียว (หมายถึงตัวบล็อกนะครับ ส่วนเจ้าของบล็อกนั้นเป็นอีกเรื่องหนึ่ง
ที่ผู้เยี่ยมชมคงต้องค้นคว้าและวิจัยเพื่อหาคำตอบกันเอาเอง) ... อย่างนี้ต้องลอง

ธีมของเอ็กทีน

posted on 10 Oct 2007 20:42 by oatato in BlogDesign

คติพจน์ประจำวันนี้ 

"ถ้าอยากใช้ฟีเจอร์ใหม่ ๆ ของเอ็กทีน ก็จงเปลี่ยนไปใช้ธีมใหม่ของเอ็กทีนซะดีดี"

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

. . . 

ธีมของบล็อก ก็เหมือนสีสันในชีวิตประจำวัน มีจุดเปลี่ยนบ้างก็ดี จะได้ไม่น่าเบื่อจนเกินไป

มาเพิ่มสีสันและความแปลกใหม่ให้กับเอ็นทรีกันดีกว่า...

ถ้าคุณมีข้อความในเอ็นทรีที่ความยาวหลายบรรทัด

- - - - - - - - - - - - - - - - - - - - - - - - -

ยาว

ย้าว

ยาว

ยาวมาก

ยาวเกินไป

ยาวจนเกะกะ

ยาวจนกินเนื้อที่บนหน้าจอในบล็อกคุณ

- - - - - - - - - - - - - - - - - - - - - - - - -

วันนี้ขอแนะนำทางเลือกใหม่ในการจำกัดพื้นที่ของเนื้อหาโดยใช้ scrollbar เป็นตัวช่วย

ตอนเขียนเอ็นทรี ให้คลิกที่ปุ่ม แล้วแทรกโค้ดนี้ลงไปในส่วนที่ต้องการให้มีกรอบพร้อม scrollbar

<div style="OVERFLOW: auto; width: 100%; height: 100">เนื้อหายาว ๆ </div>

แล้วปัญหาดังกล่าวจะหมดไป

ยาว

ย้าว

ยาว

ยาวมาก

ยาวเกินไป

ยาวจนเกะกะ

ยาวจนกินเนื้อที่บนหน้าจอในบล็อกคุณ

เพิ่มเติม

สามารถปรับเปลี่ยนความกว้างและความยาวกันได้ตามชอบ
และสามารถเพิ่มเติมคุณสมบัติอื่น ๆ ได้อีกด้วย
ตัวอย่างเช่น

<div style="OVERFLOW: auto; width: 80%; height: 150; color:#FFFFFF; background-color:#C0F060">เนื้อหายาว ๆ </div>

  • width: 80% หมายถึง ความกว้างของกรอบเป็น 80% ของเนื้อที่การเขียน
  • height: 150 หมายถึง ความสูงของกรอบเท่ากับ 150 พิกเซล
  • color:#FFFFFF หมายถึง สีตัวอักษรในกรอบมีสีขาว
  • background-color:#C0F060 หมายถึง สีพื้นในกรอบมีสีเขียว

ยาว

ย้าว

ยาว

ยาวมาก

ยาวเกินไป

ยาวจนเกะกะ

ยาวจนกินเนื้อที่บนหน้าจอในบล็อกคุณ

ใครสนใจก็สามารถนำไปทดลองใช้กันได้นะครับ

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

การเปลี่ยนธีมแบบสุ่ม

จากที่หลาย ๆ คนได้เห็นธีมเฉพาะกิจ:แฮร์รี่พอตเตอร์ในบล็อกนี้มาหนึ่งอาทิตย์แล้ว
นั่นแหละคือการเปลี่ยนธีมแบบสุ่มและในวันนี้เราจะมาเฉลยเทคนิคให้ทราบกัน

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

ลักษณะการทำงานของฟังก์ชั่นเปลี่ยนธีมแบบสุ่มก็คือ เป็นการสุ่มเลือกค่าออกมา
จากขอบเขตที่กำหนดไว้ เช่น ขอบเขตที่กำหนดไว้คือ7 เลขที่จะถูกสุ่มออกมา
ก็จะอยู่ระหว่าง 0 ถึง 6 เท่านั้น

ให้ลองศึกษาสคริปต์ข้างล่างดูนะครับ

function getCSS()
{ 
// สร้างตัวแปรเพื่อระบุ url ที่ใช้ฝากไฟล์ css
url = 'http://www.yourhost.com/folder/'; // สร้างอาร์เรย์ (Array) เพื่อเก็บสมาชิกของชื่อไฟล์ธีมต่าง ๆ ที่จะนำมาใช้
themes = new Array ("style1", "style2", "style3", "style4",
"style5", "style6", "style7");
// ขอบเขตก็คือจำนวนสมาชิกในอาร์เรย์นั่นเอง นับดูตอนนี้จะเท่ากับ 7
range = themes.length;
today = new Date();		// สร้างตัวแปรรับค่าวันเวลาปัจจุบัน
second = today.getSeconds(); // ดึงเฉพาะเลขวินาทีออกมาใส่ตัวแปร
// เอาค่าวินาทีมา mod กับขอบเขต จะได้ค่าระหว่าง 0 ถึง 6
var i = second%range;
// ค่าที่สุ่มออกมาได้จะเป็นตำเหน่งของสมาชิกในอาร์เรย์ที่เป็นชื่อไฟล์
display = url + themes[i] +'.css';
//สั่งให้โค้ดสร้างคำสั่งเรียกธีมโดยใช้ตัวแปร display มาใส่แทนในส่วนของชื่อไฟล์
var css = '<';
css+='link rel="stylesheet" href="' + display + '" \/';
css+='>';
// พิมพ์คำสั่งเรียกธีมที่สร้างเสร็จแล้ว
document.write(css);
}

getCSS();

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

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

ในขณะที่ฟังก์ชั่นสุ่มของจริง (random) จะต้องใช้การทำงานที่ซับซ้อนกว่าอีกนิดนึงคือ
คือมันจะมีหน้าที่สุ่มเลือกค่าระหว่าง 0 ถึง 1 ออกมาให้เท่านั้น ที่เหลือเป็นหน้าที่ของเรา
ที่จะกำหนดขอบเขตของจำนวนที่ต้องการเอาเอง
ซึ่งถ้าเราจะเปลี่ยนโค้ดการเปลี่ยนธีม
ด้านบนให้มาใช้ฟังก์ชั่นการสุ่มจริง ๆ เราจะต้องเปลี่ยนโค้ดในบรรทัดเหล่านี้

today = new Date();		// สร้างตัวแปรรับค่าวันเวลาปัจจุบัน
second = today.getSeconds(); // ดึงเฉพาะเลขวินาทีออกมาใส่ตัวแปร
// เอาค่าวินาทีมา mod กับขอบเขต จะได้ค่าระหว่าง 0 ถึง 6
var i = second%range;

ให้เป็นแบบนี้แทน

var rand = Math.random();
// ตัวแปร rand จะบรรจุค่าหนึ่งที่อยู่ระหว่าง 0 ถึง 1 (มีทศนิยมให้หลายตำแหน่ง)
  var i = Math.round(rand*(range-1));
// พอเอาไปคูณกับ range-1 ที่เท่ากับ 6 จะทำให้ค่าที่สุ่มได้จะอยู่ระหว่าง 0 ถึง 6
// ส่วนฟังก์ชั่น Math.round จะช่วยปัดเลขทศนิยมให้เป็นเลขจำนวนเต็ม

จะสังเกตุว่าเป็นการทำงานอย่างสุ่ม ซึ่งต้องใช้ฟังก์ชั่นการคำนวณเพิ่มขึ้น ทำให้มีการคำนวณ
เพิ่มขึ้นอีกเล็กน้อย เมื่อเปรียบเทียบกับแบบแรก ที่สามารถสร้างตัวเลขแบบสุ่มได้เหมือนกัน

เอาล่ะ ถ้าแก้ไขโค้ดให้ได้ที่ต้องการเสร็จเมื่อไหร่ บันทึกโค้ดลงในไฟล์ สมมุติว่าชื่อ "css_random.js"

ส่วนคำสั่งสำหรับการเรียกใช้สคริปต์ css_random.js เป็นดังนี้

<script language="javascript" src="http://www.yourhost.com/folder/css_random.js"></script>

ทีนี้ก็เอาโค้ดตรงโซนสีเขียวไปแปะในเอ็นทรีก็ได้

หรือถ้าจะต้องการให้มีผลกับทั้งบล็อก ก็ให้ไปวางโค้ดเรียกสคริปต์ในส่วนของ
Preferences > Links > Add New Link แทน

ลองเอาไปทดลองดูนะครับ สนุกดี

การยืม Theme ไปใช้

posted on 26 Jun 2007 10:00 by oatato in BlogDesign

จากที่เขียนเกี่ยวกับ การเปลี่ยน Theme แบบซ้บซ้อนเพิ่งมานึกประโยชน์ที่น่าสนใจได้อีกข้อคือ

เราสามารถขอยืม Theme จากเพื่อนฝูงเอาไปใช้ตกแต่งบล็อกของเราเองได้ง่าย ๆ เลยทีเดียว
เพียงแค่รู้ตำแหน่ง (URL) ของไฟล์ css ที่เพื่อน ๆ อัพโหลดฝากไว้ในเว็บก็ดึงมาใช้ได้แล้ว

สมมุติว่า ผมต้องการจะแจกธีมชื่อ style03.css ผมก็จะบอกตำแหน่งว่าไฟล์นี้ถูกเก็บอยู่ที่
http://www.fileden.com/files/2007/1/5/597239/css_exteen/style03.css

ซึ่งจะทำให้คุณสามารถใส่โค้ดที่สามารถเลือกธีมได้อย่างถูกต้อง

<link rel="stylesheet" href="http://www.fileden.com/files/2007/1/5/597239/css_exteen/style03.css" type="text/css" />

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

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

ผลลัพธ์ที่ได้(คลิก)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

แต่ก่อนจะที่เริ่มอะไร มีข้อจำกัดที่ผู้ยืมธีมไปใช้จำเป็นต้องทราบคือ

  • ถ้ามีการเปลี่ยนแปลงแก้ไขภาพและสีของธีมนั้น มันก็จะมีผลไปกับบล็อกคุณไปด้วย
    ซึ่งไม่ว่าคุณจะชอบธีมใหม่ที่มีการแก้ไขหรือชอบของเก่าที่มีอยู่เดิม ก็เลือกไม่ได้อยู่ดี
  • ถ้าไฟล์ css นั้นถูกเปลี่ยนชื่อไฟล์หรือลบไฟล์ css นั้นแล้ว คุณก็ไม่สามารถใช้ Theme นั้น
    ได้อีกต่อไป เสียใจด้วยนะ

ถ้ายอมรับข้อนี้ได้ ก็เชิญตามสบายครับ=)

ป.ล. ขอปิดฟังก์ชั่นเปลี่ยนธีมตามเวลาชั่วคราว เพื่อการแสดงผลการทดลองข้างบน
ถ้าไม่ปิด พอมันเปลี่ยนธีมตามการทดลองปุ๊บ มันก็จะไปรันโค้ดเปลี่ยนธีมตามเวลา
อีกอันทันที ตาไวยังไงก็ไม่เห็น แล้วจะเปิดใหม่อีกทีหลังเอ็นทรีนี้ตกไปซักพักละกัน

Recommend