วิธีแสดงงานเขียนของคุณให้โดดเด่น: 3 เคล็ดลับการจัดสไตล์ CSS
เผยแพร่แล้ว: 2022-03-22งานเขียนของคุณเป็นจุดศูนย์กลางของบล็อกของคุณ
เนื้อหาเป็นราชาใช่ไหม
เป็นสิ่งที่ดึงดูดผู้คนและทำให้พวกเขาอ่านบล็อกของคุณ
แต่สิ่งที่สำคัญไม่แพ้กันก็คือการแสดงผลงานเขียนของคุณอย่างแท้จริง ทางสายตา กล่าวคือ
เนื้อหาของคุณอาจยอดเยี่ยม แต่ถ้ามันยากสำหรับบางคนที่จะอ่าน คุณอาจจะสูญเสียผู้อ่านมากกว่าที่คุณคิด
ฟังนะ ฉันไม่ใช่นักเขียนฝึกหัด แต่ฉันเป็นนักออกแบบเว็บไซต์และรู้ว่าอะไรดูดี และสิ่งที่ดูดีมักไม่เกี่ยวกับการตกแต่งและรสชาติมากนัก แต่เกี่ยวกับสิ่งที่ใช้ได้ผลและสิ่งที่ทำให้อ่านและทำความเข้าใจได้ง่าย
ฉันได้ศึกษาวิธีต่างๆ ในการแสดงเนื้อหาในรูปแบบดิจิทัลมาหลายปีแล้ว ดังนั้นฉันจึงต้องการแสดงวิธีที่รวดเร็วและง่ายดายเพื่อให้มั่นใจว่าเนื้อหาของคุณจะแสดงอย่างสวยงามในโพสต์บล็อกจากมุมมองของนักออกแบบเว็บไซต์
มีสองสามวิธีที่คุณสามารถปรับแต่งสไตล์อย่างรวดเร็วให้กับบล็อกของคุณโดยใช้ CSS (Cascading Style Sheets) เล็กน้อย เพื่อให้คุณซึ่งเป็นผู้เขียนสามารถแสดงเนื้อหาของคุณและทำให้ผู้อ่านเพลิดเพลินไปกับมันได้ง่ายที่สุด
ฉันจะให้รหัสการปัด CSS สองสามตัวแก่คุณซึ่งคุณสามารถเพิ่มลงในสไตล์ชีตที่กำหนดเองและแก้ไขตามที่คุณต้องการ ทำตามคำแนะนำเกี่ยวกับวิธีการแก้ไข CSS ในบล็อกของคุณ หากคุณไม่แน่ใจว่าจะเข้าถึงสไตล์ชีตที่กำหนดเองของบล็อกได้อย่างไร
เคล็ดลับสามประการในการจัดรูปแบบเนื้อหาเพื่อแสดงงานเขียนของคุณ
ทำให้ย่อหน้าของคุณสวยขึ้น
เพื่อให้แน่ใจว่าย่อหน้าของคุณอ่านง่าย ต่อไปนี้คือเคล็ดลับที่ควรคำนึงถึง เราจะใส่สไตล์แท็ก p (ย่อหน้า) ที่นี่ด้วยกัน
- เลือกฟอนต์ที่สบายตา ตั้งเป้าไปที่ฟอนต์ serif หรือ sans serif ไม่ใช่ฟอนต์ที่เขียนด้วยลายมือ
เลือกน้ำหนักที่ไม่บางเกินไป ฟอนต์บางๆ บางตัวอาจดูไม่ค่อยดีนักในเบราว์เซอร์และระบบปฏิบัติการบางระบบ (เช่น mac หรือ PC) ดังนั้นขอให้คนอื่นตรวจสอบให้คุณและยกนิ้วให้
ในขณะเดียวกัน ให้เลือกแบบอักษรที่ไม่หนาเกินไป คุณต้องการให้มีความคมชัดเพียงพอกับข้อความที่เป็นตัวหนา
เมื่อเลือกแบบอักษร ตรวจสอบให้แน่ใจว่าคุณใช้แบบอักษรของระบบ แบบอักษรที่คุณอัปโหลดไปยังไฟล์บล็อกของคุณ หรือแบบอักษร Google ฉันขอแนะนำให้ใช้แบบอักษรของ Google เพราะมันฟรี มีความหลากหลายมากที่สุด และใช้งานง่ายที่สุด สำหรับรายละเอียดเพิ่มเติม โปรดดูวิธีใช้ฟอนต์เจ๋งๆ ในบล็อกของคุณ
เมื่อคุณเลือกแบบอักษรแล้ว คุณจะไปที่สไตล์ชีตที่กำหนดเองและเพิ่มโค้ดนี้:
<pre>
พี {
ตระกูลแบบอักษร: INSERT FONT NAME;
}
</pre>
- ใช้ขนาดตัวอักษรที่อ่านง่ายบนหน้าจอขนาดใดก็ได้ ตรวจสอบบล็อกของคุณทางโทรศัพท์และตรวจดูให้แน่ใจว่าข้อความไม่เล็กเกินไปสำหรับดวงตาที่เหนื่อยล้าหรือผู้สูงอายุ
ขนาดที่เหมาะสมสำหรับย่อหน้ามักจะ 14 ถึง 16px ฟอนต์บางตัวอาจไม่แสดงเหมือนกันในขนาดเดียวกัน ดังนั้นลองเล่นกับฟอนต์เหล่านั้นเพื่อดูว่าฟอนต์ใดดูดีที่สุด
<pre>
พี {
ตระกูลแบบอักษร: INSERT FONT NAME;
ขนาดตัวอักษร: 16px;
}
</pre>
- ใช้ความสูงของเส้นที่เหมาะสม (นำหน้า) ความสูงของบรรทัดที่เหมาะสมยังช่วยให้อ่านง่ายอีกด้วย เนื่องจากทำให้มีที่ว่างสำหรับย่อหน้าของคุณ ความสูงของบรรทัดที่ดีคือ 1.5 หรืออีกนัยหนึ่งคือ 1.5 เท่าของขนาดของข้อความ (ความสูงของบรรทัดที่ 2 จะเว้นระยะห่างสองเท่า)
<pre>
พี {
ตระกูลแบบอักษร: INSERT FONT NAME;
ขนาดตัวอักษร: 16px;
ความสูงของเส้น: 1.5;
}
</pre>
- หลีกเลี่ยงข้อความสีดำล้วนบนสีขาว มันยากต่อสายตา แทนที่จะเลือกใช้สีเทาเข้ม (ฉันชอบ #333333) สำหรับสำเนาของคุณเพื่อลดคอนทราสต์เล็กน้อย
<pre>
พี {
ตระกูลแบบอักษร: INSERT FONT NAME;
ขนาดตัวอักษร: 16px;
ความสูงของเส้น: 1.5;
สี: #333333;
}
</pre>
- หลีกเลี่ยงการจัดย่อหน้าให้อยู่ตรงกลาง การจัดวางสำเนาร่างกายของคุณให้อยู่ตรงกลางนั้นดูเป็นมือสมัครเล่นและทำให้อ่านยากขึ้น ทำไม? ทุกครั้งที่ดวงตาของคุณเคลื่อนไปยังบรรทัดใหม่ จะต้องพยายามหาจุดเริ่มต้นของบรรทัดถัดไป เพราะมันไม่เคยอยู่ที่จุดเดิม จัดแนวกึ่งกลางสำหรับบทกวี คำอธิบายภาพ หรือข้อความสั้นๆ ที่ดึงดูดความสนใจ แล้วเลือกไปทางซ้าย การจัดแนวหรือปรับย่อหน้าปกติของคุณ ข้อความที่จัดชิดขอบมีระยะห่างเพื่อให้ทั้งด้านซ้ายและด้านขวาของย่อหน้ามีขอบตรง
<pre>
พี {
ตระกูลแบบอักษร: INSERT FONT NAME;
ขนาดตัวอักษร: 16px;
ความสูงของเส้น: 1.5;
สี: #333333;
text-align: จัดชิดขอบ;
}
</pre>
<pre>การจัดแนวข้อความ: ซ้าย; </pre> เป็นการทำงานเริ่มต้นและไม่จำเป็นต้องระบุ เว้นแต่คุณจะต้องแทนที่สไตล์ก่อนหน้า
- สุดท้ายเพิ่มพื้นที่สีขาว คุณจะต้องมีช่องว่างเพียงพอระหว่างย่อหน้าเพื่อให้อ่านง่ายที่สุด หลักการที่ดีคือการเพิ่มระยะขอบด้านล่างแต่ละย่อหน้าให้เท่ากับขนาดตัวอักษรของคุณประมาณสองเท่า
<pre>
พี {
ตระกูลแบบอักษร: INSERT FONT NAME;
ขนาดตัวอักษร: 16px;
ความสูงของเส้น: 1.5;
สี: #333333;
text-align: จัดชิดขอบ;
ระยะขอบล่าง: 32px;
}
</pre>
ใช้ลำดับชั้น
คุณใช้ลำดับชั้นเมื่อคุณร่างโพสต์โดยใช้หัวเรื่องและหัวเรื่องย่อย
ในการสร้างลำดับชั้นภาพในโพสต์ของคุณ ให้จัดรูปแบบหัวเรื่องและหัวเรื่องย่อยเพื่อให้ง่ายต่อการแยกความแตกต่างระหว่างกัน นี่คือเคล็ดลับบางประการ:
- ใช้แบบอักษรเดียวกันสำหรับหัวเรื่องทั้งหมดที่มีขนาดต่างกัน
- ใช้แบบอักษรที่อ่านง่าย เช่น แบบอักษร serif หรือ sans serif คุณอาจเลือกใช้แบบอักษรเดียวกันกับตัวสำเนาของคุณโดยมีน้ำหนักที่หนาขึ้น หรือคุณอาจเลือกแบบอักษรอื่นที่ตัดกับตัวสำเนาของคุณได้อย่างดี
- ตั้งค่าหัวเรื่องและหัวเรื่องย่อยให้เป็นตัวหนาหรือหนักกว่า
- ใช้ Typecast เพื่อเล่นกับแบบอักษร ขนาด และน้ำหนักที่แตกต่างกันสำหรับส่วนหัวของคุณและเปรียบเทียบกับข้อความในย่อหน้าของคุณ
ต่อไปนี้คือตัวอย่างสิ่งที่คุณอาจใช้สำหรับการปรับขนาดหากย่อหน้าของคุณกำหนดขนาดแบบอักษรเป็น 16px จากนั้นคุณจะขึ้นไปจากที่นั่น:
- h6 headings = 16px (ปกติจะมีขนาดเท่ากับข้อความในย่อหน้า แต่ตัวหนาและอยู่ในบรรทัดของตัวเอง)
- h5 ส่วนหัว = 18px
- h4 ส่วนหัว = 22px
- h3 ส่วนหัว = 26px
- h2 ส่วนหัว = 30px
- h1 headings (ชื่อบทความในบล็อกของคุณ) = 36px
อีกครั้ง เล่นกับ Typecast เพื่อดูว่าอะไรดูดีที่สุดในสายตาคุณ เมื่อคุณตัดสินใจเลือกแบบอักษรและขนาดที่ต้องการใช้สำหรับส่วนหัวแล้ว คุณจะต้องไปที่สไตล์ชีตที่กำหนดเองและเพิ่ม CSS นี้สำหรับส่วนหัวทั้งหมด:
<pre>
h1, h2, h3, h4, h5, h6 {
ตระกูลแบบอักษร: INSERT FONT NAME;
ขนาดตัวอักษร: 36px;
font-weight: ตัวหนา;
}
</pre>
ถัดไป คุณจะต้องเพิ่มการแทนที่ CSS เพื่อเปลี่ยนขนาดสำหรับส่วนหัวแต่ละระดับ:
<pre>
ชั่วโมง2 {
ขนาดตัวอักษร: 30px;
}
ชั่วโมง3 {
ขนาดตัวอักษร: 26px;
}
ชั่วโมง4 {
ขนาดตัวอักษร: 22px;
}
h5 {
ขนาดตัวอักษร: 18px;
}
h6 {
ขนาดตัวอักษร: 16px;
}
</pre>
ใช้ลิงก์
อย่าให้ผู้อ่านคิด! ลิงก์ของคุณควรมีลักษณะเหมือนลิงก์ ซึ่งหมายความว่าควรชัดเจนว่าเป็นสิ่งที่ต้องคลิก ต่อไปนี้คือสองสามวิธีในการทำเช่นนี้:
- เลือกสีสำหรับลิงก์ที่ตัดกับข้อความปกติของคุณ
- จองสีเดียวสำหรับลิงค์ของคุณ อย่าใช้สีเดียวกันนี้สำหรับหัวเรื่อง หัวเรื่องย่อย ชื่อวิดเจ็ตแถบด้านข้าง หรือข้อความอื่นๆ
- อย่างไรก็ตาม คุณสามารถใช้สีนี้สำหรับปุ่มได้หากต้องการ เนื่องจากเป็นองค์ประกอบที่คลิกได้
- อย่าขีดเส้นใต้ข้อความที่ไม่ใช่ลิงก์ เพราะอาจทำให้สับสนได้ เนื่องจากผู้คนมักถือว่าข้อความที่ขีดเส้นใต้เป็นลิงก์
<pre>
ก {
สี: ชมพู;
ตกแต่งข้อความ: ขีดเส้นใต้;
}
</pre>
จัดรูปแบบสถานะลิงก์ต่างๆ เพื่อช่วยให้ผู้อ่านของคุณแยกความแตกต่างเป็นลิงก์ การให้พวกเขาเปลี่ยนลักษณะที่ปรากฏเมื่อผู้ใช้วางเมาส์เหนือพวกเขาเป็นการบ่งชี้เพิ่มเติมว่าเป็นลิงก์ที่ทำงานอยู่
<pre>
เป็น: โฮเวอร์ {
สี: ฟ้า;
ตกแต่งข้อความ: ไม่มี;
}
</pre>
คุณยังสามารถเลือกจัดรูปแบบลิงก์ที่เข้าชมของคุณให้แตกต่างออกไปเพื่อระบุให้ผู้ใช้ทราบว่าได้เข้าชมลิงก์บางลิงก์แล้ว
<pre>
: เยี่ยมชมแล้ว {
สี: ฟ้า;
}
</pre>
การแสดงงานเขียนของคุณให้ดูโดดเด่น ใช้เวลาแก้ไขง่ายๆ เพียงไม่กี่ครั้ง
นี่เป็นเพียงเคล็ดลับเล็กน้อยในการแสดงงานเขียนของคุณเพื่อให้อ่านง่าย และช่วยให้เนื้อหาของคุณโดดเด่น!
มีวิธีอื่นใดในการจัดวางโพสต์ในบล็อกเพื่อให้ผู้ใช้ของคุณอ่านได้ง่าย
คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการใช้ประโยชน์จาก CSS เพื่อทำให้บล็อกของคุณน่าสนใจยิ่งขึ้นสำหรับผู้อ่านของคุณและแสดงงานเขียนของคุณจริงๆ หรือไม่? สุดยอด! ถ้าอย่างนั้น ฉันอยากให้คุณเข้าร่วมการฝึกอบรมวิดีโอฟรีเกี่ยวกับ CSS กับฉัน เริ่มเร็ว ๆ นี้ดังนั้นสมัครเลย
ได้รับความอนุเคราะห์จาก Pixabay