Css ile Başlıkların Düzenlenmesi

Bu paylaşımımda sitenize görsellik açısından ayrı bir hava katacak olan h taglarının css yoluyla görsel açıdan nasıl geliştirileceğini anlatıcağım.H tagları hem görsellk açısından hemde Seo açısından büyük öneme sahiptir.Arama motorlarının konularımızı gözden geçirmesi sırasında h1,h2,h3 gibi tagları ilk olarak göze aldığını biliyoruz,Seo dışında geliştirildiğinde sitemizede görsel açıdan büyük bir katkıda bulunur,Çünkü her paylaşımımızda yada menülerimizde mutlaka bulundurduğumuz bir etikettir heading tagları.

Bende bu paylaşımımda sizlere h taglarını nasıl görsel açıdan nasıl zenginleştireceğimizi anlatıcağım.
h taglarını kullandığımızda karşımıza çıkan görüntü genelde aşşağıdaki gibi seçtiğimiz bir fontla yazılmış,yüksek font değerlerine sahip bir görüntüdür;

Bizim yapmak istediğimiz ise bu basit yapıdan daha gelişmiş bir hale getirmektir başlıkları.Bunun için h taglarının css ayarlarında biraz değişiklik yapmamız yeterli olucaktır.Örnek olarak aşşağıda farklı başlık görüntülerine bakabilirsiniz.

ve unutmayalım sidebar’da bulunan başlıklarımızda birer h tagıdır,

Gördüğünüz gibi ufak tefek değişikliklerle heading tagları görsel açıdan sitemize ayrı bir güzellik katabilir.

Şimdi bu şekilde h taglarını nasıl yapabileceğimizi öğrenelim.

1 ve 2. örnekte cufon,sIFR tarzında uygulamalarla başlıklar daha kaliteli şekilde gösterilebilir.Ben bundan önceki blogumda cufon kullanmıştım fakat bu blogumda googlewebfonts yardımıyla farklı fontlar kullanarak başlıklarımı görsel açıdan değiştirdim.

Cufon kullanımı için Yakuter’in bu güzel yazısına bakabilir,
sIFR kullanımı için ise Fatih Hayrioğlu’nun bu paylaşımına göz atabilirsiniz.
Benim gibi başlıklara sahip olmak istersenizde googlewebfonts adlı paylaşımıma göz atabilirsiniz.

Şimdi gelelim kategorilerimizin başlıklarını nasıl düzenliyeceğimize,Her seferinde yukarıdaki 3 özelliği kullanmamız fark yaratmayabilir fakat benim menülerimin başında kullandığım h tagları görsel açıdan çok daha farklı olabilir.

Bunu uygulamak gayet basittir,tek sorun sizin yaratıcılığınız sonucunda photoshop tarzı programlarla tasarladığınız görüntüdür.
Şimdi gelelim tasarladığımız bir başlık stilini h tagına gömmeye,Bunun için h tagına background-image özelliği ekliyebiliriz.Örnek kullanıma göz atıcak olursak:

#sidebarsosyal h2
background-image: url("images/sociallist.png");
height: 47px;
width: 307px;
text-indent:-9999px;

Bu 4 satırlık css kodunda yaptığım şey sidebarsosyal adlı divin içinde bulunan h2 tagına socillist.png adlı arkaplan resmini atamak.Sonuçta text yerine belirlediğim resmi göstereceğim.Sonrasında hazırladığım resmin boyutunu kontrol edip height ve width değerlerinide buna göre girerek resim olarak belirlediğim bir imajı h tagımın içinde gösterebilirim.En son olarakta text-indent özelliğini kullanarak klasik h tagımızı(düz font olan) ekrandan yok edebiliriz.Kullanım olarak gördüğünüz gibi çok kolay fakat görsellik olarak sitemize apayrı bir hava kattığı açık olarak ortadadır.

Daha fazla kaynak için bu sitelere göz atabilirsiniz;

1. http://codex.wordpress.org/Designing_Headings
2. http://www.pixy.cz/blogg/clanky/rubberheaders/