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

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

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

การปรับ header style ให้เหมาะกับความต้องการ สามารถแก้ไขได้ ในไฟล์ style.css class entry-header บรรทัดที่ 4560 เป็นส่วนของ desktop โดยเพิ่มสไตล์ที่ต้องการเข้าไป3บรรทัด ก็จะมีจุดไข่ปลาเป็นกรอบขึ้นมา

ก่อนอื่นให้ใช้ browser สักตัวนึง แนะนำ firefox เอาเม้าส์ชี้ไปตำแหน่งที่ต้องการ แล้วกดคลิ๊กขวา เลือก ตรวจสอบองค์ประกอบ มันจะขึ้นตารางนี้ขึ้นมา และให้ไปแก้เอาตามตำแหน่งที่ต้องการในไฟล์ style.css ซึ่งสามารถเปิดได้โดยตรงใน wp ในส่วนของไฟล์ตกแต่งธีม โดยจะเพิ่มและลบอะไรก็ได้ตามต้องการ แนะนำให้ใส่เป็น /* ….*/ เพื่อเตือนความจำ ซึ่งเป็นคอมเม้นที่ใส่ได้เลย 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: 16px; /*15px*/
font-size: 1.6rem; /*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ในคอมเทนเนอร์นั้น


ขอข้ามไปแก้ไข ในส่วน 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

 233 total views,  5 views today

Comments

comments

เผยแพร่โดย

pui

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

ใส่ความเห็น

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