Yazılarınızın Tabanına Konu Resmi

Sitede birkaç değişiklik daha yaptım. Artık girdiğiniz sayfada arkaplanda o yazının kendi görseli sayfayı kaplıyor. Bunu yaparken pek de kaynak bulamadım. Çoğu kişi yapılamayacağını veya Javascript kodlama gerektiğini söylüyordu. Basit ve etkin bir kod yazdım ben de. Birilerinin işine yarayacağını düşünerek ekliyorum

gtiarkaplan

Aşağıdaki kodu CSS bilenler incelediklerinde görecekler ki sayfadaki her elemetin altında kalan bir div tanımlıyoruz. Bunun için style içinde z-index değerini -1 yaptım. Position değerlerini sabitledim ve sonrasında içine bir resim ekledim.

Bu resmi her bir yazı için nereden alıyorum? WordPress kullanıcıları yazı yazdıkları editör ekranında kendilerine saklama alanları yani custom field açıp kullanabilirler. Birkaç yıl önce her yazımın resimle daha etkili olduğunu görüp resim eklemeye başlamıştım ve yaziresmi adında bir custom field açarak her yazı için, bu alana seçtiğim resmin sadece adını .jpg yazmadan eklemiştim. İşte sonunda kullanmak için bir yer çıktı:) Eğer bu değer doluysa php koduyla buraya getiriyorum.




Resmin gözü fazla almaması ve büyütüldüğünde oluşacak kırıklıkları, pixelleşmeyi çözmek amacıyla görünürlüğünü azaltıyorum. (opacity kodlarıyla)
Son olarak sitede kullandığım resimlerin çevresinde bir çerçeve oluyor. Bu büyütünce görünmesin diye resmi %110 büyüttüm ve bir miktar yukarı bir miktar sola çekmek için margin değerlerine -3% değerleri girdim.

Eğer bu tabana resim getirme işinin anasayfanızda ve diğer sayfalarınızda değil sadece konu sayfalarınızda olmasını isterseniz WordPress temanızda kodu şöyle kullanmalısınız.




Sonuç benim hoşuma gitti. Artık sitedeki yazıların pek çoğunda arkaplana resim geliyor ve daha şık ve orijinal bir site görünümü oluşuyor. Resim alanını boş geçtiğim yazıları rastladıkça dolduruyorum.

Bu yazı daha çok kodlamayı sevenler için oldu. Ama siz de farkındasınız sitede onlarca kategori var. Zaten siteyi böyle, fil bacaklı, tavus kuşu kuyruklu, ceylan bakışlı, kaplan pençeli blog yapan da bu! 🙂

Friendfeed’de konu üstüne tartışmıştık. Javascript çözümler vb.
http://friendfeed.com/suleymansonmez/943468a4/soraym-size-css-ile-tek-bir-fotograf-body

Not: Elbette bu sayfanın tabanı kendisini tekrarladığı için biraz komik oldu:) İdare edelim lütfen:) En iyisi bir başka konuya tıklayarak örneği daha iyi görmektir.

Not 2: Bunu eklemek site açılış hızını etkilemez. Çünkü zaten yazı içinde yüklenen bir resmi çekiştirerek büyük gösterme üzerine dayalı bir tekniktir.

PAYLAŞ: