CSS ile Blogger Başlık Düzenleme

Başlık yazının en önemli parçasıdır. Yazıda ilk dikkat edilen kısım başlıktır. Bazen bir başlık yazının okumanıza vesile olurken bazen de yazıyı itici bir hale dönüştürebilir. Emeklerinizin karşılığını alabilmek için yazılarınızın başlıklarına önem vermelisiniz.

Başlık açma yazının okunmasına yardımcı bir etkendir manasıyla. Başlık açmada mana dışında bir etken daha vardır. O etken de görselliktir. Öncelikle, yazı başlığının diğer yazılardan kolaylıkla ayrılabilmesi gerekir. Görsel olarak ilgi çekici bir bir başlık, mana ve içerik olarak dolu bir yazının en büyük destekçisidir. CSS yardımı ile blogunuzdaki yazı başlıklarını düzenleyebilirsiniz.

CSS ile Başlık Düzenleme
Başlıklarınızı görsel açıdan iyileştirmek istiyorsanız. Bunu az bir CSS bilgisi ile yapabilirsiniz. CSS ile başlık düzenlemek, değiştirmek mümkün. CSS ile başlık düzenlemek için gerekli olabilecek bazı temel bilgileri size birkaç örnek yardımı ile kısaca anlatmaya çalışacağım.

Bu örnekleri verirken baz aldığım tema, Minima teması olacak. Sizin temanız farklı ise örneklerdeki kodlar farklılık gösterebilir.

CSS örneklerinde temel noktamız '.post h3' olacak. .post h3 ardından gelen kodlar temanıza bağlı olarak farklı olabilir. Hazır bir tema kullanıyorsanız ilgili kodu bulamayabilirsiniz. Tema oluşturucusu kendine özgü isimlendirmiş olabilir.

Öncelikle temanızın yedeğini almanızı öneririm.

Arka Plan Renk Değiştirme ve Kenarlık Ekleme - CSS ile Başlık Düzenleme

Değişiklikleri alttaki kodda yapacağız;

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Yukarıdaki CSS kodları hakkında temel bilgiler;
font-size 140%; harflerin boyutunu belirlemenizi sağlar.
font-weight:normal; yazı karakteri normal, kalın, ince şeklinde düzenlemenizi sağlar.
line-height:1.4em; satırlar arası mesafeyi belirlemenizi sağlar.

Arka plan rengi eklemek ve kenarlık oluşturmak için üstteki koda bazı eklemeler yapılmalı. Örnek olarak arka plan rengi ve kenarlık eklenmiş alttaki kodu inceleyebilirsiniz;

.post h3 {

background:#EEFCFF;

border:1px inset #000000;
margin:.25em 0 0;
padding:0 5px 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Üstteki kodları eklediğinizde alttaki gibi görüntülenecektir;

Kırmızı kısım ile Başlık arka plan rengini değiştirilir. Farklı renkleri keşfetmek için Renk kodu aracını kullanabilirsiniz.

Mavi kısım ile Başlığa Kenarlık oluşturulabilir. Kenarlık (Border) için dikkat edilmesi gerekenler; 1px kenarlık kalınlığı, inset kenarlık türü, #000000 kenarlık renklerini şeklindedir. Kenarlık çeşitleri için W3Schools sitesinden yardım alabilirsiniz. Tüm kenarlıklar için CSS Border adresini ziyaret edebilirsiniz.

Dört Tarafı Farklı Renk Kenarlık

.post h3 {
background:#EEFCFF;

border-left: 3px solid #00FF00;

border-right: 3px solid #0000FF;

border-bottom: 3px solid #FFFF00;

border-top: 3px solid #FF0000;

margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Yukarıdaki kodda olduğu gibi border-left (Kenarlık Sol), border-right (Kenarlık Sağ), border-top (Kenarlık Üst), border-bottom (Kenarlık Alt) eklemeleri ile her bir kenarı farklı renklendirebilirsiniz. Örnek görüntüsü alttadır.

Üstteki örnekte dört farklı kenar için dört farklı renk kullandık. Sadece alt kenarlık gösterilebilirdi. Ya da herhangi bir kenarlık tek başına kullanılabilir. Hoş bir görüntü de sağlanabilir böylelikle.

Başlık Alanına Resim Ekleme - CSS ile Başlık Düzenleme

Alttaki resimde görebileceğiniz gibi Başlık Alanına Resim Ekleyebilirsiniz. Bu satırları yazarken hemen aklıma daha önce farklı yazarlar için başlık alanında farklı resimleri nasıl kullanılacağı ile ilgili yazı geldi. Merak edenler; buradan okuyabilir.

Yukarıdaki resme benzer bir başlık alanı oluşturmak için öncelikle yapılması gereken yazı alanının genişliğini öğrenmektir. Yazı alanının genişliğini temanızdan şu şekilde öğrenebilirsiniz;

#main-wrapper {
width: 410px;

Minima temasında yazı genişliği bu şekilde tanımlanmış. Sizin temanızda farklı olabilir.Bu neden önemli? Yükleyeceğimiz resmin genişliği, yukarıdaki belirtilen genişlikten büyük ya da küçük olursa görsellik açısından istenilen sonuç elde edilemez. Yüklenecek resmin genişliğini yukarıdaki yazı alanının genişliğine göre ayarlayın.

Şimdi, ilk verdiğim el değmemiş .post h3 CSS kodunu alttaki kod ile değiştirin.

.post h3 {
background: url(RESIM ADRESI); background-repeat:no-repeat;
height:60px;
margin:.25em 0 0;
padding:14px 40px 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

RESIM ADRESI yazan yere kullanmak istediğiniz resmin URL adresini girin. Resmi Picasa, Flickr, Photobucket, TinyPic gibi yükleyiciler yardımı ile yükleyebilirsiniz.
height: yüklenen resmin yüksekliği yazılır. Böylelikle resmin boyutu belirtilir.
padding: değerleri ile yazı başlığınızı resim içinde sağa, sola, yukarı, aşağı hareket ettirebilirsiniz.

Başlık Rengi Değiştirme - CSS ile Başlık Düzenleme

CSS ile başlık renginizi de değiştirebilirsiniz. Bunun için yapmanız gereken; temanızda bulunan alttaki kodun yerine;

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Örneğin alttaki kodu kullanabilirsiniz;

.post h3 a, .post h3 a:visited, .post h3 strong {
display:display;
font-size: 1.5em;
font-style: italic;
letter-spacing: -1pt;
word-spacing: 3pt;
line-height: 0.9;
color:#B20000;
font-weight: bold;
}

.post h3 strong, .post h3 a:hover {
color:#00CC00;
}

Yukarıdaki örnekteki kodu blog temanıza eklerseniz, alttaki resimdeki gibi başlığınızı düzenlemiş olursunuz. Alttaki resimde; üstte normal görünüm, altta ise mouse ile yazı başlığının üstüne geldiğinizde (hover) değişecek rengi görebilirsiniz.

Daha farklı örnekler de verilebilir. Ama konu tahminimden çok uzadı. CSS hakkında çok daha detaylı bilgiye ulaşmak için daha önce sizlere bahsettiğim W3Schools sitesinin CSS Tutorial bölümünden yardım alabilirsiniz.

Son yorumlarda benzer sorular aldığım için böyle bir yazı yazmayı uygun gördüm. Umarım, CSS ile Başlık Düzenleme yazısı faydalı bir yazı olmuştur. Bundan sonrasını, varsa sizlerin yorumlarınız ile şekillendirmek gerek. Merak ettiğiniz noktalar varsa lütfen yorumlarda belirtin.

Kolay Gelsin...