Sordum.net

Menu
  • Anasayfa
  • Forum
  • İletişim
  • Gizlilik İlkesi
  • Our Software

Web sayfa logosu cep telefonunda bulanık görünüyor

Velociraptor | 27/12/2016 | Web ve design | 3 yorum

Cep telefonunda site logosu bulanık görünüyor
Bir web sayfanız varsa her bir tarayıcıda görünümünü test etmeniz gerekirdi artık işler değişti her bir cihazda da test etmeniz gerekiyor , mesela cep telefonları ekranları yüksek çözünürlüklü olduğundan masaüstü


bilgisyarlarda normal görünen bir logo cep telefonlarının ekranlarında bulanık görünebiliyor , peki ama neden farklı görüntüleniyor ve Retina ready denen olay nedir ? Steve Jobs tarafından tasarlanan ve Apple'ın iPhone 4 ü ile hayatımıza giren bir kavramdır birim alanda daha fazla pixel kullanılarak netlik arttırılmaktadır böylece renkler ve görseller daha parlak daha canlı görünüyor , Aslında işin sırrı Retine ready cihazların resim boyutlarını iki katına çıkartmasında yatıyor işte tam bu noktada da web site logolarımızın cep telefonu ekranında bulanık görünmesi durumu oluşuyor , eğer logomuzu boyut büyümesin diye küçük tuttuysak yüksek çözünürlüklü ekranlarda (Genelde cep telefonları ekranları Full HD veya retine ready olabiliyor) resmin net bir şekilde görüntülenmesine yetecek pixel olmuyor ve bulanık bir görüntü oluşuyor

normal bulanık logo

Üstteki resim birebir cep telefonu ekranından kaydedilmiştir bu rahatsız edici bulanıklığı nasıl gidereceğiz derseniz çözümü basit : daha büyük boyutlu Logo resmi kullanarak . Temamızdaki logo boyutumuz 224 x 50 dir peki ama daha büyük boyutlu bir logo resmi kullanırsak tema bozulmaya uğramayacakmı derseniz ? hayır çünkü Css ile resmin boyutunun 224 x 50 olarak görünmesini sağlayacağız böylece fark sadece cep telefonu gibi yüksek çözünürlüklü ekranlarda ortaya çıkacak fakat normal bilgisyar ekranlarında hiçbirşey farkedilmeyecektir , işte adımları:

WordPress temasında logo bulanıklığını gidermek

hernekadar wordpress teması yazssak ta bu teknik tüm CMS lerde ve HTML de de geçerlidir hatta sayfa sonundaki örneği indirip HTML kodlarını da inceleyebilirsiniz.

1. FTP ile hostumuza bağlanalım ve tema dosyamızın içerisinde yaralan "header.php" ve "style.css" dosyalarını indirip Notepad ++ gibi bir metin editörü ile açalım.

2. Aşağıdaki kodları style.css dosyamızın sonuna ilave edelim

#logo-container img {
   max-width: 100%;
   height: auto;
}

Aşağıda kodların ilave edildiği style.css dosyası resmi görünüyor

css kodları

3. Şimdi header.php dosyasının içerisinde logomuzun yeraldığı kodları bulacağız ve bunları logomuzun orjinal boyutunu yansıtacak şekilde ayarlayacağız. Bunu tema dosyamızdaki logoyu sağ tıklayıp resmi yeni sekmede aç dedikten sonra aldığımız resim ismini header.php de aratarak bulduk , aşağıdaki resimde orjinal ve editli kodları görmektesiniz:

header php editli

Farkedildiği üzere "div id="logo-container" ile css dosyasındaki stili uyguluyoruz , birazdan photoshopta oluşturacağımız daha büyük boyutlu logonun bilgisayar ekranlarında farklı görünmemesini ise   width="224" height="50" kodları ile sağlamış oluyoruz.

4. Logo boyutumuz : 224 x 50 idi aynı logomuzu x2 boyutlarında oluşturacağız yani : 448 x 100 elbetteki burada eski logoyu büyütmeyeceğiz yeniden oluşturacağız veya daha büyük boyutlu aynı logoyu kullanacağız. Orjinal logomuzun iki katı büyüklüğündeki logoyu orjinalinin üstüne yazdırıp style.css ve header.php dosyalarını da Ftp den hostumuza atalım böylece logomuz cep telefonlarında aşağıdaki şekilde görünür hale gelecektir

logo retine ready oldu

Cep telefonu ekranı yüksek çözünürlükte olduğu için resmi büyüttüğünde bizim normal boyutunun iki katı büyüttüğümüz resmimiz bozulmaya uğramayacaktır , lütfen en baştaki normal resim ile son resmi karşılaştırınız. buradaki tek olumsuzluk olarak orjinal boyutu 16 kb olan resmin iki katı büyüğünü kullanınca boyutun 35 kb a çıkması söylenebilir fakat çokta fark oluşturmadığı için bulanık görünmesinden se az birşey büyük boyutlu resim kullanmak herzaman tercih sebebi olmalıdır. ilaveten logonun svg formatında kullanılması da denenebilir aşağıdaki örneğimizde logonun normal boyutlusu , Retina ready olanı ve svg olanı verilmiştiri.

Download


İlgili Yazılar

  • Photoshop'ta resmin Orta noktası nasıl bulunurPhotoshop'ta resmin Orta noktası nasıl b ...
    3 yorum | Şub 18, 2025
  • Wordpress Teması resimleri çoğaltmasınWordPress Teması resimleri çoğaltmasın
    2 yorum | Haz 9, 2025
  • Photoshop ile videodan animasyonlu gif oluşturalımPhotoshop ile videodan animasyonlu gif o ...
    3 yorum | Nis 11, 2018
  • Adobe Photoshop Ayarları nasıl yedeklenirAdobe Photoshop Ayarları nasıl yedeklenir
    2 yorum | May 12, 2025
3 Yorum Var
  1. Avatar for İdil
    İdil11/10/2018

    Gerçekten çok basit ve zekice bir yöntem. Çok işime yaradı, teşekkürler 🙂

  2. Avatar for Velociraptor
    Velociraptor27/12/2016

    Faydalı olmasına memnun oldum , yorum için teşekür ederim

  3. Avatar for Tuba
    Tuba27/12/2016

    Süper görünüyor.Ellerinize sağlık. Konu içinde teşekkürler. Gerçekten bulanık ve kötü idi. Logoları yeniledik artık. Bİlgiler için çok teşekkürler.

Yorum Ekle

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Captcha

  • Kategoriler

    • Windows 11
    • Windows 10
    • Windows 7
    • Genel Pc ipuçları
    • Internet ve Network
    • Ücretsiz Programlar
    • Pc Güvenlik
    • Microsoft Office
    • Scriptler
    • Web ve design
    • Email ve Chat
    • Hardware
    • Android ve Diğer sistemler

  • Son Yorumlar

    • Velociraptor | Intel Platform Cont ...
    • Nehir | Intel Platform Controller ...
    • Velociraptor | WordPress Teması re ...
    • TRWE_2012 | WordPress Teması resim ...
    • Velociraptor | MP3 çalar , Araba t ...
    • Müslüm | MP3 çalar , Araba teybi ...
    • Velociraptor | Windowsta Eski Foto ...
    • Velociraptor | Önceki windows sürü ...
    • Fatih | Önceki windows sürümüne na ...
    • sordum takipci ... | Windowsta Esk ...
    • Velociraptor | Önceki windows sürü ...
    • hayto | Önceki windows sürümüne na ...
    • Velociraptor | Ekran döndürme klav ...
    • Burak | Ekran döndürme klavye kısa ...
    • Velociraptor | Açılışta Explorer.e ...
    Google Translate Google Translate
     29 User online
     86 queries in 0,056 seconds.

    Genel Pc ipuçları

    Exploit protection ayarları nasıl yedeklenir

    Açıklardan yararlanma koruması ayarlarını yedekleyin

    Bir resmi Pdf ye dönüştür

    Windows ta bir resmi Pdf ye çevirelim

    Hesap makinasında koyu tema

    Hesap makinasında koyu temaya nasıl geçilir

    Vera Cryp ile verilerinizi korumaya alın

    Vera Cryp ile verilerinizi korumaya alın

    Windows 10 1909 yenilikleri

    Windows 10 1909 sürümü özellikleri

    esd yi iso ya çevirelim

    ESD dosyasını ISO formatına çevirelim

    COPYRIGHT © 2006-2025 Sordum.net. ALL RIGHTS RESERVED.
    • Ana Sayfa
    • Yazarlar
    • Hakkımızda
    • Yasal Uyarı
    Sitemizde çerezler kullanılmaktadır. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılırsınız.TamamAyrıntılar