CSS

ตัวช่วย Stylish ให้เว็บกลับมามีสีสันปกติ

ในเดือนตุลาคม 2560 ประเทศไทยอยู่ในช่วงไว้ทุกข์ ในงานพระบรมศพ พระบาทสมเด็จพระปรมินทรมหาภูมิพลอดุลยเดช บรมนาถบพิตร ผู้ให้บริการเว็บไซต์ในประเทศไทยหลายราย ตัดสินใจร่วมไว้ทุกข์ ด้วยการใช้คำสั่ง css filter grayscale ในการลดความสดใสของเว็บไซต์ ให้เข้ากับบรรยากาศของประเทศ

อย่างไรก็ดี มีผู้ใช้งานอินเทอร์เน็ตจำนวนมาก จำเป็นต้องใช้งานเว็บไซต์สีสันปกติ ตัวช่วย Stylist พอจะเป็นทางออกในการแก้ไขปัญหาในเบื้องต้น

การปรับใช้ HTML Textbox ใน Drupal 7 ร่วมกับ WYSIWYG และ CKEditor จัดตำแหน่งย่อหน้า และปุ่มเลือกสีตัวอักษร

เป็นที่ทราบกันดีว่า โปรแกรม Drupal ตั้งแต่ในอดีต มาจนถึงเวอร์ชั่น 7 นั้นมีข้อจำกัดเรื่องกล่องข้อความ (เนื้อหา) Textbox ที่ไม่มีเครื่องมืออำนวยความสะดวกในการจัดการความสวยงามของเนื้อหา โดยค่าเริ่มต้นของ Drupal 7 ก็ยังคงเป็นกล่องว่างๆ พร้อมสำหรับพิมพ์ Plain Text เท่านั้น และหากต้องการปรับแต่งความสวยงามของเนื้อหา ผู้ใช้จำเป็นต้องมีความรู้เกี่ยวกับคำสั่ง HTML และ CSS พอสมควร

รวมคำสั่ง CSS ที่ใช้บ่อย ในการปรับแต่งตัวอักษรในเว็บไซต์

เบราว์เซอร์รุ่นใหม่ ช่วยให้คนทำเว็บไซต์ สามารถกำหนดคุณสมบัติต่างๆ เกี่ยวกับหน้าตา-สีสัน ของเว็บไซต์ได้มากขึ้น รวมถึงการปรับแต่ง "ตัวอักษร" ภายในเว็บไซต์ ก็มีความสามารถมากขึ้นตามไปด้วย

มาลองดูคำสั่ง CSS เกี่ยวกับตัวอักษร ที่ใช้กันบ่อย ในการปรับแต่งเว็บไซต์ เช่น...

Fixed: ปัญหา iFame ใน iPad/iOS เลื่อนหน้าเพจไม่ได้

เวลา embed ฝังโค้ด iFrame ที่เป็นหน้าเพจยาวๆ ซ้อนลงในเว็บไซต์ ในบางที iPad/iOS มันจะมีปัญหาไม่สามารถเลื่อนหน้าเพจใน iFrame -- ก่อนหน้านี้เคยเจอ มันแสดงทั้งหมด แบบทะลักยาวไปเรื่อยๆ จนจบหน้าเพจ iFrame

ล่าสุด ค้น Google เจอเทคนิคแก้ไข ด้วยการกำหนด CSS ให้กับ <div> ที่อยู่เหนือ iFrame ดังนี้

-webkit-overflow-scrolling: touch;
overflow-y:scroll;
height: 00px; /* ต้องกำหนดขนาดความสูงของหน้าจอ iFrame ด้วยนะ */

เท่านี้ก็จะสามารถเลื่อนหน้าเพจ iFrame ใน iOS ได้แล้ว :)

เทคนิคการปรับแต่ง แก้ไขขนาดโฆษณา แบนเนอร์ Google AdSense ได้อย่างอิสระ

สำหรับเจ้าของเว็บไซต์ หรือคนที่ติดตั้งโฆษณาของกูเกิ้ล ด้วยบริการที่ชื่อว่า Google AdSense ภายในเว็บไซต์ ในยุคก่อนที่วงการเว็บจะเน้นการรองรับการเข้าถึง ด้วยหน้าจอหลายขนาด (Responsive Web Design) อาจจะคุ้นเคยกับการ "เลือก" ขนาดแบนเนอร์ "ที่เหมาะสม" กับความกว้างของเว็บไซต์ มาแปะในแต่ละหน้าเพจ

พื้นฐานการเขียน CSS เบื้องต้น Property ที่ใช้งานบ่อย

สำหรับค่า Property ของการเขียน CSS นั้นมากมายหลากหลาย ซึ่งผู้ที่สนใจสามารถหาอ่านได้ทั่วไป แต่ส่วนตัวที่ใช้งานบ่อยๆ จะประกอบด้วย

  • font-size = ขนาดตัวอักษร
  • color = สีตัวอักษร
  • background = พื้นหลัง
  • float = การไหลต่อกัน
  • overflow = การครอบทั้งหมด
  • width = ความกว้าง
  • height = ความสูง
  • margin = ระยะห่างจากขอบไปทางด้านนอก
  • padding = ระยะห่างจากขอบถึงเนื้อหาด้านใน

พื้นฐานการเขียน CSS เบื้องต้น การซ้ำ ลำดับความสำคัญ

การซ้ำของ CSS

การเขียน CSS ในหลายครั้งเมื่อเราได้เขียนมาได้ระยะหนึ่ง เราอาจเผลอเขียนคุณสมบัติ Property ของ CSS ซ้ำซ้อนใน CSS ชุดเดียวกัน

ซึ่งการทำงานของ CSS นั้น จะเลือกใช้ Property ตัวที่ประกาศล่าสุดมาใช้งาน เช่น

h3 {
  color: #ff000;
  text-align: left;
  font-size: 1.5em;

}

h3 {
  text-align: right;
  font-size: 1.25em;

}

พื้นฐานการเขียน CSS เบื้องต้น เริ่มเขียน CSS

ในการเริ่มต้นเขียน CSS จะต้องทำความเข้าใจกับ Syntax พื้นฐานของ CSS เสียก่อน

CSS Cyntax and Selector
รูปตัวอย่างจาก w3schools.com/css/css_syntax.asp

จากตัวอย่างรูปภาพด้านบน ประกอบด้วย

  • Selector = Tag ต่างๆ จากโค้ด HTML เพื่อใช้อ้างอิงว่าจะกำหนด CSS กับส่วนไหน เช่น <h1> <p> หรือ <div> เป็นต้น
  • Declaration = ชุดคำสั่งทั้งหมด ที่มีผลกับ Selector ที่กำหนด โดยจะอยู่ในปีกกา { และ }
  • Property = คุณสมบัติ หากมีหลายตัวใช้เครื่องหมาย (semicolon) ; คั่นแต่ละคุณสมบัติ
  • Value = กำหนดค่าต่างๆ ในแต่ละคุณสมบัติ

พื้นฐานการเขียน CSS เบื้องต้น สำหรับปรับแต่งหน้าเว็บไซต์อย่างง่ายด้วยตัวเอง

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

CSS เป็นคำย่อมาจาก Cascading Style Sheets เป็นการเขียนชุดคำสั่งที่เกี่ยวกับการตกแต่งหน้าตาเว็บไซต์ โดยเป็นโค้ดส่วนที่แยกออกมาจากโค้ด HTML

ในไอเดียของผมเอง มองว่า HTML เอาไว้ทำ Markup ของเนื้อหา จัดลำดับความสำคัญของข้อมูล ว่าตำแหน่งไหนเป็นข้อมูลสำคัญ ส่วนไหนเป็นหัวข้อหลัก พวกแท็ก <h1> <p> <div> โดยมุ่งเน้น "ให้เครื่องอ่าน" -- ส่วน CSS เป็นการจัดการกับสีสัน ตำแหน่งการจัดวาง มุ่งเน้น "ให้คนดู" เพื่อความสวยงาม

การเขียน CSS ทำได้ใน 3 ลักษณะ

วิธีแทรก icon บน Title Block Drupal 7

การแทรก icon บน title block ทำเพื่อสร้างจุดเน้นของสายตาผู้ชม ให้มองเนื้อหาเป็นกลุ่มหมวดหมู่มากขึ้น และความเป็นระเบียบสวยงาม จริง ๆ ก็มีโมดูล block icons ใช้กัน แต่มีเฉพาะ drupal 6 เท่านั้น  ส่วน drupal 7 แนะนำว่าให้ใช้ css ช่วยในการจัดการ ไม่ต้องไปแก้ไข drupal core เพราะเวลาอัพเดทก็ไม่ต้องคอยจำว่าเราไปแก้โค้ดระบบตรงไหนไว้บ้าง :-)

ขั้นตอนวิธีทำ

แบบที่ 1 ใส่ icon เหมือนกันหมดทุกบล็อก

- แทรก css ชุดนี้เข้าไปในไฟล์ style.css ในโฟลเดอร์ชุดธีม

.block h2 {
  padding-left: 1.5em;
  background: url(/themes/garland/images/menu-leaf.gif) no-repeat;
}

หมายเหตุ:

  • ในบางธีม title block ใช้ h2 บางธีม title block ใช้ h3 ต้องเช็คด้วยนะครับว่าธีมที่เราเลือกใช้นั้นใช้ header ระดับไหน
  • เปลี่ยน /themes/garland/images/menu-leaf.gif ให้เป็นรูป icon ที่คุณต้องการ

Pages

Subscribe to RSS - CSS