Cách trang trí bài viết wordpress

Hẳn là đôi khi các bạn cũng gặp vấn đề với những theme trong suốt của WordPress vì nó khiến cho chữ trong bài viết trở nên khó đọc đúng không? Ngoài việc khắc phục điều này bằng cách thay những hình nền dễ nhìn hoặc tạo viền cho chữ thì các bạn cũng có thể tạo một hình nền riêng cho mỗi bài viết, giống như bài viết này của Sera chẳng hạn

Video 1. Thay đổi Ngôn ngữ blog và Ngôn ngữ giao diện

Bây giờ chúng ta sẽ đi vào từng nội dung chi tiết của bài này nhé

1. Tạo màu nền cho bài viết

Đầu tiên, đây là cách tạo màu nền cho bài viết, tức là tạo màu nền cho một đoạn văn bản hoặc toàn bộ bài viết [gồm nhiều đoạn văn bản hợp thành], không phải tạo màu nền cho kí tự, các bạn đừng nhầm lẫn nhé. Nếu các bạn vẫn chưa hiểu sự khác nhau thì hãy xem ví dụ sau:

a] Đoạn văn sử dụng code tạo màu nền cho kí tự:

Ra Hiết Hổ và Hoán Diện Nhân cả đêm lò dò trong cung, kéo nhau lên Đài Ngắm Sao nghỉ chân. Vạn Độc Vương và Đông Tử lên đài, hai tên dị nhân nấp vào một góc. Khi Vạn Độc Vương và Đông Tử hưởng ngoạn cảnh sao trời, hai tên này thưởng thức diễn biến của vở kịch tình iu trước mắt.

b] Đoạn văn sử dụng code tạo màu nền cho một đoạn văn hoặc toàn bộ bài viết:

Ra Hiết Hổ và Hoán Diện Nhân cả đêm lò dò trong cung, kéo nhau lên Đài Ngắm Sao nghỉ chân. Vạn Độc Vương và Đông Tử lên đài, hai tên dị nhân nấp vào một góc. Khi Vạn Độc Vương và Đông Tử hưởng ngoạn cảnh sao trời, hai tên này thưởng thức diễn biến của vở kịch tình iu trước mắt.

Các bạn đã thấy sự khác biệt chưa nào?

Tiếp theo, trước khi đi vào phần code, mình cần lưu ý các bạn điều này: Phần này và cả bài này mình sẽ hướng dẫn trên trình soạn thảo văn bản Cổ điển [Phiên bản 1]. Nếu các bạn không biết trình soạn thảo Cổ điển là gì thì hãy quay lại phần lưu ý ở đầu bài này để đọc. Trình soạn thảo Block-Editor có thể thực hiện được thao tác tạo màu nền [hoặc tạo hình nền đơn giản] cho bài viết bằng cách sử dụng khối Paragraph hoặc khối Cover. Tuy nhiên, điều bất tiện ở đây là các bạn không thể thay đổi được phông chữ và thêm bớt một số thuộc tính định dạng khác. Do đó, mình quyết định chỉ hướng dẫn các bạn thao tác trên trình soạn thảo Cổ điển mà thôi. Nhưng điều này không có nghĩa là không thể dùng code trong bài này trên trình soạn thảo Block-Editor. Hoàn toàn có thể nhé

Được rồi, giờ thì chúng ta sẽ đến với code tạo màu nền đầu tiên. Đây là code đơn giản nhất, các bạn xem nhé:

background: Đây là thuộc tính màu nền, mã màu của màu nền có thể dùng tên màu bằng tiếng Anh, mã HEX hoặc mã RGB. Ở đây mình khuyên các bạn nên dùng mã HEX đối với các màu không phải màu cơ sở, các bạn có thể xem và lấy mã màu ở ĐÂY nhé

padding: Thuộc tính này mình mặc định giá trị là 12px [đơn vị tính ở đây là px], các bạn có thể tăng lên hoặc giảm đi nếu muốn. Ở đây, mình sẽ không giải thích về padding theo khái niệm chính thống, hiểu một cách đơn giản thì nếu coi vùng màu nền của văn bản là một tờ giấy, thì padding chính là khoảng cách tính từ mép giấy vào đến phần nội dung văn bản. Để dễ hình dung, các bạn hãy xem hình minh hoạ sau đây:

Hình 1. Padding

font-family: Đây là thuộc tính định dạng phông chữ. Lưu ý: Không phải phông chữ nào cũng hiển thị được trên trình duyệt web, tốt nhất là các bạn chỉ nên dùng những phông chữ có sẵn trong hệ điều hành Windows thôi. Ba phông chữ mình khuyến khích các bạn nên sử dụng bao gồm: Times New Roman, Arial, Palatino Linotype. Đây là những phông chữ phổ biến và tương đối dễ chịu với người đọc cả trên máy tính lẫn điện thoại thông minh. Ngoài ra các bạn có thể thử dùng thêm phông Tahoma hoặc Verdana.

font-size: Đây là thuộc tính định dạng cỡ chữ, ở đây mình sẽ tính theo đơn vị pt [giống trong Microsoft Word]. Các bạn nên chọn cỡ chữ trong khoảng 14pt đến 18pt cho nội dung bài viết, không nên để cỡ chữ quá nhỏ hoặc quá to. Cá nhân mình thường dùng trong khoảng 14pt đến 16pt, đối với font Arial thì có thể là từ 12pt đến 16pt cũng được.

color: Đây là thuộc tính định dạng màu chữ. Cách dùng mã màu tương tự như với mã màu của thuộc tính background. Ở đây, mình mặc định màu chữ là màu đen [black]. Tuy nhiên, các bạn có thể quay lại giao diện trực quan để đổi màu chữ bằng cách bấm vào nút đổi màu chữ trên thanh công cụ cho dễ, không nhất thiết phải sao chép mã màu rồi thay vào code.

line-height: Đây là thuộc tính định dạng khoảng cách giữa các dòng, ở đây mình sẽ tính theo đơn vị pt. Tuỳ thuộc vào cỡ chữ mà các bạn có thể tăng, giảm giá trị của thuộc tính này. Ví dụ: Mình dùng phông Times New Roman, cỡ chữ 16pt thì line-height của mình sẽ rơi vào khoảng 20pt đến 22pt. Tóm lại là các bạn cứ chỉnh cho đến khi nào các bạn hài lòng thì thôi. Theme sẽ có line-height mặc định, nhưng nếu các bạn tăng cỡ chữ lớn hơn cỡ chữ mặc định của theme thì khoảng cách giữa các dòng có thể bị thu hẹp lại. Do đó, nếu không hài lòng với khoảng cách giữa các dòng như mặc định của theme, các bạn có thể dùng thuộc tính line-height trong code để sửa. Nếu muốn giữ nguyên khoảng cách giữa các dòng theo mặc định của theme, các bạn có thể xoá thuộc tính này hoặc điền giá trị là normal cho nó.

Bây giờ mình sẽ thay một đoạn code hoàn chỉnh cho các bạn xem nhé

Like this:

Related