Başlık Önüne Çizgi Nasıl Eklenir? CSS Örneği

Web sitemde Jannah Tema kullanıyorum. Genel olarak tema çok kullanışlı. Yine de bazı kişisel beğenilerime göre şekillendirmeler yapıyorum. Bunlardan biri de; Başlık Önüne Çizgi Ekleme.

Başlık Önüne Çizgi Eklemek için CSS border-left özelliğini kullanacağız. Tek bir taraf için (sağ, sol, alt, üst gibi) kenar çizgisinin stilini belirleyebilirsiniz.

Neden Başlığa Sol Çizgi Eklenmeli?

Günümüzde kullanıcı deneyimi, web tasarımının merkezinde yer alıyor. Okuyucuların sayfa içinde kaybolmasını önlemek ve içerik hiyerarşisini vurgulamak için başlık stiline dikkat edilmelidir. Başlığa sol çizgi eklemek, özellikle uzun içeriklerde bölümlerin net şekilde ayrılmasına yardımcı olur. Aynı zamanda sitenize modern ve profesyonel bir görünüm kazandırır.

Buna ek olarak, bu tür görsel unsurlar sayfada geçirilen süreyi artırabilir. Çünkü kullanıcılar net bölünmüş içerikleri daha kolay okur. Arama motorları da kullanıcı etkileşimini önemser. Dolayısıyla bu tür düzenlemeler, SEO performansınıza dolaylı olarak katkı sağlar.

Bu başlıkta olduğu gibi dikey çizgi istiyorsanız,

• border-left  sol çizgi
• border-right  sağ çizgi
• border-top  üst çizgi
• border-bottom  alt çizgi

Daha detaylı bilgiler için;

https://uzmanimakademi.net/css/css-border-ozelligi

https://www.w3schools.com/cssref/pr_border-left.php

Şuan Jannah tema için kullandığım css kod;

H2 Başlık

H3 Başlık

H4 Başlık

.entry h2 {

background-color:#ECF1ED;

border-left:9px solid #FFD700;

color:#072238;

font-weight: bolder;

padding-left:5px;

}

.entry h3 {

background-color:#ECF1ED;

border-left:9px solid #FFD700;

color:#072238;

font-weight: bolder;

padding-left:5px;

}

.entry h4 {

background-color:#ECF1E;

border-left:9px solid #FFD700;

color:#072238;

font-weight: bolder;

padding-left:5px;

}

Bu kodları ek css alanına yapıştırmanız yeterli olacaktır.

CSS Koduyla Başlık Stilinizi Kişiselleştirin

Aşağıda örnek olarak verilen CSS kodları sayesinde, başlıklarınıza sol çizgi ekleyebilir ve arka plan rengini değiştirerek öne çıkmalarını sağlayabilirsiniz. Dilerseniz çizginin kalınlığını, rengini veya konumunu da özelleştirebilirsiniz. Bu şekilde yalnızca estetik bir kazanç değil, aynı zamanda işlevsel bir düzen de oluşturmuş olursunuz.

.entry h2, .entry h3, .entry h4 {
background-color: #ECF1ED;
border-left: 9px solid #FFD700;
color: #072238;
font-weight: bolder;
padding-left: 5px;
}

teknopek.com
Bizi takip et! Yeni içerikleri kaçırma!
YOUTUBE | INSTAGRAM | FACEBOOK | X