ปรับแต่งCSS&HTML ให้รองรับ responsive บนเว็บทั่วไปและLnwshop แก้ไข2017-2018

ปรับแต่งCSS&HTML ให้รองรับ responsive บนเว็บทั่วไปและLnwshop แก้ไข2017-2018

Pui108diy
Idea store & DIY. with U

Email สะดวกที่สุด:
. . pui108108@yahoo.com
line ID (2ทุ่ม-4ทุ่ม):
. . pui108diy
โทร: .....

blog word press :
. . . pui108diy.com/wp/
รูป Flickr :
. . . ./photos/pui108diy/
รูป Wiki commons :
. . ./wiki/User:Pui108108
Pinterest :
. . . ./pui108108/
Youtube :
. . . ./user/p108108

(2016) 2 หัวข้อหลัก ความกว้าง 665 px

i--- ความกว้างระหว่างขอบ 665 px , margin ซ้าย20ขวา 15 px

--------------------------i

i---- พื้นที่พิมพ์ เหลือ 635 px, padding ซ้ายขวา 15px

------------------------i

code>>

<div style="border-radius: 10px; border: 4px dotted #F19F55; padding: 5px 15px 5px 15px; margin: 20px 15px 15px 20px;"><p><span style="font-size: 300%; color: #375362; line-height: 1.5em;font-family: Tahoma;">ปรับ...แต่ง</span></p></div>

<<code

 

3. กำหนดช่องไฟซ้ายขวาด้วย DIV คร่อมทั้งบทความ

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

i--- ความกว้างระหว่างขอบ 700 px , margin ซ้าย0ขวา 0 px

--------------------------i

i---- พื้นที่พิมพ์ เหลือ 680 px, padding ซ้าย-ขวา 10px (1.4%ของ700px)

------------------------i

ในที่นี้ tag div กำหนดช่องไฟให้เหมาะสม padding: 20px 1.4% 20px 1.4%px;  โดยนำไปคร่อมทั้งบทความของผมเลย (หมายถึงจะพิมพ์อะไรก็พิมพ์อยู่ภายใน tag DIV แทนดังนี้)

code>>

<div style="padding: 20px 1.4% 20px 1.4%;"> .....</div> 

 <<code

จากนั้น(2016)การพิมพ์ตัวอักษรทุกครั้งพยายามพิมพ์ให้อยู่ใน tag P เป็นไฟท์บังคับเพราะ text editor ของเทฟช็อบจะสามารถถ่ายทอด โดยเพิ่มtagP และtag Span หรืออื่นๆให้เอง  เมื่อกด enter ค่า styleต่างๆของทุกtag(ทั่วไป)จะถูกถ่ายทอดลงtag P  อันต่อไปทันที  ขนาดตัวอักษรใน tag span ที่อยู่ใน P(พารากราฟ) เราก็ระบุ font-size: 135% ในทีมที่ผมใช้อยู่

ปัจจุบันปี(2017) การกดenter ขณะพิมพ์ ไม่สามารถถ่ายทอดtag p และ tag span ได้อีกต่อไป มันจะเพิ่มคำว่า <br/> ให้แทนโดยที่ข้อความทั้งหมดไม่ว่าจะยาวแค่ไหนจะอยู่ในtag p และ tag span เท่านั้น   
  ถ้าเปิดบทความใหม่หรือสินค้าใหม่แล้วเราพิมพ์อะไรก็ตามมันจะไม่อยู่ในtag อะไรทั้งสิ้น จะเป็นข้อความต่อเนื่องกันไปเรื่อยๆจนกว่าเราจะเลิกพิมพ์ ฉะนั้นแล้วปุ่มจัดหน้าโดยใช้ tagP จะไม่มีวันได้ใช้อีกถ้าเราไม่ใช้htmlช่วยสร้างtag p ขึ้นก่อน ซึ่งมันมีทั้งข้อดีและข้อเสีย
<ใช้ยากแล้วครับทั้งบทความมีแค่1tag p 

(2018) ทุกอย่างเหมือนปี2017 การใช้ปุ่มเพิ่มหรือลดย่อหน้าครั้งละ30px มีผลทำให้บนมือถือมีช่องว่างใหญ่เกินไปจึงไม่ควรใช้ย่อหน้าถ้าไม่จำเป็น แต่ถ้าต้องการใช้ให้ระบุ padding-left:4.2% (30px)หรือ 2.8%แค่20pxก็พอแล้ว   

       
     theme สะอาด ในเทพช็อบหน้า บทความหรือ หน้าอธิบายสินค้าตอนเริ่มพิมพ์  ขนาดฟอนท์px?อะไรก็ตาม: มีความสูง18pxเท่ากันหมด (line-height=18px) ซึ่งรกมากครับอ่านยาก ถ้าfontใหญ่กว่า 13 px สรุปต้องแก้ที่ CSS อย่างเดียวแก้ด้วยtext editor ด้วยวิธีธรรมดาไม่ได้ครับ 

หรือขนาดฟ้อนท์ font-size เราสามารถกำหนดเป็นขนาดความสูงโดยตรง เรียกว่า px (ย่อมาจากพิกเซล) หรือกำหนดเป็น เปอร์เซนต์ เช่น 150% หรือ1.5em หมายถึงขนาดฟ้อนท์ที่กำหนดไว้เดิม(ในทีมสะอาด gadget-1ระบุไว้ 12px)ให้ใหญ่ขึ้นเป็น1.5เท่า ซึ่งผมว่าในอนาคตทางเทพช็อบปรับแก้เป็นระบบเว็บบล็อกสมัยใหม่ ทางผมคิดว่ามันจะแก้ไขง่ายกว่าการกำหนดแบบpx ตายตัว แม้มันใหญ่ขึ้น ก็ใหญ่ขึ้นหมดทั้งหน้าพร้อมๆกันครับ หรือเล็กลงก็เล็กลงทั้งหน้าโดยมีอัตราส่วนเท่าเดิม(ซึ่งวิธีแก้-ขนาดตามที่เราพอใจนั้นเราไปปรับอัตราส่วนใน tag div แทน แก้ทีเดียวแก้ทั้งหน้า ง่ายกว่าครับ)

ซึ่งเว็บบล็อกสมัยใหม่(ตั้งแต่ปี58)จะทำการอ่านค่าว่าผู้เข้าชมใช้คอม หรือ มือถือที่มีขนาดจอเท่าไหร่เข้าดูเว็บ จากนั้นเซิฟเวอร์จะคำนวนค่าแล้วให้ค่าความสูงที่เหมาะสมกับการอ่าน เช่นถ้าใช้คอมก็ให้ขนาด13-14px ถ้าใช้มือถือ ก็อาจให้ขนาด18-22px  ปัจจุบันการให้ค่า pxคงที่โดยตรงจึงอาจทำให้อ่านได้ดีบนคอม พอไปอ่านบนtablet หรือมือถือ ตัวอักษรก็เล็กเกินไป จึงควรกำหนดเป็นเปอร์เซนต์จะดีที่สุด 

และระยะห่างระหว่างบรรทัดก็เช่นกัน การกำหนดเอาไว้ตายตัวด้วยความสูง18pxอาจไม่ใช่ช่องไฟระหว่างบรรทัดที่ดีนัก เราควรใช้เป็น line-height:1.5em  คือ1.5เท่าของความสูงของตัวอักษร  มันมีอัตราส่วนที่ฝรั่งคำนวนออกมาว่าพอดี ดูที่เว็บนี้นะครับไปอ่านเอาเองเป็นภาษาอังกิด  แล้วมีภาพคำนวนออกมาโดยใช้คณิตศาสตร์อัตราส่วนทองคำนำมาพล็อตกราฟระหว่าง ช่องว่างความกว้างซ้ายขวา เส้นขนาดตัวอักษร และ ขนาดความสูงที่เป็นอัตราส่วนทองคำ(คืออัตราส่วนที่เกิดขึ้นในธรรมชาติที่ทำให้มองดูสวยงาม-แปลง่ายๆนะ)

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

ค่าความสูง line height ที่เป็นอัตราส่วนทองคำ

ความกว้างจอ   ขนาด-px/สูง-เท่า   ขนาด/สูง     ขนาด/สูง

  600 px        18px/1.54 em

  600 px        16px/1.58       14px/1.68        12px/1.84

  500 px        16px/1.54       14px/1.62        12px/1.74

  400 px        16px/1.5         14px/1.57        12px/1.65

 

นี่คือตัวอักษร100% 12px เดิมและระยะห่างระหว่างบรรทัด line-height:18px ซึ่งเป็นค่าเริ่มต้นของ theme สะอาดไม่รก ของเทพช็อป (ซึ่งระยะห่างระหว่างบรรทัดมันอาจจะติดๆกันเกินไปสักหน่อยแต่ก็ยังถือว่าไม่รกตา line-height เมื่อคำนวนจาก 18/12=1.5 em)

นี่คือตัวอักษร100% ,13px และระยะห่างระหว่างบรรทัด line-height:1.8 em คือ1.8 เท่าของขนาดตัวอักษร13px ซึ่งเมื่อคำนวนออกมาจะมีระยะห่างระหว่าบบรรทัดถึง 23.4px (ซึ่งใกล้เคียงกับอัตรส่วนทองคำ)

นี่คือตัวอักษร medium ,16px และระยะห่างระหว่างบรรทัด line-height:18px; เป็นค่าฟิกเริ่มต้นของทีมสะอาดในเทพช็อบจะเห็นว่ามันเปลี่ยนไม่ได้ ต้องแก้ไขที่ CSS inline อย่างเดียว แล้วใช้คุณลักษณะการพิมพ์ของtag P ถ่ายทอดมาบรรทัดต่อไปจึงจะปรับระยะบรรทัดได้ (รกเนอะ เล่นเอาเหนื่อยเลย)

นี่คือตัวอักษร medium ,16px ,135% และระยะห่างระหว่างบรรทัด line-height:1.5em คือ1.5เท่าของขนาดตัวอักษร16px (จะเห็นว่ามันปลอดโปร่งดีพอควรครับ แม้ไม่ใกล้เคียงอัตราส่วนทองคำคือ1.58em)

code>>

<p style="padding-left: 4.2%;"><span style="font-size: 135%; line-height: 1.5em;">.....ขนาด135%..สูง1.5เท่า......</span></p>

<<code

 

***ข้อควรระวังในการใช้บอกขาดเป็นเปอร์เซนต์หรือเป็นเท่า คือไม่ควรมีคอนเทนเนอร์ใดๆกำหนดขนาดเป็นเปอร์เซนต์หรือเป็นเท่าก่อนหน้า ยกเว้นเป็น tag span เท่านั้น ไม่อย่างนั้นขนาดที่เราต้องการในใจจริงๆจะเพี้ยน เช่น เราดันไปกำหนดขนาดฟอนท์ในP tag นอก เป็น1.5 เท่าของ12px(gadget-1) แล้วเราก็กำหนดใน tag span ใน เป็น1.5เท่าอีกเหมือนกัน ความใหญ่ของฟอนท์จะกลายเป็น

font-size = 12px *1.5 *1.5 = 27 px

นี่คือข้อควรระวัง***

***ฉะนั้นแล้วแต่ละtheme ของแต่ละเว็บไซด์มีค่าเริ่มต้นไม่เท่ากัน เช่นทีม สะอาด font-size มาตรฐานที่กำหนดเป็นเบสมาจาก gadget-1 คือ 12 px ซึ่ง เท่ากับfont size 100% หรือ 1em เฉพาะของทีมนี้เท่านั้น***  ส่วนความสูงในทีมนี้เขากำหนดเป็น18px เป็นเบสเหมือนกัน ซึ่งเหมาะสมกับตัวอักษร 12px แต่ตัวอักษรอื่นไม่เหมาะอย่างแรงครับ***

ของผมเท่าที่ใช้อยู่ทีมสะอาดgadget-1โดยประมาณ

   font-size px        percent              line-height

P ปกติ    = 12px  , 100%                   1.7 em

small     = 13px  ,  110%=13.2px      1.7

            = 14px   , 118%=14.16px     1.5

            = 15px ,   125%                 1.5

medium = 16px  ,  135%=16.2px      1.5

large     = 18px   , 150%=17.93    1.5

            = 20px   , 165%                  1.5

            = 22px   , 185%                  1.5

x-large  = 24px  ,   200%                  1.5

            = 26px  ,   215%                  1.5

            = 28px  ,   235%                  1.5

            = 30px ,    250%                  1.5

xx-large =32px  ,    265%                 1.5

            =36px  ,    300%

            =48px ,     400%

เมื่อกดenter ระหว่างที่จะพิมพ์พารากราฟใหม่ tag P และ tag Span จะถูกถ่ายทอด ค่าstyle ลงมาพารากราฟถัดไปโดยไม่มีการงองแง แต่ถ้าต้องการตัวหนังสือให้เล็กลง ให้กำหนดเป็น small และถ้าต้องการตัวอักษรชิดบนกระชับขึ้นก็ปรับ เป็น1.2em ของฟ้อนท์ 13px(110%) ได้ผลตามนี้แหละครับ

code>>

<p style="padding-left: 4.2%;"><span style="font-size: 110%; line-height: 1.2em;color: #0000ff;"> .....ขนาด110%..สูง1.2เท่า......</span></p>

<<code

(2016 ถูกแก้ไขแล้วดู2017)ปัญหาของการพิมพ์อะไรก็ตามใน DIV เช่นถ้าเราไม่ใช้แท็กอะไรเลย หรือใช้แต่ tag span โดยไม่ใช้แท็กP เมื่อกด enter แล้ว text editor จะแยก tag DIV เป็นสองแท็กโดยมี styleของ DIV หรือ Span (หรือไม่ได้ใช้แท็กอะไรเลย) ก็จะถูกถ่ายทอด styleหรือรูปแบบลงมา และทุกครั้งที่กด enter มันก็ถ่ายทอด DIV และ Span มา โดยที่ บางที DIV เรามีกรอบใส่สีสวยๆ กลับกลายเป็นกรอบสองช่องกรอบแยกกันโดยที่ไม่ได้ตั้งใจ ฉะนั้น ถ้าไม่ต้องการให้แยกTag DIV เป็นสองให้ดำเนินการพิมพ์ โดยมีหัว Tag P หรือมีคอนเท็นเนอร์อื่นที่เหมาะสม เมื่อกด enter มันจะไม่แยก แท็ก DIV

(2017)ไม่มีการแยกtagใดๆอีกต่อไป ระบบจะเพิ่ม <br/> ให้แทน

(2018) เหมือน2017

---

 

4.หัวข้อหลักที่ต้องการเน้น ก็จะใช้พระเอกหลายตัวคือ html tag หลายชนิด ในที่มีผมนิยมเพิ่มในstyle โดยปรกติการปรับขนาดฟอนท์ สีฟ้อนท์ สีพื้นปรับได้เลยมีปุ่มกดจะทำให้เพิ่มtag span ให้อัตโนมัติ โดยปรกติ span จะต้องตัดจบเป็นคำหรือบรรทัดๆเท่านั้นและพิมพ์ตัวอักษรยาวเท่าไหร่ก็มีขนาดเท่านั้นไม่สามารถพิมพ์หลายบรรทัด ส่วนใหญ่ผมจะเพิ่ม สีพื้น ขอบ ระยะเว้นจากขอบ ก็ปรับได้ตามอัธยาศัยเลยครับ

----

<p><strong><span style="font-size: 200%;line-height: 1.5em; background-color: #fab6e9; border: 3px solid #F56FD4; border-radius: 10px; padding: 0.4% 1.1%;">หัวข้อหลักชมพู</span></strong></p>

หัวข้อหลักชมพู

---------------------------------

หัวข้อหลักไม้

<p><strong><span style="font-size: 200%;line-height: 1.5em; background-color: #f7cfab; border: 3px solid #f0a765; border-radius: 10px; padding: 0.4% 1.1%;">หัวข้อหลักไม้</span></strong></p>

---------------------------------------------

หัวข้อหลักเขียว

<p><strong><span style="font-size: 200%;line-height: 1.5em; background-color: #b4eeb4; border: 3px solid #32CD32; border-radius: 10px; padding: 0.4% 1.1%;">หัวข้อหลักเขียว</span></strong></p>

--------------------------------------------------------------

---

 5. เรื่องของย่อหน้า

ย่อหน้าทั้งกระบิ มันจะเลื่อน padding-left ของ

tag

 

ฉะนั้นถ้าต้องการเลื่อนย่อหน้าทั้งกระบิสามารถทำได้ทันทีเลยโดยการกดปุ่มดังกล่าวมันจะเพิ่ม styleใน tag P  เพิ่ม style="padding-left:30px;" ให้ทันที สะดวกมากครับ(2016)  
****ส่วนปี (2017) ต้องไปเพิ่มtag p เอาเองจึงใช้ปุ่มนี้ได้ซึ่งการไม่ถ่ายทอดtagpเวลากดenter หรือไม่มีปุ่มสร้าง tag p สร้างความยุ่งยากให้มากพอสมควร*** 

 ^(2018) เหมือน2017 และไม่ควรใช้ ถ้าใช้ให้เปลี่ยนเป็นเปอร์เซนเช่น padding-left:4.2% (ที่หน้าจอ 700px มีค่าประมาณ 30px เป็นต้น

---

 6. เรื่องblockquote (2016-2017)
      (2018) แนะนำให้ใช้ DIV เปลี่ยนชื่อแท็กเป็นdiv

(blockquote)(2018 div) มาถึงพระเอกของเรื่องในการตกแต่งเว็บของผม เนื่องจากอยากให้มันดูเป็นสัดเป็นส่วน เป็นสี เป็นช่องคนละช่องหรือเปลี่ยนเรื่องใหม่ โดยปรกติ tag blockquote (2018 div) สามารถแก้ css พื้นฐานได้ด้วยวิธี อินไลน์ คือแก้มันโดยตรงนี่แหละ

อันนี้เป็น blockquote เพลนของทีมนี้ ซึ่งถูกกำหนดล่วงหน้า ตั้งแต่ระยะจัดชิด ช่องไฟ ขอบ สี สีพื้น ก็ตั้งให้ค่าใหม่ทั้งหมดแหละครับ

 

เนื่องจากระยะจัดชิดหรือmargin และช่องไฟภายในไม่โดนครับก็เลยต้องเสียเวลามาจัดใหม่เอง

--

การเปลี่ยนสีภายในก็สามารถนำไปจัดหมวดหมู่เนื้อเรื่องได้ดี 

  

---

 7. เรื่องลิงค์ link 2016-2018

(a) เรื่องสำคัญในที่นี้คือ เราต้องการแยกลิงค์ออกเป็นเอกเทศโดยจำแนกสีเฉพาะ เช่น เราต้องการลิงค์เป็นสีฟ้าและขีดเส้นใต้ถือว่าเป็นลิงค์ แต่เมื่อเราสร้างจะได้

<span style="text-decoration: underline; color: #0000ff ;"><a href="_____" target="_blank">Inrush Current</a></span>

แบบแรกเมื่อกดลิงค์ไปแล้วจะเป็นสีดำ >> Inrush Current 1

ให้แก้เพิ่ม css inline ในspan ข้อความในลิงค์ เพิ่มคำว่า !important  ลงไป  (span style="text-decoration: underline; color: #0000ff !important;") โดยต้องระบุspanสีภายใน tag a เท่านั้น 

หรือ ให้เรนเดอข้อความด้วยสีและขีดเส้นใต้ให้เรียบร้อยก่อนแล้วจึงเรนเดอร์ข้อความนั้นบวกช่องว่างซ้ายและขวาที่ไม่ได้เรนเดอร์สีเพิ่มฝั่งละ1ช่องเป็น tag a ด้วยวิธีนี้ถึงแม้ไม่ใส่คำว่า !important ใน span แต่ก็ยังคงสีเดิมได้เหมือนกัน

แบบที่แก้ไขให้เป็นสีฟ้าไปตลอดกาล>>  Inrush Current 2

<a href="_____" target="_blank"><span style="text-decoration: underline; color: #0000ff !important;">Inrush Current</span></a>

-----------------------------------------------------

การที่บทความมีความยาวมาก ก็เป็นการสะดวกที่ใช้ลิงค์แบบอ้างอิงในหน้าเดียวกัน ทำให้ผู้อ่านอ่านเฉพาะจุดที่สนใจได้ทันที  reference ซึ่งสามารถทำได้ทันทีโดยตั้งชื่อแท็กที่ต้องการไปในหน้าเดียวกัน ด้วยชื่อID สมมติว่าชื่อID="7link"  แล้วกำหนด href="#7link" ควรตั้งเป็นภาษาอังกฤษเท่านั้น** เพราะภาษาไทยอาจแสดงผลผิดพลาด 

ลองเข้าไปศึกษาใน http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor

ลองกดดูนะ > วาร์ปไปที่หัวข้อ 7.เรื่องลิงค์link

 ใน tag หัวข้อP <(p id="7link")>

---

 8. เรื่องของภาพและคำบรรยายภาพ 2016-2018

 

การใส่ภาพนั้นส่วนใหญ่ไม่ได้มีปัญหาอะไร แต่ต้องการคำบรรยายภาพที่แตกต่างจากเดิมเพื่อแยกว่าอันไหนเป็นบทความและอันไหนเป็นคำบรรยายภาพ 

ต่อไปนี้คงเป็นเทมเพลทในแบบของผมเอง

ภาพให้อยู่ตรงกลางโดยไม่ได้พึ่งแท็กP เพราะบางทีต้องการให้เต็มความกว้าง และคำบรรยายในแท็กP ให้ปรับแต่งmargin และ padding 

 ภาพ แสดง การเปล่งรังสีแสงที่มองเห็นได้ของโลหะบรอนซ์เหลวซึ่งยังมีความร้อนสูงมากกว่า 950 องศาเซลเซียส การเปล่งรังสีแสงนี้เกิดขึ้นเนื่องจากอุณหภูมิของโลหะบรอนซ์ จึงเรียกแสงสีที่เกิดขึ้นนี้ว่า อินแคนเดสเซนต์ ,Hot Bronze ,Incandescence of melton Bronze ,Flickr Picture CC by Erich Ferdinand

<a href="____.jpg" target="_blank"><img style="display: block; margin: auto;" src="____.jpg" alt="_____ " width="___" height="___"></a>

<p style="margin-top: 5px; padding: 0px 2.1% 0px 4.2%;"><span style="line-height: 1.3em; font-size: 125%;"> <em><span style="color: #7a29cc;">ภาพ แสดง ____ <a href="____" target="_blank"><span style="text-decoration: underline;color: #0000ff !important;">___ Picture CC by _____ </span></a></span></em></span></p>

 (2018) เหมือนปี2016 เปลี่ยนระยะpadding เป็นเปอร์เซนต์

 ส่วนความกว้างหรือยาวถ้าต้องการเน้นให้เต็มจอควรใส่ width="100%" และ height="100%"  แต่ถ้าต้องการปรับให้มีความกว้างและสูงเป็นกี่%ของคอนเทนเนอร์ ก็ใส่เท่านั้นเปอร์เซน และถ้าต้องการให้อยู่ตรงกลางก็อย่าลืมใส่ display: block; margin: auto; ด้วย

---

 9. สร้างตารางให้รองรับreponsive-2018

 

การสร้างตารางผมเน้นให้ทำให้เหมาะสมบนเดส์กท๊อปหรือคอมตั้งโต๊ะก่อนโดยที่สร้างให้มีขนาดเป็นพิกเซลตามปรกติโดยควรมีเนื้อหาไม่มากเกินไปและไม่ควรใหญ่เต็มความกว้างของคอนเทนเนอร์ควรมีขนาดไม่เกิน70-80%ของคอนเทนเนอร์ โดยที่ถ้าเป็นจอมือถือเล็กๆต้องแสดงผลได้ดี
1. จากนั้นให้เปลี่ยนความกว้างของtable ให้เป็น  width: auto; 

2. คำนวนความกว้างของแต่ละคอลัมหรือ td ที่มีความกว้างเป็น px แล้วปรับเปลี่ยนให้เป็นเปอร์เซนต์แทน ในที่นี้เราพอจะทราบความกว้างของคอนเทนเนอร์อยู่ที่ 700px ก็คำนวนให้เป็นเปอร์เซนต์แล้วใส่ลงไปโดยที่(10px=1.4%) ความกว้างของ td ทั้งหมดรวมกันทั้งแถวควรจะอยู่ไม่เกิน80%

ในกรณีนี้ความกว้างของ tdใน1แถว
=1.4 +1.4+21.7+28.1+14.8 %
=67.4% หรือประมาณ470px
เมื่อเปิดหน้าเว็บบนมือถืออัตราส่วนเหล่านี้จะขยายตัวและปรับตัวให้เหมาะสมเอง

	1.		คำสั่ง ,กดเข้า จาก1A>เข้าโหมด3C.count down นับถอยหลัง
	2.		ตั้งเวลานับ >> 0-99 นาที
	3.		ตั้งเวลานับ >> 0-59 วินาที
	4.		กดปุ่มให้ On ทำงานทันที ตัวเลขจะนับถอยหลังเพื่อหยุดทำงาน	จนเหลือ 0:00 แล้วจะกระพริบกลับเป็นค่า14:30อีกครั้ง
	5.		ถ้าจะหยุดทำงานกลางคัน แล้วรีเซทค่าเวลานับให้เท่าเดิม
	6.	ทำงานอีกครั้ง No.4.   ถ้า ตั้งค่านับใหม่ ไป No.2.

<table style="width: auto; height: 50px; margin-left: 2.8%; font-size: 120%;" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<td style="width: 1.4%;"><img style="font-size: 14px;" src="http://dj.lnwfile.com/_/dj/_raw/il/d7/gw.png" width="10" height="40"></td>
<td style="background: MistyRose; width: 1.4%; border: 1px solid red; border-radius: 5px;"><strong>&nbsp;1.</strong></td>
<td style="width: 21.7%; border: 2px solid #ff8989; border-radius: 5px;"><img src="http://dj.lnwfile.com/_/dj/_raw/se/v9/am.jpg" width="153" height="40"></td>
<td style="width: 28.1%; border: 2px solid #ff8989; border-radius: 5px;">คำสั่ง ,กดเข้า จาก1A&gt;<span style="font-size: 18px;"><strong>เข้าโหมด3C.count down</strong></span> นับถอยหลัง&nbsp;&nbsp;</td>
<td style="width: 14.8%; border: 1px dotted red; border-radius: 5px;"><img src="http://dj.lnwfile.com/_/dj/_raw/8i/tf/w6.jpg" width="99" height="55"></td>
</tr>
...
....
</tbody>
</table>

 (2018) ดูๆไปเปิดบนมือถือก็ดูดีไม่น่าเกลียดครับ

 

---

 10. เรื่องของวีดีโอ2016-2018 responsiveดูท้ายเรื่อง

 VDO-- Light blub filament -- youtube CC by engineerguy

(2016)การปรับขนาดอยากได้จอยาวๆหน้ากว้างแบบดูทันสมัยจะทำได้ยากหน่อยเพราะปุ่มเพิ่มวิดีโอของเทพช็อบมันบังคับตลอดให้ใส่ขนาดได้แบบเดียวเป็นแบบข้างบนแก้ขนาดก็ไม่ได้ ต้องยอมใส่วีดีโอใน text editorไปก่อน แล้วค่อย แก้ไขใน html แทนเป็น
(2017) แก้ไขแล้ว สามารถใช้ปุ่มเพิ่ม vdo ได้ทันทีและเป็นแบบจอhdให้ การปรับขนาดให้เล็กลงตามอัตราส่วนให้ติ๊กถูกที่จำกัดสัดส่วน ปรับความกว้างให้เล็กลงสมมติว่าเป็น 300  อีกช่องให้เอาเม้าส์คลิ๊ก มันจะแก้ตัวเลขที่ปรับอัตราส่วนให้ทันที 

<div><iframe src="https://www.youtube.com/embed/_________" frameborder="0" width="470" height="260" allowfullscreen="allowfullscreen"></iframe></div>

<div><iframe src="https://www.youtube.com/embed/__________" frameborder="0" width="425" height="235" allowfullscreen="allowfullscreen"></iframe></div>

เป็นแบบข้างล่างอย่างที่เห็น

การเพิ่มวีดีโอเข้าไปในข้อความเป็นเรื่องง่าย แต่สิ่งที่ปรับแต่งไม่ได้แล้วดูน่ารำคาญที่สุดคือ(2016)ทางเทพช็อปปิดการขยายภาพวีดีโอให้เต็มจอ ซึ่งลองแล้วพบว่าไม่สามารถใส่คำสั่งใดๆโดยเฉพาะพารามิเตอร์ allowfullscreen ถูกบล็อกไว้ แก้ไขเรื่องการขยายหน้าจอนี้ได้เลย ซึ่งพูดง่ายๆว่าดูเต็มจอไม่ได้ ถ้าต้องการดูเต็มจอต้องเข้าไปในยูทูปถึงจะทำงานเต็มจอได้
(2017)เทพช็อปแก้ไขแล้วเปิดพารามิเตอร์ allowfullscreen ให้แล้ว

จริงๆถ้ามันยุ่งนักก็ใช้เป็นภาพและลิงค์ให้เข้าไปดูในยูทูปเลยเมื่อกดคลิ๊กที่ภาพ สมมติว่าเราส่งลิงค์ไปที่ภาพให้ขึ้นแท็บใหม่เป็น https://www.youtube.com/watch?v=BylLOWRojyY ซึ่งเราสามารถแอ๊ดพารามิเตอร์โดยตรงให้เล่นที่วินาทีที่เท่าไหร่ได้เลย  เป็น

     parameter ให้เล่นที่วินาทีที่0   time_continue=0&

https://www.youtube.com/watch?time_continue=60&v=BylLOWRojyY

^^ ข้างบนให้เริ่มเล่นทันทีที่วินาทีที่ 60 ลองกดดูสิ

หรือจะใช้เป็นตัวแปรมาตรฐาน นาที,วินาทีดังนี้

https://www.youtube.com/watch?v=BylLOWRojyY&t=1m0s

ตัวแปรพารามิเตอร์ที่น่าสนใจที่เพิ่มเข้าไปข้างหลัง ใน tag iframe ที่สามารถใช้ได้

https://www.youtube.com/embed/DIGqBb3iZPo

เช่น   ?start=110&end=119  ให้ใส่ต่อหลัง พารามิเตอร์ใน iframe นั้น

<div><iframe src="https://www.youtube.com/embed/DIGqBb3iZPo?start=110&end=119" frameborder="0" width="470" height="260" allowfullscreen="allowfullscreen"></iframe></div>

หมายถึงให้เริ่มเล่นที่วินาทีที่110 แล้ว หยุดที่ วินาที่ที่119  

-ในวีดีโอที่ให้ความรู้ต่างๆ ผู้จัดทำวีดีโอบางคนอาจไม่อนุญาตให้ผู้อื่นนำวีดีโอของตนไปใช้ในลักษณะที่เกี่ยวข้องกับการค้า เช่นที่นี่แม้เป็นบทความ แต่ก็เป็นร้านค้าที่แสวงหาผลกำไร แม้ไม่ได้มีสินค้าที่ขายแข่งกับผู้จัดทำวีดีโอ การนำไปใช้โดยไม่ได้รับอนุญาตจะไม่ถูกต้อง เราควรต้องเสียค่าใช้จ่ายให้แก้ผู้ทำวีดีโอก็เป็นการสมควร 

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

อย่าให้มีการเล่นวีดีโอในหน้าเว็บที่นี่ให้ส่งลิงค์ออกไปให้ไปเล่นบนยูทูปเลยโดยที่เราไม่ต้องมีรูปใดๆเก็บไว้ในไซต์ของเรา แต่เราอาศัยการembed video จากyoutubeมาใช้ให้ส่งลิงค์ไปอย่างเดียว

วิธีการนี้ถือว่าเป็นการโฆษณาให้กับวีดีโอของเขา เขาจะได้ประโยชน์โดยตรง ส่วนเราได้ประโยชน์จากผู้อ่านสามารถค้นคว้าต่อได้ทันทีจากรูปที่youtubeส่งมาที่เว็บเราเอง เราจะทำได้อย่างไรและวิธีไหน?

_

<div style="width: 470px; height: 260px; position: relative;margin-left: 0px;">
<iframe src="https://www.youtube.com/embed/DIGqBb3iZPo" frameborder="0" width="470" height="260" allowfullscreen="allowfullscreen"></iframe>
(***id=div2layer ต้องลบวงเล็บนี้ออก) <div style="width: 470px; height: 260px; position: absolute; top: 0; z-index: 100; cursor: pointer;" onclick="window.open('https://www.youtube.com/watch?v=DIGqBb3iZPo')" onmouseover="cursor: pointer;">      <img style="position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%);" onmouseover="this.style.height = '90px'; this.style.width = '128px';" onmouseout="this.style.height = '36px'; this.style.width = '51px';" src="https://dj.lnwfile.com/_/dj/_raw/ex/05/br.gif" alt="" width="51" height="36" border="0" />  
</div>
</div>

ถ้าจะอธิบายก็ยืดยาวหน่อย คือ สร้าง คอนเทนเนอร์ div ให้บรรจุ iframe+div(id=div2layer) ให้อยู่ในระดับเลเยอร์เดียวกัน  div2layer จะถูกกำหนดให้ทับบน iframe ด้วยการกำหนด z-index ที่มีจำนวนมากกว่าสมมติว่า=100 (เนื่องจากเวลาเปิดหน้านี้จริงๆ iframeจะถูกแปลงเป็นคอนเทนเนอร์div ที่มีz-index ต่ำกว่า) 

ใน div2layer ยังอนุญาตให้ใช้พ็อยเตอร์รูปมือปรากฎขึ้น (cursor: pointer;) และใช้จาวาสคริ๊ปอินเสิชเหตุการณ์เมื่อกด(onclick) จะส่งลิงค์ทันทีไปที่ๆเราต้องการในที่นี้คือ youtube  ส่วนรูปตรงกลางจะใช้ลูกเล่นสคริ๊ปจากภาพให้ขยายตัวและหดตัวลงเมือเกิดเหตุการณ์เม้าส์ผ่านบนภาพ(mouseover) และเม้าส์ผ่านออกจากภาพ(mouseout) ส่วนให้ img อยู่ตรงกลางคอนเท็นเนอร์พอดีก็ให้ใส่ตามที่ว่าแหละครับ 

(2018) การใส่โค๊ดเพิ่มเติมในวีดีโอเพื่อรองรับresponsive
 
(2018) การใส่โค๊ดเพิ่มเติมในวีดีโอเพื่อรองรับresponsive

การปรับขนาดหน้าจอแสดงผลอัตโนมัติใน youtube หรือ embed vdo อะไรก็ตามต้องสร้างคอนเทนเนอร์divเฉพาะทางโดยไม่ระบุขนาดตายตัวแต่ระบุขนาดแบบอัตราส่วนแล้วบรรจุiframe-ตัวเล่นหนังที่กำหนดคุณสมบัติขยายตัวด้านแนวกว้างxยาวได้100% ให้ใส่โค๊ดตามนี้ครับ แต่ปัญหาคือมันจะใหญ่เต็มคอนเทนเนอร์ทีเดียว
หาอ่านเพิ่มเติมได้ที่นี่  https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php    --

<div style="padding-bottom: 56.25%; height: 0px; position: relative;">
<iframe width="100%" height="100%" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="https://www.youtube.com/embed/6s1G4-FBpXs" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>
</div>

padding-bottom:56.25% เป็นตัวกำหนดอัตราส่วนของวีดีโอ
  >> 56.25% คือจอแบบ 16:9
  >> 75%     คือจอแบบ 4:3
  >> 177%   คือจอมือถือแนวตั้งแบบ 1:1.77
height เพิ่มความสูงของเฟรมวีดีโอ
ถ้าต้องการกำหนดขนาดของคอนเทนเนอร์ก่อนใส่ iframe เช่นต้องการใส่วีดีโอ มือถือแบบแนวตั้ง แต่ต้องการคอนเทนเนอร์div ที่มีขนาดความกว้างแค่50%ของความกว้างทั้งหมดและอยู่ตรงกลางจอแสดงผล
--เมื่อเอาโค๊ดด้านบนมาใส่จะได้ดังด้านล่างครับ --

-- ^ด้านบนมีลักษณะวีดีโอขนาด16:9 แต่ขยายเต็มคอนเทนเนอร์ด้านกว้าง680px(ภาชนะบรรจุได้680px) ถ้าเราต้องการให้มีช่องไฟด้านซ้ายและด้านขวาด้านละ30px หรือ4.2%ของ700px จะต้องทำอย่างไรครับ?--

-----------------------------------------------------------------------------------

<div style="padding-bottom: 177%; height: 0px; position: relative; margin: auto;">
<iframe width="100%" height="100%" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="https://www.youtube.com/embed/6s1G4-FBpXs" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>
</div>

-- ถ้านำโค๊ดด้านบนกำหนดเป็นขนาด 177% จะบีบให้เป็นขนาดมือถือแต่มันใหญ่เกินไปถ้าต้องการลดขนาดควรใส่โค๊ดอย่างไร--

--ลองใส่โค๊ดเพิ่มเติมตามตัวอย่างข้างล่างเพื่อลดขนาดลงดังนี้ ซึ่งไม่ได้เป็นการลดขนาดโดยตรงแต่เป็นการเพิ่มช่องไฟในพื้นที่ที่มีความกว้าง100% เราเพิ่มช่องไฟเป็น
  เดิม+0%(กรอบสีเขียวmarginซ้าย) + 1.4%(paddingกรอบเขียวด้านซ้าย)
  +60% ของช่องไฟdivกรอบปรับเพื่อลดขนาด
  เดิม+1.4%(paddingกรอบเขียวขวา) + 0%(marginขวากรอบเขียว)
= 62.8%
ขนาดช่องไฟรวม= 62.8% แสดงว่า
ความกว้างของvdo = 37.2% ของความกว้าง700pxหรือมือถือใดๆ  --

<div style="padding: 2.8% 60% 2.8% 0%; position: relative;">
<div style="padding-bottom: 177%; height: 0; position: relative;"><iframe width="100%" height="100%" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/6s1G4-FBpXs" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>

-- --

--ถ้าเราต้องการปรับขนาดโดยที่ให้มีช่องไฟวีดีโอที่เราพอใจในระบบเรสผอนซีฝ เราต้องการสร้างคอนเทนเนอร์อันแรกที่มีขนาดช่องไฟหรือpaddingที่ใส่ขนาดเป็นเปอร์เซนต์ก่อน แล้วจึงใส่โค๊ดวีดีโอและคอนเทนเนอร์ที่กำหนดความกว้างแบบอัตราส่วน เช่นต้องการpaddingขวาบนจอตั้งแต่60% 40% 20% (ถ้าเป็นจอ700px = กำหนดpadding เป็น 420px, 280px ,140px ) ต้องใส่อย่างไร--

<div style="padding:2.8% 60% 2.8% 0%; position: relative;">
<div style="padding-bottom: 56.25%; height: 0; position: relative;"><iframe width="100%" height="100%" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/DIGqBb3iZPo" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>
</div>
</div>

--^เอาโค๊ดด้านบนเริ่มใส่ที่paddingขวา 60,40,20% ไปเรื่อย จะเห็นว่าผมกำหนดช่องว่างจากขอบในคอนเทนเนอร์ให้มีระยะขอบบนล่างเท่ากับ2.8% หรือ 20pxของจอ700px ด้วย--

--^
ในกรณีที่ต้องการให้วีดีโออยู่ตรงกลางเราไม่สามารถใช้margin auto ได้ กลายเป็นก็ต้องกำหนด paddingซ้ายและขวาเท่าๆกันเป็นเปอร์เซนต์อีกต่างหากซึ่งต้องคำนวนอีกอย่างแยบยลดังนี้ ^รูปวีดีโอข้างบนpaddingขวา=20% เราก็เอามาเกลี่ยซ้ายขวาให้เท่ากัน10 10 ก็จบแล้ว--

<div style="padding: 2.8% 10% 2.8% 10%; position: relative;">
<div style="padding-bottom: 56.25%; height: 0; position: relative;"><iframe width="100%" height="100%" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/DIGqBb3iZPo" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>

--------------------------------------------------------------------



--ปัญหาต่อไปคือเราจะทำเลเยอร์วีดีโอที่ให้ยูทูปแสดงภาพที่ไซต์ของเรา แต่เราไม่ต้องการให้เล่นบนเว็บไซด์ซึ่งอาจเป็นการละเมิดลิขสิทธิ์แต่ต้องการส่งลิงค์ออกไปหาผู้สร้างวีดีโอแทนเป็นการโปรเมทวีดีโอของเขาโดยไม่ละเมิดลิขสทิธิ์ และต้องการให้เป็นแบบ responsive ทำได้ไหม?? --

--เริ่มจากแบบแรกก่อน คือวีดีโอกางให้เต็มความกว้างแต่ยังไม่สามารถปรับช่องไฟได้ ใส่โค๊ดตามข้างล่างนี้เลยครับ ส่วนคำอธิบายสั้นๆอีกรอบคือ มีคอนเทนเนอร์divสีชมพูเป็นตัวปรับขนาด16:9  iframeสีน้ำตาลปรับตามขยาย100% คอนเทนเนอร์divสีเขียวทำหน้าที่สร้างเลเยอร์ซ้อนทับiframeให้มีเหตุการณ์ถ้ากดแล้วลิ้งไปหน้าเว็บแทนการกดiframe ส่วนภาพimgสีแดงเป็นลูกเล่นขยายภาพบอกว่าให้ไปยูทูป --

<div style="padding-bottom: 56.25%; height: 0; position: relative;">
   <iframe width="100%" height="100%" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/v8mCoAfnAQo" frameborder="0"></iframe>
   <div style="width: 100%; height: 100%; position: absolute; top: 0px; z-index: 100; cursor: pointer; padding-left: 0px;" onclick="window.open('https://www.youtube.com/watch?v=v8mCoAfnAQo')" onmouseover="cursor: pointer;"><img style="position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%);" onmouseover="this.style.height = '90px'; this.style.width = '128px';" onmouseout="this.style.height = '43px'; this.style.width = '61px';" src="https://dj.lnwfile.com/_/dj/_raw/ex/05/br.gif" alt="" width="61" border="0" height="43" /></div>
</div>

-- --

--แต่ถ้าเราจะปรับช่องไฟตามโค๊ดข้างล่างซึ่งเพิ่มคอนเทนเนอร์หลักที่ระบุช่องว่างจากขอบเป็นเปอร์เซนต์    ซึ่งจะมีปัญหาอยู่อย่างเดียวคือ ตัวภาพที่เป็นแบนเนอร์ go to youtube ก็จะไม่ปรับตามเป็น%ซึ่งอย่างไรเราก็ลิ้งค์ไปข้างนอกอยู่แล้วจึงขี้เกียจทำเลเยอร์divซ้อนอีกรอบเพื่อปรับความกว้างแบนเนอร์ให้เป็นเปอร์เซนต์ คิดว่าไม่จำเป็น และก็ใช้วิธีการเดียวกับยูทูปแบนเนอร์จึงมีขนาดขยายหรือลดคล้ายกับแบนเนอร์ยูทูป  --

<div style="padding:2.8% 40% 2.8% 0%; position: relative;">
<div style="padding-bottom: 56.25%; height: 0; position: relative;">
    <iframe width="100%" height="100%" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/v8mCoAfnAQo" frameborder="0"></iframe>
   <div style="width: 100%; height: 100%; position: absolute; top: 0px; z-index: 100; cursor: pointer; padding-left: 0px;" onclick="window.open('https://www.youtube.com/watch?v=v8mCoAfnAQo')" onmouseover="cursor: pointer;"><img style="position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%);" onmouseover="this.style.height = '90px'; this.style.width = '128px';" onmouseout="this.style.height = '43px'; this.style.width = '61px';" src="https://dj.lnwfile.com/_/dj/_raw/ex/05/br.gif" alt="" width="61" border="0" height="43" /></div>
</div>
</div>


-- --

-- --

-- --

-- จบแล้วครับ --