ปรับแต่งธีมลูก Luxeritas (style.css)
Luxeritas เป็นธีม Wordpress ที่ใช้งานได้ฟรีและใช้งานได้สูงในประเทศญี่ปุ่นในบล็อกนี้ ฉันจะแนะนำเนื้อหาการปรับแต่ง style.css ของธีมลูก
วิธีแก้ไขธีมลูกของ Luxeritas
มีสองวิธีในการแก้ไข style.css
1. เข้าสู่ "สไตล์ชีต: style.css" โดยตรง
หน้าจอการจัดการ: Luxeritas → แก้ไขธีมลูก → เลือกแท็ก “style.css”
เขียนโค้ดตามหลัง "/* ด้านล่าง เขียนสไตล์สำหรับธีมลูกตามที่คุณต้องการ */"
2.ป้อนข้อมูลใน "CSS เพิ่มเติม" ของการปรับแต่งรูปลักษณ์
หน้าจอการจัดการ: Luxeritas → ปรับแต่ง (รูปลักษณ์) → CSS เพิ่มเติม
ขอแนะนำเนื่องจากคุณสามารถดูผลการสะท้อนรหัสได้ในเวลาเดียวกับที่คุณป้อนรหัส
ปรับแต่งเนื้อหาของ style.css
ชื่อไซต์ตัวหนา
สำหรับผู้ที่กล่าวว่าข้อความมาตรฐานนั้นบางไปหน่อยและไม่ค่อยประทับใจ
/* ชื่อไซต์ */ #sitename { font-weight: bold;}
เพิ่มเงาที่ด้านล่างของแถบเมนูเพื่อให้ดูเหมือนวัสดุ
มันมีเงา...
มันจะเป็นนี้มันเป็นความแตกต่างเล็กน้อย แต่บรรยากาศของไซต์เปลี่ยนไปอย่างกะทันหัน
/*shadow ภายใต้ global nav*/ #nav { box-shadow: 0 2px 10px rgba(0,0,0,.2) }
สีโฮเวอร์ที่ไม่สามารถตั้งค่าได้จากการปรับแต่งรูปลักษณ์
สีโฮเวอร์มาตรฐานสำหรับชื่อบทความและบทความก่อนและหลังคือสีแดงฉันไม่คิดว่าจะมีรายการที่จะเปลี่ยนแปลงได้โดยตรงจากการปรับแต่งรูปลักษณ์
สี: คุณสามารถเปลี่ยนได้โดยใส่รหัสสีที่คุณชื่นชอบด้านล่างอย่างไรก็ตาม "#00b22f" เป็นสีเขียวอ่อนนอกจากนี้ ชื่อของบทความยังเป็นตัวหนาเพื่อให้อ่านง่ายขึ้น
/* ชื่อบทความ */ .entry-title a:hover{color:#00b22f;} .entry-title {font-weight: bold;} /* ก่อนและหลังบทความ */ #pnavi a:hover{color:#00b22f }
เปลี่ยนการ์ดบล็อกของคุณให้เป็นดีไซน์ Material
การ์ดบล็อกแบบนี้จะเสร็จสมบูรณ์เมื่อคุณเลื่อนเมาส์ไป มันจะฟู
/* การออกแบบการ์ดบล็อก */ a.blogcard-href { การขยาย: 0px; min-height: 102px; box-shadow: 0 2px 5px rgba(0, 0, 0, .13); การเปลี่ยน: .3s; .blogcard- href:hover { กล่องเงา: 0 4px 20px rgba(0,0,0,0.25); แปลงร่าง: translateY(-5px); } .blogcard-img { ขอบ: 0px 10px 0 0; p.blog-card-title { ขอบ: 5px 5px 5px 5px; } p.blog-card-desc { แสดง: ไม่มี; } p.blogcard-link { ชัดเจน: ไม่มี; ขอบ: 5px 0 5px 5px; หน้าจอและ (ความกว้างสูงสุด: 430px){ p .blogcard-link { แสดง: ไม่มี;
ฉันใช้หน้าต่อไปนี้เป็นข้อมูลอ้างอิง
ปรับแต่งบล็อกการ์ดของ Luxeritas ให้ลอยเหมือน SANGO
เปลี่ยนสีเลขหน้า
เช่นเดียวกับชื่อบทความ ยังคงเป็นสีแดงและไม่สามารถเปลี่ยนแปลงได้จากการปรับแต่งรูปลักษณ์ “#999999” ทำให้เป็นสีเทา
.pagination>.active>span, .pagination>li>a:hover{ พื้นหลัง: ไม่มี; สีพื้นหลัง: #999999;
นี่คือสิ่งที่ดูเหมือนหลังจากเปลี่ยน
แท็กคลาวด์ออกแบบใหม่
/* แท็กคลาวด์ออกแบบใหม่ */ .tagcloud a { border-radius: 3px; /* มุมโค้งมน */ padding-bottom: 1px; padding-left: 6px; padding-right: 3px; }
ฉันปัดมุมของแท็กและลดความกว้างของเส้นให้แคบลง
ลบช่องว่างใต้ชื่อบทความ
เมื่อฉันใส่โฆษณา google adsense ใต้ชื่อบทความ ฉันกังวลว่าช่องว่างระหว่างบรรทัดก่อนและหลังโฆษณาดูเหมือนจะใหญ่ หลังจากเอาขอบออกแล้ว ฉันสามารถติดตั้งให้เล็กที่สุดเท่าที่จะทำได้
/* ข้อมูล Meta (อัปเดต) ลบระยะขอบด้านล่าง */ .meta, .post .meta { padding: 5px 0; margin-bottom: 0px; } /* ลบระยะขอบด้านบนและด้านล่างบทความ */ .post- title-upper, . โพสต์ชื่อภายใต้ { ขอบด้านล่าง: 1px;
แค่นั้นแหละ