ปรับแต่ง 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ชื่อ ขึ้นอยู่กับอุปกรณ์ที่โหลดข้อมูลจะใช้เอาผ่านการแนะนำการแสดงผลของธีมซึ่งมีจาวาสคริ๊ปเป็นพื้นฐานในการเลือก เช่น หัวเรื่องหลัก ต้องการตีกรอบไข่ปลาเพื่อเน้นหัวข้อดังรูป แต่เดิมจะไม่มีขอบไข่ปลา

การปรับ header style ให้เหมาะกับความต้องการ สามารถแก้ไขได้ ในไฟล์ style.css class entry-header บรรทัดที่ 4560 เป็นส่วนของ desktop โดยเพิ่มสไตล์ที่ต้องการเข้าไป3บรรทัด ก็จะมีจุดไข่ปลาเป็นกรอบขึ้นมา การอ่านไฟล์จะอ่านทุกบรรทัดจากบนลงล่างถ้าไม่มีเงื่อนไขให้อ่านข้าม อีลีเมนท์ใดที่ทำการตกแต่งแล้วก็จะแสดงผลต่อเนื่องไป แม้ @screen and (min-width:59.68em) คือจอสามารถแสดงผลคำนวนที่59ตัวอักษร ให้ตกแต่งอีลีเม้นนั้น<header> ที่มีระดับชั้น class entry-header เท่านั้น แม้จอจะใหญ่กว่าเป็น78 ก็ยังตกแต่งตามที่อ่านไปแล้วก่อนหน้าอยู่ดี ยกเว้นเป็นมือถือที่มีความกว้าง48em การตกแต่งmarginจะไม่สวนก็ไปแก้เพิ่มในส่วน ของจอ48emเป็นต้น

ก่อนอื่นให้ใช้ 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 อีกต่อ ทำให้การเรียกแสดงผลต่างๆกันไปในแต่ละอุปกรณ์แม้มือถือเป็นรุ่นเดียวกัน

การแสดงผลตัวอักษรใน note4 เมื่อปรับอักษรให้ใหญ่ขึ้นใน style.css ส่วนเริ่มต้น body Typography บรรทัดที่2xx เป็น 18px , 1.8rem (ใหญ่ขึ้น1.8เท่าจากตัวอักษรตัวแรกที่เซ็ทเอาไว้) อาจส่งไป rendering ต่อ บรรทัด28xx 16.1 Mobile Large 620px @media screen and (min-width: 38.75em) มีจำนวนตัวอักษรไม่เกิน 38 ตัว

ในการแก้ไขขนาดฟ้อนท์ต่างๆใน 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

 2,257 total views,  23 views today

Comments

comments

เผยแพร่โดย

pui

เรียน อนุบาลวัฒนา อัสสัมชัญ พระจอมเกล้าลาดกระบัง ทำงาน ซ่อมบำรุงเครื่องจักร ออกแบบโรงงาน ทีปรึกษาซ่อมเครื่องจักร อดิเรก ทำเว็บ ทำงานประดิษฐ์ ปลูกต้นไม้ เขียนบล็อก ทำสมาธิวิปัสสนา อนาคต ขายของ บวช เข้าถึงธรรมะ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *