# รวบรวมฟังก์ชันตกแต่ง STEEMIT ตั้งแต่ basic ถึง advance
ในการจัดตัวอักษร จัดบรรทัด คอลัมน์ ให้ดูสวยงาม และเป็นระเบียบเรียบร้อย
ซึ่งวิธีใช้ฟังก์ชันต่างๆ ในเบื้องต้นทางเว็บ STEEMIT ได้มี Guide บอกไว้แล้ว
วันนี้ผมเลยจะรวมฟังก์ชัน ตั้งแต่ Basic ถึง Advance ให้ได้มากที่สุดเป็นภาษาไทยให้เลือกใช้ครับ
ก่อนอื่นต้องขออธิบายก่อนว่า
ภาษา Markdown เป็นการใช้ตัวอักษระพิเศษเช่น # * นำหน้าหรือตามหลังข้อความ
แต่ภาษา HTML จะใช้ <...> นำหน้า และ </...> ตามหลัง ข้อความ
ฟังก์ชันที่พิเศษมากๆ Markdown จะทำไมไ่ด้ เช่น แบ่งคอลัมน์ ตัวยก ตัวห้อย
ดังนั้นจึงต้องใช้ภาษา HTML เขียนเท่านั้นครับ
ปรับแต่งหัวข้อหลัก
หัวข้อ สร้างได้โดยใส่ # ไว้หน้าข้อความ หรือใส่ <h>..</h> คลุมข้อความที่ต้องการให้เป็นหัวข้อ
ซึ่งสามารถเลือกปรับขนาดได้ 6 ขนาด ตามจำนวน # หรือ ตัวเลขหลัง h ดังนี้
หัวข้อ | ||
หัวข้อ | ||
หัวข้อ | ||
หัวข้อ | ||
หัวข้อ | ||
หัวข้อ |
ปรับแต่งตัวอักษร
โดยใส่ข้อความให้อยู่ระหว่าง สัญลักษณ์ ต่างๆ ดังนี้
การใส่รูปภาพ
1.อัพโหลดรูปภาพจากเครื่องของเราได้โดยตรง
2.สามารถเอา URL รูปภาพจาก Website อื่นๆ โดยการนำลิงค์รูปภาพมาลงได้เลย
เช่น แค่พิมพ์ URL https://steemitimages.com/DQmSvDcy3Uq4Uj8dH2isTEhfa2FaXFhjQJUNGfxFP7edqvC/U5dtTe4CknMNtP84D4fX1UxmweaGReq_1680x8400.png
ลงไป จะได้รูปภาพนี้ขึ้นมาทันที
การใส่ Link
1.สามารถนำ URL มาแปะได้โดยตรง ระบบจะทำ Link ให้อัตโนมัติ
2.สร้าง Link จาก ข้อความ โดยการ พิมพ์ข้อความที่ต้องการใน [...] ตามด้วย URL website ใน (...)
ตัวอย่างเช่น [ข้อความ](http://steemit.com) จะได้ผลลัพธ์ดังนี้ ----> ข้อความ
3.สร้าง Link จาก รูปภาพ โดยการ ใส่ [<img src="URL รูปภาพในนี้">](Website Link ที่ต้องการ)
เช่น [<img src=" https://upload.wikimedia.org/wikipedia/commons/f/fa/Steemit-big.png
">](http://steemit.com
) จะได้รูปนี้
การใส่ Quote หรือ ประโยคอ้างอิงต่างๆ
ทำได้โดยการ ใส่ > หน้าข้อความ หรือ <blockquote>...</blockquote> ระหว่างข้อความ เช่น
ประโยคอ้างอิง |
การใส่กล่องข้อความ
ทำได้โดยการ ใส่ `...` หรือ <code>...</code> ระหว่างข้อความ เช่น
กล่องข้อความ |
การใส่ List รายการต่างๆ
ทำได้โดยการพิมพ์ 1. 2. 3. ลงไปหน้าข้อความรายการต่างๆ
ผลลัพธ์ที่ได้จะจัดหน้ากระดาษให้อัตโนมัติ ดังนี้
- ข้อความ
- ข้อความ
- ข้อความ
หรือพิมพ์ * หรือ + หรือ - ลงไปหน้าข้อความรายการ
และสามารถทำรายการย่อยซ้อนกันได้อีก โดยการ เคาะ Spacebar 2 ครั้ง ตามด้วย * หรือ + หรือ -
ผลลัพธ์ที่ได้จะจัดหน้ากระดาษให้อัตโนมัติ ดังนี้
- ข้อความ
- ข้อความ
- ข้อความย่อย
- ข้อความย่อย
การสร้างตาราง
หัวข้อที่ 1 | หัวข้อที่ 2 | หัวข้อที่ 3 | หัวข้อที่ 4
------ | ------ | ------ | ------
ข้อความ | ข้อความ | ข้อความ | ข้อความ
ข้อความ | ข้อความ | ข้อความ | ข้อความ
หัวข้อที่ 1 | หัวข้อที่ 2 | หัวข้อที่ 3 | หัวข้อที่ 4 |
---|---|---|---|
ข้อความ | ข้อความ | ข้อความ | ข้อความ |
ข้อความ | ข้อความ | ข้อความ | ข้อความ |
การแบ่งคอลัมน์
<div class=pull-left>
ข้อความในคอลัมน์ฝั่งซ้าย
</div>
<div class=pull-right>
ข้อความในคอลัมน์ฝั่งขวา
</div>
แบ่งเส้นคั่นหน้า
สามารถ พิมพ์ --- หรือ === หรือ ___ หรือ <hr> เพื่อสร้างเส้นคั่นหน้าได้
จัดข้อความให้อยู่ตรงกลาง
การจัดตำแหน่งข้อความหรือรูป ให้อยู่ตรงกลาง ทำได้โดยการพิม <center>ข้อความ</center>
ผลลัพธ์ที่ได้
"นี่คือข้อความที่จัดอยู่ในตำแหน่งตรงกลางหน้ากระดาษ"
"นี่คือข้อความที่ไม่ได้จัดอยู่ในตำแหน่งตรงกลางหน้ากระดาษ"
เว้นบรรทัดใหม่
จะเห็นว่า ถ้าเราพยายามจะเว้นบรรทัดเปล่าๆ โดยการ Enter เฉยๆ เราจะเว้นได้แค่ 1 บรรทัดเท่านั้น
แต่สามารถเว้นบรรทัดใหม่หลายๆ บรรทัด ได้โดยโดยการ <br/> ลงไป ตามจำนวนบรรทัดที่เราต้องการ
ต้องการเว้นช่องไฟห่างๆ (เคาะ spacebar หลายครั้ง)
จะเห็นว่า ถ้าเราพยายามจะเว้นช่องไฟห่าง โดยการ spacebar หลายๆครั้ง เราจะเว้นได้แค่ 1 ช่อง spacebar เท่านั้น
หากต้องการเว้นหลายๆ ช่อง ให้พิมพ์ <pre>.....</pre> คลุมข้อความนั้น
ตัวอย่างผลลัพธ์ที่ได้
เว้นช่องไฟ 1 ช่อง 2 ช่อง 3 ช่อง 4 ช่อง 5 ช่อง 6 ช่อง 7 ช่อง 8 ช่อง
พิมพ์ตัวอักษรพิเศษ
อยากพิมพ์ตัวอักษร พิเศษ ลงไป เช่น * # แต่ระบบจะนึกว่าเราต้องการเขียนฟังก์ชัน Markdown
ดังนั้นให้ ใส่เครื่องหมาย \ นำหน้าตัวอักษรพิเศษ เช่น \* หรือ \# จะทำให้พิมพ์ * # ได้
การเขียนเชิงอรรถ
ทำได้โดยการพิมพ์ [^1] [^2] [^3] ไว้หลังข้อความ
และพิมพ์ [^1]:เชิงอรรถที่จะใช้อ้างอิงนั้นๆ ตามหลังบทความ
การย่อรูปภาพ
ยังไม่สามารถ ย่อรูปภาพได้โดยตรง ทำได้แค่ นำรูปมาใส่ ในคอลัมน์ จะทำให้ขนาดรูปเล็กลง 50%
ซึ่งสามารถ นำคอลัมน์ซ้อนคอลัมน์ เพื่อให้ขนาดภาพลดลงเหลือ 25% จากขนาดปกติ
<div class=pull-left>
https://upload.wikimedia.org/wikipedia/commons/f/fa/Steemit-big.png
<div class=pull-left>
https://upload.wikimedia.org/wikipedia/commons/f/fa/Steemit-big.png
<div class=pull-left>
https://upload.wikimedia.org/wikipedia/commons/f/fa/Steemit-big.png
</div>
</div>
</div>
แนะนำเพิ่มเติมว่า ถ้าเราใช้ Markdown และ HTML ร่วมกันปนๆกันไป อาจทำให้การแสดงผลไม่ถูกต้องได้ครับ หากจะใช้หลายๆฟังก์ชันร่วมกัน ควรใช้ Markdown หรือ HTML เพียวๆ ไปเลยครับ
ขอบคุณมากๆค่ะ
ขอบคุณนะคะ เป็นข้อมูลที่มีประโยชน์มากเลยค่ะ
ยอดเยี่ยมมากค่ะ 👏🏼👏🏼👏🏼
ขอบคุณสำหรับข้อมูลดีๆคับ ผมยังใหม่อยู่จะค่อยๆศึกษาและนำมาใช้ดู
ว้าว ขอบคุณครับผม ขอแชร์ไว้ศึกษาด้วยนะครับผม ^^
This post is nominated as a high-quality post and will run into the Thai High-Quality Post Contest for week #1. Also, it has received the nominate Label on the behalf of @thaiteam. This Label can be added to this post by editing but not on another post as it is a Label of quality owned by @thaiteam. Good Work.
โพสต์นี้ได้รับการเสนอชื่อ เป็นโพสต์ที่มีคุณภาพสูง และได้เข้าร่วมการแข่งขัน โพสต์คุณภาพสูงสำหรับสัปดาห์ที่ #1 นอกจากนี้ ยังได้รับฉลากเสนอชื่อในนามของ @thaiteam ป้ายนี้สามารถเพิ่มในโพสต์นี้ได้ โดยการแก้ไข แต่ไม่ใช่อยู่ในโพสต์อื่น เนื่องจากเป็นป้ายกำกับคุณภาพของ @thaiteam. เยี่ยมมาก!
ขอบคุณมากค่ะช่วยได้เยอะเลยจริงๆโพสนี้
ชอบมากค่ะ :-)
ตุ๊กติ๊ก
ขอบคุณมากค่ะ มีประโยชน์มากๆ
ขอบคุณสำหรับบทความดีๆ ค่ะ อยากตกแต่งเรื่องราวบน steemit ให้น่าอ่าน^^
ขอบคุณครับ กำลังงงเลยมือใหม่ครับ ช่วยได้มากมาย
ขอบคุณมากๆๆๆเลยค่ะ
Congratulations @aunununn! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Award for the number of upvotes
Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word
STOP
Congratulations @aunununn! You received a personal award!
Click here to view your Board
Do not miss the last post from @steemitboard:
Congratulations @aunununn! You received a personal award!
You can view your badges on your Steem Board and compare to others on the Steem Ranking
Vote for @Steemitboard as a witness to get one more award and increased upvotes!