ปรับแต่ง css html เปลี่ยนธีม responsive ทดสอบหน้าเขียน หน้าโค๊ด บน wordpress 2020 (กำลังเขียน)

การแก้ไข CSS ของ ธีม 2015 twentyfifteen หรือธีมที่แสดงผล แบบresponsive ในเวิร์ดเพลส

ในหัวข้อนี้ผมจะอธิบายเชิงสำหรับผู้ที่พอมีความรู้พื้นฐาน css และภาษาhtml อยู่แล้วนะครับ ซึ่งhtml element , html attribute , css stlyle ตัวไหนไม่รู้ ให้ถามกูเกิ้ล พิมพ์หาเอาเลยนะครับ และแนะนำเมื่อค้นหาอะไรก็ตามให้ใช้ที่ w3schools.com จะมีตัวอย่างการทดลองให้เสร็จ เป็นแหล่งการเรียนรู้ที่ดีครบเครื่อง สามารถไล่ย้อนขึ้นไปหาtag หรือ อีลีเม้นต่างๆได้หมด

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

css โดยทั่วไป จะแบ่งลักษณะการแสดงผล อย่างน้อย สำหรับ3 อุปกรณ์ เช่น desktop tablet และมือถือ การปรับเปลี่ยนstyle เช่นของ หัวเรื่องหลัก blockqoute link ช่องว่างการแสดงผลต่างๆ สีและรูปแบบ ทั้งหมดจะต้องแก้ไขหรือปรับเปลี่ยนเอาเองให้เหมาะกับทั้ง 3 อุปกรณ์ โดยแต่ละไฟล์ style.cssของแต่ละธีม จะมีรูปแบบทั้ง3ส่วน อาจแบ่งได้มาก5-7ส่วนตามขนาดจอ ซึ่งชื่อelementทั้ง3จอจะเหมือนกันทุกประการแต่อยู่คนส่วนในไฟล์นั้น แต่จะมีมีการเลือกโหลดเอาไปใช้แค่1ชื่อ ขึ้นอยู่กับอุปกรณ์ที่โหลดข้อมูลจะใช้เอาผ่านการแนะนำการแสดงผลของธีมซึ่งมีจาวาสคริ๊ปเป็นพื้นฐานในการเลือก เช่น หัวเรื่องหลัก ต้องการตีกรอบไข่ปลาเพื่อเน้นหัวข้อดังรูป แต่เดิมจะไม่มีขอบไข่ปลา

ก่อนอื่นให้ใช้ browser สักตัวนึง แนะนำ firefox หรือ chrome ให้เอาเม้าส์ชี้ไปตำแหน่งที่ต้องการ แล้วกดคลิ๊กขวา เลือก ตรวจสอบองค์ประกอบ มันจะขึ้นตารางเหมือนข้างล่างนี้ขึ้นมา ลองใส่ตัวเลขที่ต้องการแก้ไขดูการแสดงผล แล้วจึงให้ไปแก้เอาตามตำแหน่งที่ต้องการในไฟล์ style.css ซึ่งสามารถเปิดได้โดยตรงใน wp admin ในส่วนของไฟล์ตกแต่งธีม โดยจะเพิ่มและลบอะไรก็ได้ตามต้องการ แนะนำให้ใส่เป็น /* ….*/ เพื่อเตือนความจำ ซึ่งเป็นคอมเม้นที่ใส่ได้เลย browser จะไม่ใส่ใจในข้อความดังกล่าว ถ้าเราเอา /* */ ไปคร่อมข้อความใด ข้อความนั้นเครื่องมือถือหรือคอมมันจะไม่สนใจ ไม่ต้องลบจะดีกว่า กลับมาแก้ไขได้ง่ายอีกด้วย

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

twentyfifteen/style.css line 4560


.entry-header {
padding: 0 10%;
margin: 0% 2% 1% 2%; /* pui108diy */
border-radius:10px; /* pui108diy */
border:5px dotted #F19F55; /* pui108diy */
}

ในธีมนี้ นอกจากการเรียกข้อมูลใน style.css ที่มีตัวอักษรความกว้างและความสูงให้เหมาะสมกับอุปกรณ์ทั้ง3ชนิด คือ mobile tablet และ desktop แล้ว ปัญหาต่อไปคือลูกเล่นตัวอักษรของคอมตั้งโต๊ะ ซึ่งสามารถปรับขนาดด้วยการขยายbrowser ได้ ทำให้ต้องมาเซ็ทธีมในขนาดขยายต่างๆให้เข้าทีอีกที ซึ่งจะกล่าวถึงอีกที

เรามาว่ากันใน ส่วน มือถือ และ แท็บเบล็ทก่อน ซึ่งจะไม่ค่อยมีปัญหาในการขยายตัวอักษร เพราะเบาเซรอ์จะบังคับขนาดฟ้อนท์ตายตัว การแก้ไขผมแนะนำให้ตัวอักษรควรต้องให้มีขนาดใหญ่กว่าปรกติเล็กน้อย สำหรับผู้อ่านจะอ่านง่ายเอาไว้ก่อน โดยหลักขนาดฟ้อนท์ และระยะระหว่างบรรทัด ที่ต้องการแสดงผล ครั้งแรก(default)ในเบาเซอร์ที่ไม่ได้ถูกปรับแต่งขนาดมา จะถูกเซทหรืออ่านครั้งแรกใน body ส่วน 3.0 Typography ของ style.css และอยู่บริเวณในบรรทัดต้นๆของส่วนนี้ การเปลี่ยนขนาดฟอนท์ในตัวสีเขียวๆ จะทำให้ขนาดตัวอักษรในมือถือในแนวตั้ง มีขนาดใหญ่ขึ้นหรือเล็กลงได้

/**
* 3.0 Typography
*/
body,
button,
input,
select,
textarea {/*เป็นขนาดฟอนท์หลักใน body */
color: #333;
font-family: "Noto Serif", serif;
font-size: 18px; /*15px*/
font-size: 1.8rem; /*1.5rem*/
line-height: 1.6; /*1.6*/
}

จากการทดสอบใช้มือถือ samsung note4 ในปัจจุบันผมขยายขนาดตัวอักษรในtypography เป็น 18px หรือ 1.8rem การสืบทอดหรืออ้างอิงขนาดฟ้อนท์ของมือถือเบื้องต้น จะดูดข้อมูลcssในส่วน3.0 typography ซึ่งแต่ละมือถืออาจจะถูกส่งหรือข้ามในส่วนนี้โดดต่อไปในส่วนrendering ขนาดจอมือถือ 16.1 Mobile Large 620px ประมาณบรรทัดที่28xx ซึ่งภายใน @media screen and (min-width: 38.75em) หมายถึงความกว้างของคอนเทนเนอร์ที่ระบุว่ามีขนาดเท่ากับ38ตัวอักษร แต่ในส่วนนี้ไม่มีการระบุขนาดเพิ่มเติมของส่วน body จึงยกยอดมาทั้งหมดว่าต้องมีขนาดอย่างน้อย18px หรือ1.8remเป็นต้น เป็นอย่างน้อยในทุกขนาดจอ ซึ่งปัจจุบันคนส่วนใหญ่มักใช้มือถือจอใหญ่ๆกันทั้งนั้น จากการทดสอบหน้าแนวตั้ง ไม่มีการเรียก rendering ที่ min-width 38.75em แต่พอดูในแนวนอน มีการเรียกในส่วน38.75em ขึ้นมาแสดงผล ซึ่งแสดงว่าขึ้นกับโทรศัพท์ ว่าผู้ใช้งานมีการเซ็ทขนาดฟ้อนท์เท่าใดด้วย และไปเซ็ทต่อในขนาดอักษรใน browser อีกต่อ ทำให้การเรียกแสดงผลต่างๆกันไปในแต่ละอุปกรณ์แม้มือถือเป็นรุ่นเดียวกัน

ในการแก้ไขขนาดฟ้อนท์ต่างๆใน blockquote , captionของ รูป หรือส่วนอื่นๆทั้งหมด แนะนำให้อิงจากขนาดตัวอักษรตัวแรกที่cssกำหนดไว้ ซึ่งอาจเท่ากับฟอนต์ใหญ่ขนาด100% หรือ10px หรือ 12px เป็นต้น แล้วเราค่อยๆปรับเพิ่มขึ้น โดยใช้หน่วย rem เช่นให้มีขนาดใหญ่ขึ้น เป็น1.2rem เป็นต้น ในรูปด้านบน ในส่วนของการอธิบายรูปตัวอักษรสีม่วงๆผมใช้ฟอนท์ฟิกขนาดที่ 16px ซึ่งในบางจังหวะการแสดงผลด้วยมือถือซึ่งปรับตามขนาดอักษรที่ผู้ใช้งานมือถือได้ตั้งค่าไว้ เช่นที่22px อาจสบายตาสำหรับผู้ใช้งาน คำอธิบายที่มีขนาด16px อาจเล็กเกินไป จึงควรใช้1.6rem แทนเป็นต้น ซึ่งการขยายตัวอักษรด้วยrem แม้ตั้งแค่1.6remแต่การแสดงผลของเครื่องของคุณอาจทำให้มีขนาดใหญ่ขึ้นไปถึง22pxได้เอง เนื่องจากการเรนเดอร์ขนาดตัวอักษร ทางคอมหรือมือถือผู้ใช้งานจะทำการคำนวนค่าที่เหมาะสมว่าขณะนั้นผู้ใช้งานได้เซ็ทค่าขนาดอักษรไว้ใหญ่ขึ้นกว่าเดิมหรือเล็กลงกว่าเดิมเป็นขนาดใด เป็นกี่เท่าของเดิม และบรรจุบรรทัดนึงมีได้กี่em หรือกี่ตัวอักษร แล้วทำการอ่านไปบรรทัดที่ css ได้ให้ค่าไว้

เช่นการแยกแยะขนาดบรรจุตัวอักษรในcss ด้วยการใช้คำสั่ง ที่บรรทัด2872 @media screen and (min-width: 38.75em) {} เพื่อกำหนดขนาดเบื้องต้นเมื่อจอมีขนาดบรรจุ1บรรทัดหรือ1กว้างคอนเทนเนอร์ได้38ตัวอักษร เป็นต้น คำสั่งเหล่านี้อยู่อยู่ใน style.css มีขนาด7มากถึง7ขนาด เพื่อให้มีความยืดหยุ่นสุดๆ

line , min-width: , container width
2872 , 38.75em , 620px ___* 16.1 – Mobile Large
3069 , 46.25em , 740px ___ * 16.2 – Tablet Small
3714 , 55em , 880px ___* 16.3 – Tablet Large
4273 , 59.6875em , 955px ___* 16.4 – Desktop Small
4994 , 68.75em , 1100px ___* 16.5 – Desktop Medium
5539 , 77.5em , 1240px ___* 16.6 – Desktop Large
6086 , 87.6875em , 1403px ___* 16.7 – Desktop X-Large

ในส่วนของ desktop เมื่อเรา กด ctrl+โรเลอร์ที่เมาส์ จะทำการขยายหน้าจอของ browser ให้ใหญ่ขึ้นและเล็กลง บางธีมหรือบางเว็บตัดปัญหาการขยายและหดตัวของหน้าจอ ด้วยการทำขนาดเดียวจะย่อหรือขยาย ตัวหนังสือก็เท่าเดิมคือคนตาไม่ดีจะขยายให้ใหญ่ขึ้นก็ทำไม่ได้ แต่ในธีมtwentyfifteenนี้การย่อขยายจะปรับตัวหนังสือให้ใหญ่ขึ้นและเล็กลงได้อีกด้วย ซึ่งจะเช็ทติ้งเพิ่มอีกเยอะเลย ในส่วนของคนออกแบบธีม จะทำการแบ่งหน้าจอออกเป็น7ขนาด และบอกเป็นความกว้างของจำนวนตัวอักษรหรือหน่วยemในคอมเทนเนอร์นั้น

การแก้ไขขนาดฟ้อนท์ และระยะห่างบรรทัดของตัวอักษร ต้องทดลองเปลี่ยนcss ชื่อเดียวกันถึง7ตำแหน่ง ใช้เวลานานหลายวันมากกว่าจะทำความเข้าใจและแก้ไขให้ได้ดังใจ

สิ่งที่ต้องแก้ไขของผม ของคนอื่นต้องลิสเอาเองนะครับ

• กรอบหัวข้อที่มีไข่ปลา ,
• ขนาดและระยะบรรทัดของ P>body แก้ในbody 7จอ   ,
• ตัวอักษร7จอในblockqoute รูปแบบกรอบสีพื้น และเพิ่ม รูปแบบid  ,
• ลิงค์ สี รูปแบบ hover ,
• ภาพเฉพาะในส่วนคำอธิบายภาพ แก้สีและขนาดฟ้อนท์ ใน block.css ,
• ขนาดตัวอักษรในwidgetด้านซ้ายมือ ,

---

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

แก้ไขcss blockqoute เดิม

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

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

กกดดกก

กกกดดด

ความกว้างของคอนเทนเนอร์หลักของคอนเทนท์ div class entry-content ที่desktop ขนาด 100% =655 px ซึ่งจริงๆสามารถปรับแก้ให้แคบกว้างได้ตามต้องการใน css ต้องลองไปทำดูนะครับ ผมขอข้ามไปก่อน

การแก้ css ของ <figure> และ <figcaption> ตัวรูปที่เราใส่ใน figure ไม่มีอะไรต้องแก้ไข แต่ fig caption ยังไม่โดน แต่เราไม่สามารถแก้ไขโดยตรงใน style.css ต้องไปแก้ไขใน blocks.css ซึ่งทุกครั้งจะมีการกำหนด <figure class=”wp-block-image size-large”> ทำให้ figcaption ต้องเป็นไปตามคอนเทนเนอร์หรือparent figure คลาส “wp-block-”

กำลังเขียน 10/6/2020

 26,741 total views,  1 views today

Comments

comments