Blog Yazısı Görünümünü Değiştirme

Önceki yazıda main yapımını gerçekleştirmiştik. Bu yazıda ise blog yayınlarının görünümünü değiştireceğiz. Görünümü düzenlemeye başlamadan önce blogumda örnek bir yayın oluşturup, yayınlıyorum. Blog yayınına ait görünüm en başta aşağıdaki gibi olacaktır.

Oldukça çirkin bir görünüme sahip olduğunu görebiliyoruz. Burada CSS yeteneklerimiz devreye giriyor. Yazı içeren sınıf seçicisine padding vermeliyiz, bu sayede yazılar kenarlara bitişik olmayacaktır. Aynı şekilde yazı içerik fontunu değiştirmeliyiz tıpkı navbar ekleme ve düzenleme dersinde yaptığımız gibi. Tarih yazısını "14 Temmuz 2018 Cumartesi" ise kaldırmalıyız zaten yazının post-footer bölümünde zaman bilgisi verilmekte. Bu istenilenlere göre CSS kodunu yazmaya başlayalım.

.main-area{
 padding: 20px 40px;
 font-family: 'PT Sans', sans-serif!important;
 line-height:23px;
 font-size: 16px;
}

.main-area h3.post-title{
 margin-bottom: 30px;
 margin-top:20px;
}

h1, h2, h3, h4, h5, h6{
 font-weight:700;
}

h2.date-header{
 display: none;
}

Bu işlemlerden sonra görünüm şu hale gelecektir.

Daha düzenli bir hale geldiğini görebiliriz. Son işlem olarak post-footer kısmını düzenlemeliyiz. Sadece link renklerini değiştirip, aralarına belli bir mesafe ayarlayacağım. Gönderen ile zaman arasına 20px mesafe koyacağım, etiketleri ise kutu içerisine alacağım.

.post-footer-line-1{
 border: 1px solid #555;
 background: rgba(255, 255, 255, 0.5);
 padding: 5px;
 margin: 30px 0 10px 0;
}

.post-footer-line-1 a{
 color:#555;
}

.post-footer-line-1 span{
 margin-right:20px;
}
.post-labels a{
 border:1px solid #555;
 padding: 3px;
 background: #ccc;
 color:#555;
}

Yukarıdaki gibi bir görüntü elde ettik. Bir sonraki yazıda temanın ana sayfasında yer alacak olan blog yayınlarının görünümünü değiştireceğiz. Bu dersin sonuna kadar yazılan tema kodu için tıklayınız.