How to แต่งหน้านิยายเบื้องต้น ! [ฉบับเข้าใจง่าย]
ตั้งกระทู้ใหม่
วันนี้จะมานำเสนอ 6 วิธีง่ายๆ ในการใส่ลูกเล่น basic
ตกแต่งหน้านิยายของคุณให้อลังการ จนคนเห็นต้องร้องว้าวกัน !!
หน้านิยายของเราก็เหมือนหน้าปกนิยายบนชั้นวางหนังสือในร้าน B2S ที่ทำให้คนหลงหยิบมันขึ้นมาลองอ่านดูสักสองสามหน้าล่ะครับ ถือเป็นปัจจัยหนึ่งที่ประกอบการตัดสินใจเลือกของนักอ่าน แต่แนะนำว่าควรแต่งให้พองาม อย่าหลงกับมันมากเกินไป จนลืมความสนุกของเนื้อหาด้านในของนิยายคุณไปนะครับ :D
-[ ทำความรู้จักกับพระเอกของเรา ]-
1. เมื่อเราคลิกเข้าไปในหน้า ข้อมูลเบื้องต้นนิยาย แวะลงมาดูที่ด้านล่างสุด ก็จะเจอพระเอกของเรา หน้าตาเป็นแบบนี้
2. ภารกิจของเขา คือเป็นแม่ทัพจำเป็น ออกคำสั่งให้หน้านิยายสวยชิ้งในแบบที่เราต้องการ ซึ่งภาษาที่พระเอกเราจะใช้ออกคำสั่งก็คือ ภาษา css ครับ
3. ภาษา css ย่อมาจาก Cascading style sheet เป็นภาษาที่แม่ทัพใช้ออกคำสั่งกับทหารให้จัดการตกแต่งหน้าเว็บในอาณาจักร html ถ้าขาดภาษานี้ไปหน้าเว็บคงจะไร้สีสัน และระเบียบใดๆเหมือนกับกองทหารที่ขาดการสั่งสารที่ดี
4. เวลาจะออกคำสั่งต้องเปิดด้วย <style type="text/css"> ในช่วงนี้ก็ออกคำสั่งต่อกันไปได้เลย กี่ร้อยคำสั่งก็ว่าไป และปิดด้วย </style> เสมอ ถึงจะคุยกันรู้เรื่อง
5. วิธีใช้งานคือ เรียกชื่อทหารที่ท่านต้องการ และบอกคำสั่งกับเขาว่า จะให้ตกแต่งอะไรตรงนี้ ตรงนั้น ให้เป็นแบบไหน เช่น ทหารชื่อ chapter-item-name รับผิดชอบในส่วนนี้ อยากให้เขาเปลี่ยนจุดนี้เป็นสีแดง และเพิ่มขนาดตัวอักษรเป็น 18 ถ้ามีคนเลื่อนเมาส์ไปวาง (hover) เราก็จะสั่งเขาว่า...
.chapter-item-name : hover{
color : red;
font-size : 18px;
}
ทหารก็จะแบ่งออกตามกลุ่ม แบบนี้ (มีอีกเยอะ นี่เอา basic ก่อน)
1- ชื่อ คือกองทหารแต่ละกอง เรียกว่า element (เรียกชื่อกองเฉยๆเลย)
2- .ชื่อ คือหมู่ของทหารแต่ละหมู่ เรียกว่า class
3- #ชื่อ คือเรียกพลทหารแต่ละคน เรียกว่า id
6. อันนี้จะแค่ให้พอรู้เป็นพิ้นฐานนะ เพราะความจริงมันแต่งได้ advance กว่าที่เห็นมาก แต่ผมกลัวว่ามันจะยากเกินไปสำหรับหลายคน เลยขอตีวงให้อยู่แค่ในระดับ Basic นะครับ : D
-[ ใส่พื้นหลังให้หน้านิยาย ]-
1. ก่อนอื่นผมก็ไปหาก่อนว่า เจ้า(กอง/หมู่/พล)ทหารที่รับผิดชอบเรื่องพื้นหลัง มันชื่อว่าอะไร
2. ในที่นี้ผมหามาให้แล้ว เป็นกองทหารที่ชื่อว่า body ครับ อ่ะ ทีนี้ก็เหลือแค่ว่าจะสั่งอะไร
<style type="text/css"> //ต้องใส่เสมอ
body {
background : url (https://image.dek-d.com/27/0543/2886/124065377)
repeat fixed;
background : url (https://image.dek-d.com/27/0543/2886/124065377)
repeat fixed;
! important;
}
</style> //ไม่ต้องปิดทุกคำสั่ง แค่ปิดท้ายบรรทัดล่างสุดก็พอ}
3. ไปก็อป link ภาพจากที่ไหนก็ได้ (google/เว็บฝากไฟล์/อัลบั้มเด็กดี) มาใส่ในบรรทัดแรก แต่แนะนำว่าควรเป็นภาพขนาด 1920x1080 หรือ ใหญ่กว่า
4. บรรทัดสอง คือการล็อกตำแหน่งภาพให้เป็นวิญญาณตามติด ตอนเราเลื่อนลง
5. บรรทัดสาม คือการบอกว่า คำสั่งนี้เป็นเควสสำคัญจากแม่ทพระดับสูงสุด ถ้ามีคำสั่งไหนหลังจากนี้เข้ามาอีก ห้ามทำ
-[ ปรับให้สีพื้นโปร่งใส ]-
.clear .content{
">255,255,255, 0); //ตัวคำสั่งรอง กัน bug เพราะมันมีสองชั้น
}
1. ตัวเลขสีแดง คือ โค้ดสี RGB ครับ ( จิ้มโค้ดสีและดูรายละเอียดได้ ที่นี่ )
2. ตัวเลขสีน้ำเงิน คือ ค่าความโปร่งใสเป็นทศนิยมจาก 0-1 (0.0 คือใสเป็นกระจก 1.0 คือ ทึบเป็นผนังบ้าน)
-[ เปลี่ยนสีชื่อตอนเมื่อเลื่อนเมาส์ไปโดน ]-
.col-chapter-content a.chapter-item-name:hover{
color:red;
font-size: 18px;
}
1. บรรทัดแรก คือชื่อสี หรือโค้ดสี ที่จะให้เปลี่ยนเมื่อเอาเมาส์วาง (จิ้มโค้ดสีและดูรายละเอียดได้ ที่นี่ )
2. บรรทัดที่สอง คือ ขนาดตัวอักษรเมื่อเอาเมาส์วาง
-[ ทำปุ่มภาพเด้งได้ ]-
1. ใส่ภาพที่อยากให้เป็นปุ่มเข้าไป กดบันทึกแบบร่าง 1 ที
2. คลิกขวาที่ภาพ > กดคำว่า inspect element (ตรวจสอบ) จะมีหน้าต่างแบบนี้เด้งขึ้นมา
2. คลิกขวาที่ภาพ > กดคำว่า inspect element (ตรวจสอบ) จะมีหน้าต่างแบบนี้เด้งขึ้นมา
3. คลิกขวาที่บรรทัดสีน้ำเงิน > กด Edit as HTML (แก้ไขแบบ html)
4. พลทหารคนนี้มาใหม่ เขายังไม่มีชื่อเลย มาตั้งชื่อให้เขากันหน่อย ในที่นี้ผมพิมชื่อ id ลงไปว่า PageBox เสร็จแล้วก็กดบันทึกแบบร่าง อีกหนึ่งจึ้ก
5. คราวนี้เลื่อนลงมาด้านล่าง มาออกคำสั่งทหารคนนี้กัน ว่า..
#PageBox:hover{
transform: scale(1.05);
}
เลขสีแดงคือ อัตราส่วนที่อยากให้ภาพขยายเมื่อมีเมาส์ไปโดน 1.05 คือขยายขึ้นจากเดิม 5%
เลขสีแดงคือ อัตราส่วนที่อยากให้ภาพขยายเมื่อมีเมาส์ไปโดน 1.05 คือขยายขึ้นจากเดิม 5%
6. กดปุ่มเผยแพร่ เลย ลองเอาเมาส์เลื่อนมาทับดู ปุ่มเด้งแล้วครับคุณผู้ชม !!! คุ้มค่าจริงๆ :p
-[ ใส่เพลงจาก youtube + ปรับแต่ง ]-
1. ข้างบนมีปุ่มเล็กๆ ชื่อว่า html กดเข้าไป ก็จะเปลี่ยนหน้านิยายสวยๆเป็นตัวอักษรมึนๆแบบนี้
2. ไปหาคลิป youtube ที่อยากได้ แล้วกระทืบปุ่มแชร์ หวดปลายดาบเข้าแถบ embed แล้วขโมยโค้ดมันมาซะ !!
3. เอามาแปะตรงหน้าตัวอักษรยึกยือตรงจุดที่อยากใส่ หรือ กดปุ่มใส่วิดิโอ youtube ที่ข้างบนก็ได้เหมือนกันนะครับ
4. ใส่วิดิโอเฉยๆ เดี๋ยวจะหาว่าดูธรรมดาไป เรามาปรับแต่งเพิ่มเติมกันครับ :D
<iframe
width="560" //ปรับความกว้างวิดิโอ
height="315" //ปรับความสูงวิดิโอ
src="https://www.youtube.com/embed/8ZBbjfd0NvU //ลิ้งควิดิโอ Youtube
&autoplay=1 //ใส่ 1 ถ้าอยากให้วิดิโอเล่นเองตอนเข้ามา ถ้าไม่เอาใส่ 0
&loop=1 //ใส่ 1 ถ้าอยากให้วิดิโอวนซ้ำเองเมื่อจบ ถ้าไม่เอาใส่ 0
&start=50 //ใส่เลขวินาทีที่อยากให้วิดิโอเริ่ม เช่น 50 คือ วินาทีที่ 50
&end=300 //ใส่เลขวินาทีที่อยากให้วิดิโอหยุด เช่น 300 คือ นาทีที่ 5
"
frameborder="0" //อยากมีกรอบวิดิโอใส่ 1 ไม่เอาใส่ 0
allowfullscreen> //อนุญาตให้เต็มจอรึเปล่า ไม่อนุญาตก็ลบทิ้งไม่ต้องใส่
</iframe>
5. มีอะไรปรับแต่งได้อีกเยอะมาก ลองดูเพิ่มเติมได้ ที่นี่ :D
4. เซฟโลด กดเผยแพร่ ก็มาและ ธีมสวยๆของเรา
จบกันไปแล้วนะครับ สำหรับการปรับแต่งแบบ Basic
หวังว่ากระทู้จะเป็นประโยชน์สำหรับทุกคนไม่มากก็น้อยนะครับ
ใครมีคำถามอะไรสงสัย คอมเม้นท์กับถามได้เลยนะครับ ^ ^
วันนี้ลาไปก่อน ไว้เจอกันใหม่ครับ
ไรท์เตอร์ : จอมมารสีเทา
3. เอามาแปะตรงหน้าตัวอักษรยึกยือตรงจุดที่อยากใส่ หรือ กดปุ่มใส่วิดิโอ youtube ที่ข้างบนก็ได้เหมือนกันนะครับ
4. ใส่วิดิโอเฉยๆ เดี๋ยวจะหาว่าดูธรรมดาไป เรามาปรับแต่งเพิ่มเติมกันครับ :D
<iframe
width="560" //ปรับความกว้างวิดิโอ
height="315" //ปรับความสูงวิดิโอ
src="https://www.youtube.com/embed/8ZBbjfd0NvU //ลิ้งควิดิโอ Youtube
&autoplay=1 //ใส่ 1 ถ้าอยากให้วิดิโอเล่นเองตอนเข้ามา ถ้าไม่เอาใส่ 0
&loop=1 //ใส่ 1 ถ้าอยากให้วิดิโอวนซ้ำเองเมื่อจบ ถ้าไม่เอาใส่ 0
&start=50 //ใส่เลขวินาทีที่อยากให้วิดิโอเริ่ม เช่น 50 คือ วินาทีที่ 50
&end=300 //ใส่เลขวินาทีที่อยากให้วิดิโอหยุด เช่น 300 คือ นาทีที่ 5
"
frameborder="0" //อยากมีกรอบวิดิโอใส่ 1 ไม่เอาใส่ 0
allowfullscreen> //อนุญาตให้เต็มจอรึเปล่า ไม่อนุญาตก็ลบทิ้งไม่ต้องใส่
</iframe>
5. มีอะไรปรับแต่งได้อีกเยอะมาก ลองดูเพิ่มเติมได้ ที่นี่ :D
-[ ใส่ธีมหน้านิยายที่มีคนทำไว้อยู่แล้ว ]-
สำหรับใครที่คิดว่านั่งปรับแต่งเอง มันยากเกินไป อาจจะไปหาธีมที่มีคนแจกไว้ให้ในเด็กดี วิธีก็ตามนี้เลยครับ
1. ในที่นี้ขอยกตัวอย่างร้านธีมแจกฟรีอันนึง
https://writer.dek-d.com/a/story/view.php?id=1128553
2. ผมเลือกธีม Dark space มาลองใส่ดู ลิ้งนี้ และจัดการกอปโค้ดพวกนี้ให้เรียบ ห้ามเหลือสักบรรทัด (กด ctrl+A เลือกทั้งหมด แล้วก็อปก็ได้)
3. เอามาแปะในช่องด้านล่างของ ข้อมูลเบื้องต้นนิยาย ตู้ม !!!
1. ในที่นี้ขอยกตัวอย่างร้านธีมแจกฟรีอันนึง
https://writer.dek-d.com/a/story/view.php?id=1128553
2. ผมเลือกธีม Dark space มาลองใส่ดู ลิ้งนี้ และจัดการกอปโค้ดพวกนี้ให้เรียบ ห้ามเหลือสักบรรทัด (กด ctrl+A เลือกทั้งหมด แล้วก็อปก็ได้)
3. เอามาแปะในช่องด้านล่างของ ข้อมูลเบื้องต้นนิยาย ตู้ม !!!
4. เซฟโลด กดเผยแพร่ ก็มาและ ธีมสวยๆของเรา
จบกันไปแล้วนะครับ สำหรับการปรับแต่งแบบ Basic
หวังว่ากระทู้จะเป็นประโยชน์สำหรับทุกคนไม่มากก็น้อยนะครับ
ใครมีคำถามอะไรสงสัย คอมเม้นท์กับถามได้เลยนะครับ ^ ^
วันนี้ลาไปก่อน ไว้เจอกันใหม่ครับ
ไรท์เตอร์ : จอมมารสีเทา
12 ความคิดเห็น
ขอบคุณมากค่ะ กระทู้มีประโยชน์ดีจัง เราเคยลองทำโค้ดอยู่ แต่บางตัวมันไม่ขึ้น อาจจะเป็นเพราะไปเขียนผิดอยู่ตรงไหนซักจุด 5555 ไว้เดี๋ยวจะลองทำใหม่ดู ไม่งั้นหาของคนอื่นมาใส่บ้างดีกว่า ง่ายดี 555
ขอบคุณมากค่ะ เก็บไว้ใช้เวลาจะเปิดนิยายใหม่
ขอบคุณนะคะ แต่ก่อนเคยหัดแต่งบล็อคอยู่ แต่ใช้เวลานานมาก ตอนหลังเลยไม่แต่งอะไรเลย ไม่งั้นไม่ไปไหน ฮา... แต่ถ้าพอมีเวลาจะลองดูค่ะ ^^
ผมชอบกระทู้ของคุณที่เอามาตั้งทุกครั้งจัง
กำลังสงสัยพอดี กระทู้นี้ก็มีขึ้นมา ขอบคุณมากๆค่ะ มีที่กดเก็บกระทู้มั้ยเนี่ย
กระทู้ดี +1 ให้ครับ
Thank! ปักหมุดไว้เรียบร้อย ^^)/
เข้ามาอ่านเพราะอยากแต่งหน้านิยายบ้าง แต่อ่านแล้วต้องเดินคอตกออกไปเงียบๆ
ถ้าต้องใช้เวลาเรียนรู้กันขนาดนั้น ป้าต้องไม่มีเวลาแต่งนิยายแน่ๆ
เพราะฉะนั้นใครมีแบบสำเร็จรูป จงบอกมาซะดีๆ ป้าจะได้ขอยืมไปใช้ได้เลย
แล้วเอาเวลาที่เหลือไปปั่นนิยาย ที่ตอนนี้สปีดเร็วกว่าหอยทากหน่อยเดียว T_T
แต่ยังไงก็ขอบคุณค่ะ เป็นกระทู้ดีมีประโยชน์
ขอบคุณที่เอามาแบ่งปันค่ะ กระทู้สาระมากๆๆ
แต่ขอถามนิดนึงนะคะ โค้ดสีนี่คือตัวไหนเหรอคะ อย่างสีแดงนี่ เข้าไปดูแล้ว เป็นแบบนี้
Red
#ff0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)
เราต้องใช้ code ไหนเหรอคะ
ใช้แบบไหนก็ได้เลยครับ เขียนต่อท้าย color : ส่วนใหญ่นิยมอยู่ 2 แบบคือ # กับ rgb
ขอบคุณค่ะ
กระทู้นี้ขอเก็บเข้าคลังเลยค่ะ มีประโยชน์มาก! ขอบคุณที่นำวิธีดีๆมาแบ่งปันนะคะ ><
มีประโยชน์มากๆค่ะ
ขอบคุณมากๆ นะคะ เป็นประโยชน์มากๆ เลย
รายชื่อผู้ถูกใจความเห็นนี้ คน
แจ้งลบความคิดเห็น
คุณต้องการจะลบความคิดเห็นนี้หรือไม่ ?