Ngày 24 / Tiết phụ / Thời lượng 20 phút. Mục lục khóa 100 ngày làm web [tháng thứ 2].
Khu vực bài liên quan trong theme Astra còn có thể tùy chỉnh thêm khá nhiều nếu bạn nào quan tâm đến thiết kế.
—
Lưu ý: bạn nào có khiếu một chút về thiết kế thì hẵng chỉnh phần này, còn không các mặc định đã đủ ổn cho hầu hết chúng ta rồi. Các cái liên quan đến thiết kế như màu sắc chữ, màu nền, font chữ, cỡ chữ, vân vân nếu làm không khéo thì nó sẽ thành một thiết kế rất tệ, hoặc nhẹ thì thành ‘không giống ai’ (ừ thì không xấu, nhưng mà nó dị). Những phần liên quan sâu đến thiết kế thì cần bạn có ít nhiều kinh nghiệm. Tức là sau này khi bạn quen thuộc với website rồi, khu vực này có khả năng sẽ có ích nhiều hơn.
- Cụ thể để chỉnh sửa các thiết kế này, bạn vào Appearance > Customize > Blog > Single Post. Sau đó click sang tab DISIGN:
- Để chỉnh màu chữ cho dòng chữ ‘Bài liên quan’ bạn click vào biểu tưởng chỗ Section Title:
Sau đó bạn chọn màu tương ứng (có thể chọn các màu sẵn có ở các ô tròn, hoặc chọn màu bằng cách click chuột vào hình chữ nhật, cách cuối cùng là chọn màu dựa vào mã Hex mà bạn biết [chỗ 334155 ở cuối, bạn thay bằng số khác]):
- Để chỉnh màu nền cho cả khu vực bài liên quan bạn click vào biểu tượng chỗ Section Background:
Sau đó bạn chọn màu nền mong muốn (cũng có các lựa chọn tương tự phần trên):
- Để chỉnh màu văn bản cho tiêu đề bạn click vào phần Content Colors, tiếp đến chọn Text Color, rồi chọn màu bạn muốn:
- Để chỉnh font, cỡ chữ, độ đậm nhạt cho dòng chữ ‘Bài liên quan’, bạn click vào phần Section Title Font.
Trong đó, cái Font Family là kiểu font bạn muốn chọn. Font Weight là độ đậm nhạt của chữ. Font Size là kích cỡ chữ, để đơn vị PX (pixel) bạn có khả năng sẽ quen thuộc hơn.
- Để chỉnh font cho tiêu đề của bài viết, bạn click vào phần Post Title Font.
Ý nghĩa cũng tương tự phần trên. Ở đây nó có rất nhiều font trên Google font để bạn chọn lựa.
Sau một hồi thì tôi chỉnh được nó thành thế này (tôi chỉ chỉnh một chút về font, màu chữ, màu nền, riêng kích cỡ chữ thì giữ nguyên):
Bài tiếp: Sửa nội dung cho phần chân trang trong theme Astra