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.

TAKİBE ALIN:

X (Twitter) Takip Edebilirsiniz: 
twitter.com/ssonmez

Bilimkurgu okumayı seviyorsanız,
Starbul ilginizi çekecektir. www.starbul.com

Youtube Kanalım: 
www.youtube.com/suleymansonmez 


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.

TAKİP İÇİN : Yazdığım Kitaplar | Youtube | Twitter | Instagram



12 YORUMLAR

  1. Sitenizin açılması uzun sürüyor. sağdaki facebook eklentisi bekletiyor galiba.
    Birinci denememde beklemekten vazgeçtim kapattım. ikinci denememde inat ettim bekledim açıldı.

  2. Şu anda yurtdışındaki diğer siteler de kesik kesik açılıyor. Sitemizle alakası yok yani olayın. Elbette site de yurtdışından yayın yapıyor o ayrı 🙂 Kısacası geçer bugünlük bir olaydır.

  3. Bu değişiklik estetik açıdan siteye çok bir şey katmamasına rağmen kaydırma hızını inanılmaz düşürüyor. Firefox’ta ciddi performans problemi yaşıyorum. Bence kapatmalısınız ya da kapatılabilir olmalı.

  4. Burak, ben birden fazla bilgisayarda Firefox ile denedim. Vistalı bir notebookta kaymada sorun yok. Windows XP yüklü bir Firefox’da yine gözle seçilmesi çok zor bir kayma dışında büyük bir sorun göremedim.

    Bunun üzerine daha eski bir bilgisayar buldum yaklaşık 5 yaşında ve onunla Firefox’la baktım söylediğin titremeyi görmeyi başardım.

    Bunun yanısıra bu bilgisayarlarda eski olan da dahil Internet Explorer ile titreme görmedim kaydırırken.

    Sizin bilgisayarınız eski değil yeniyse Firefox’unuz güncel mi bir bakabilir misiniz? En son sürümde bir sorun görünmüyor çünkü.

    Arkaplanı seçime dayalı kapatma olayını düşüneyim. Javascript çözümler gerekir bunun için.

    Görsel olarak ne kattığını anlayabilmek için widescreen / geniş ekranlarla bakmalısınız siteye. Gün geçtikçe ekranlar ve notebook ekranları widescreen oluyor. Bu uzun ekranlarda sağda ve solda boşluk kalıyor. Kimileri arkaplana tek bir renk ya da doku koyuyor. Ama bu şekilde anaresmi geniş ekranda izlerseniz göreceksiniz ki bazı LCD televizyonları ambilight özelliği gibi ekranda ne oynuyorsa arkalarından aynı rente duvarı aydınlatmaları gibi bir efekt oluyor. Ve pek çok olumlu dönüş aldım.

    Bir süre kullanalım. Eğer başka bir kullanım şekli bulursam sizin gibi düşünen okurlarıma da seçenek sunmak isterim elbette.

  5. Ben de sitem için bu çok beğendiğim özelliği kullanmak istiyorum ama nasıl yapacağımı tam anlamış değilim. z-index değerlerinde oynama yapmam mı gerekiyor? çünkü stil sayfasında 36 tane z-index var. Onun dışında hep eklentiler ile siteyi götürüyordum şimdi bu kodu aktarmam için hangi bölümü kullanmam gerekecek işin içinden çıkamadım, vaktinizi almazsam yardımcı olur musunuz? Teşekkürler.

  6. Yukarıdaki arkadaşların dedikleri gibi sitede aşırı yavaşlama söz konusu bu konuyu görüp girdim çok güzel düşünmüşsünüz ama sanırım sitenizi yavaşlatıyor sayfalarınız 10 sn buluyor açılması

  7. Berna Hanım, bu verdiğim kodları WP temanızda single.php de kullanmalısınız. Ama bu soruyu sorduğunuzda yola çıkarak bir uzmanla yapmanız gerektiğini düşünüyorum. Çünkü CSS ve PHP sizler için yeniyse elbette bir kaç cümle ile anlatılması imkansız.

    Engin Bey site yavaş değil. Facebook yavaş. Ne zaman Facebook grubunun üye listesini siteye eklesem “yavaş” deniyor. İşte siteden kadırdım. Test edebilirsiniz. Sanırım bir daha eklemeyeceğim. Ayrıca üstüne basarak söylüyorum. Bu sayfadaki hiçbir işlem kesinlikle site açılışını söylediğiniz kadar yavaşlatamaz. Çünkü o resim yazı içinde zaten yüklenmiştir.

  8. Ben demiştim ama – facebook sorun yapıyor diye. 🙂
    şimdi o takılma sorunu yok ancak sayfalar yeterince hızlı açılmıyor. bu yavaşlık google arşivlemelerinde sorun yapabiliyormuş diye öğrendim. hatta pagerank derecesine dahi olumsuz etkisi varmış.

    İyi bir optimizasyon şart. bunun için Yslow ve Page Speed eklentilerini mozilla’ya dahil edebilirsiniz. bunlarla yapacağınız analizler sonucunda “öncelikle yapılması gereken”leri öncelikle yapmalısınız.

    sitenize girenler değerli içerik sayesinde kolay kolay çıkıp gitmiyor ona da bakayım şunu da okuyayım diye uğraşarak bir hayli vakit geçiriyorlar. bu insanlara daha iyi hizmet sunabilmeniz için sayfa açılmalarındaki gecikmelere çözüm bulmanız iyi olur. hem google arşivlemelerinde google robotlarına büyük kolaylık sağlamış olursunuz.

  9. WP kullanmadım, otomatik ekletmek güzel ve kolay olmalı ama sadece bir sayfada istediğiniz nesnenin özelliklerini değişmek için java da kullanabilirsiniz. Nesneye id atadığınız sürece istediğiniz zaman ulaşarak değerleriniz değişebilirsiniz. Belki böyle bir şey arayan olursa, yaklaşık şöyle bir kod, dediğimi yapar

    document.getElementById(“ana_cerceve”).style.display = “block”;

  10. Süleyman Bey Merhaba,

    Siteniz gerçekten çok hoş ve yukarıda anlatılanları bende kendi sitemde uygulamak istedim yalnız konunun alt düzey bilgisi olanlar için pek anlaşılabilir olduğunu düşünmüyorum. Bu konuda daha detaylı bilgi verirseniz gerçekten çok mutlu olurum.

    Sitemde her konu resim içermekte, yalnız resim url’leri başka bir blogta yer almakta. Bu konuda rehberliğinize ihtiyacım var.

    Sitem: pozitifgazete .com

    Saygılarımla…

E. Ali için bir yanıt yazın

Yorumunuzu yazınız
İsminizi Yazınız