CSS

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

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

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

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

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

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

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

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

poakpong Thu, 04/23/2015 - 13:56

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) อาจจะคุ้นเคยกับการ "เลือก" ขนาดแบนเนอร์ "ที่เหมาะสม" กับความกว้างของเว็บไซต์ มาแปะในแต่ละหน้าเพจ

poakpong Sun, 03/22/2015 - 01:04

พื้นฐานการเขียน 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

วิธีแทรก 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 ที่คุณต้องการ