Dek-D.com ใช้คุกกี้เพื่อพัฒนาประสบการณ์ของ
ผู้ใช้ให้ดียิ่งขึ้น เรียนรู้เพิ่มเติมที่นี่
ยอมรับ

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;
        ! important;
}
</style> //ไม่ต้องปิดทุกคำสั่ง แค่ปิดท้ายบรรทัดล่างสุดก็พอ

3. ไปก็อป link ภาพจากที่ไหนก็ได้ (google/เว็บฝากไฟล์/อัลบั้มเด็กดี) มาใส่ในบรรทัดแรก แต่แนะนำว่าควรเป็นภาพขนาด 1920x1080 หรือ ใหญ่กว่า
4. บรรทัดสอง คือการล็อกตำแหน่งภาพให้เป็นวิญญาณตามติด ตอนเราเลื่อนลง
5. บรรทัดสาม คือการบอกว่า คำสั่งนี้เป็นเควสสำคัญจากแม่ทพระดับสูงสุด ถ้ามีคำสั่งไหนหลังจากนี้เข้ามาอีก ห้ามทำ

 
-[ ปรับให้สีพื้นโปร่งใส ]-


.clear .content{
  ">255,255,2550.65); //ตัวคำสั่งหลัก
}

#story-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 (ตรวจสอบ) จะมีหน้าต่างแบบนี้เด้งขึ้นมา

3. คลิกขวาที่บรรทัดสีน้ำเงิน > กด Edit as HTML (แก้ไขแบบ html)
4. พลทหารคนนี้มาใหม่ เขายังไม่มีชื่อเลย มาตั้งชื่อให้เขากันหน่อย ในที่นี้ผมพิมชื่อ id ลงไปว่า PageBox เสร็จแล้วก็กดบันทึกแบบร่าง อีกหนึ่งจึ้ก


 
5. คราวนี้เลื่อนลงมาด้านล่าง มาออกคำสั่งทหารคนนี้กัน ว่า..
#PageBox:hover{
      transform: scale(1.05); 
}

เลขสีแดงคือ อัตราส่วนที่อยากให้ภาพขยายเมื่อมีเมาส์ไปโดน 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

 
-[ ใส่ธีมหน้านิยายที่มีคนทำไว้อยู่แล้ว ]-

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

https://writer.dek-d.com/a/story/view.php?id=1128553

2. ผมเลือกธีม Dark space มาลองใส่ดู ลิ้งนี้ และจัดการกอปโค้ดพวกนี้ให้เรียบ ห้ามเหลือสักบรรทัด (กด ctrl+A เลือกทั้งหมด แล้วก็อปก็ได้)


3. เอามาแปะในช่องด้านล่างของ ข้อมูลเบื้องต้นนิยาย ตู้ม !!!

4. เซฟโลด กดเผยแพร่ ก็มาและ ธีมสวยๆของเรา




จบกันไปแล้วนะครับ สำหรับการปรับแต่งแบบ Basic

หวังว่ากระทู้จะเป็นประโยชน์สำหรับทุกคนไม่มากก็น้อยนะครับ
ใครมีคำถามอะไรสงสัย คอมเม้นท์กับถามได้เลยนะครับ ^ ^
วันนี้ลาไปก่อน ไว้เจอกันใหม่ครับ


ไรท์เตอร์ : จอมมารสีเทา

 

แสดงความคิดเห็น

>

12 ความคิดเห็น

เด็กหญิงจากโลกอดีต 23 มิ.ย. 60 เวลา 14:47 น. 1

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

0
Whiteflower Ri 23 มิ.ย. 60 เวลา 16:43 น. 3

ขอบคุณนะคะ แต่ก่อนเคยหัดแต่งบล็อคอยู่ แต่ใช้เวลานานมาก ตอนหลังเลยไม่แต่งอะไรเลย ไม่งั้นไม่ไปไหน ฮา... แต่ถ้าพอมีเวลาจะลองดูค่ะ ^^

0
jesjournal90 23 มิ.ย. 60 เวลา 20:09 น. 5

กำลังสงสัยพอดี กระทู้นี้ก็มีขึ้นมา ขอบคุณมากๆค่ะ มีที่กดเก็บกระทู้มั้ยเนี่ย

0
stima 24 มิ.ย. 60 เวลา 20:38 น. 8

เข้ามาอ่านเพราะอยากแต่งหน้านิยายบ้าง แต่อ่านแล้วต้องเดินคอตกออกไปเงียบๆ

ถ้าต้องใช้เวลาเรียนรู้กันขนาดนั้น ป้าต้องไม่มีเวลาแต่งนิยายแน่ๆ

เพราะฉะนั้นใครมีแบบสำเร็จรูป จงบอกมาซะดีๆ ป้าจะได้ขอยืมไปใช้ได้เลย

แล้วเอาเวลาที่เหลือไปปั่นนิยาย ที่ตอนนี้สปีดเร็วกว่าหอยทากหน่อยเดียว T_T


แต่ยังไงก็ขอบคุณค่ะ เป็นกระทู้ดีมีประโยชน์

0
Megan Ignacia 29 มิ.ย. 60 เวลา 15:38 น. 9

ขอบคุณที่เอามาแบ่งปันค่ะ กระทู้สาระมากๆๆ


แต่ขอถามนิดนึงนะคะ โค้ดสีนี่คือตัวไหนเหรอคะ อย่างสีแดงนี่ เข้าไปดูแล้ว เป็นแบบนี้


Red

#ff0000

rgb(255, 0, 0)

hsl(0, 100%, 50%)


เราต้องใช้ code ไหนเหรอคะ

2
SailorVfan 2 ก.ค. 60 เวลา 16:52 น. 10

กระทู้นี้ขอเก็บเข้าคลังเลยค่ะ มีประโยชน์มาก! ขอบคุณที่นำวิธีดีๆมาแบ่งปันนะคะ ><

0