Thêm CSS riêng cho một hoặc một nhóm hình ảnh trong bài viết

Có một tình huống khi viết bài thủ thuật WordPres là cái tông màu nền admin của WP chụp ảnh lên không hợp với tông nền trắng của nội dung. Hơn nữa khoảng cách giữa các phần tử cũng gần, nên ảnh chụp màn hình hay bị sát mép. Và để cải thiện điều này thì WordPress đã có sẵn phương án thêm CSS riêng cho một hoặc một nhóm hình ảnh trong bài viết.

Tức là bạn tạo riêng CSS cho một hoăc một nhóm hình ảnh KHÓ ĐẸP đó, cho sẵn vào CSS bổ sung, khi nào bài viết có ảnh đúng thể loại đó thì gán cho nó class CSS đã làm sẵn. Nó sẽ hiển thị theo phong cách khác với ảnh chèn mặc định, kết quả sẽ được như hình bên dưới. Ảnh dưới đây nếu chưa áp dụng CSS riêng nhìn nó thô, xấu và hoà lẫn vào nền bài viết, không được như vậy đâu ^^

Thêm CSS riêng cho một hoặc một nhóm hình ảnh trong bài viết
Thêm CSS riêng cho một hoặc một nhóm hình ảnh trong bài viết

Để áp dụng CSS riêng này thì bạn copy đoạn CSS dưới đây rồi dán vào phía trên cùng của CSS bổ sung của web bạn và lưu lại. Nếu bạn biết CSS thì có thể chỉnh lại màu viền, màu nền theo ý muốn.

+ Mẫu 1 chỉ có viền, không có nền, cái này coi như là ví dụ cơ bản về CSS riêng cho nhóm ảnh chứ không phải làm đẹp hơn. Muốn đẹp hơn bạn phải thêm tuỳ chỉnh vào nữa mới được.

img.anh-can-vien-bo-sung { border: 1px solid #ababab !important; }

+ Mẫu 2 có thêm nền và tạo thêm khoảng cách với ảnh gốc để ảnh gốc trông thoáng hơn, kết quả đạt được như ảnh đã minh hoạ ở trên.

img.anh-can-vien-bo-sung {
border: 1px solid #ababab !important;
padding: 0.5em;
background: #f0f0f1;
}

Sau khi thêm CSS bổ sung xong thì quay trở lại với trang chỉnh sửa bài viết >> nhấn chỉnh sửa ảnh cần thêm CSS >> chọn xổ mục Tùy chọn nâng cao >> Tại trường thông tin Lớp ảnh CSS bạn điền tên class (lớp của ảnh) là anh-can-vien-bo-sung như hình bên dưới >> nhấn vào Cập nhật >> Cập nhật/ lưu bài viết nữa là hoàn tất.

Thêm class đã tuỳ chỉnh CSS vào hình ảnh
Thêm class đã tuỳ chỉnh CSS vào hình ảnh

Ảnh minh hoạ thêm class ở trên cũng thô lắm, ảnh gốc nội dung bị sát mép viền, mình đã áp dụng css riêng cho nó mới được như vậy. Không biết bạn làm theo có được không và kết quả thế nào ^^ Thôi thì thủ thuật này cũng hay nhưng hơi kén người dùng. Nếu bạn thích cái này thì hẳn bạn là một ngừ thích làm đẹp blog, mời bạn để lại bình luận bên dưới để quẩy lên nào ^^

Tịnh Nguyễn
Admin

Mình hay vọc về WordPress, HTML & CSS để cải thiện trải nghiệm duyệt web trên Hocban.vn | Bạn có thể vào mục giới thiệuliên hệ để xem thêm thông tin chi tiết hơn nè.

5 4 đánh giá
Đánh giá bài viết
guest

0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận