Web Sitenizin (Blog) Genişlik Değerleri Nasıl Bulunur? Adım Adım Ölçüm Rehberi

Bir blogun tasarımını özelleştirirken, yeni bir widget eklerken veya bento grid gibi modern yerleşimler uygularken en sık karşılaşılan sorunlardan biri alanların tam genişliğini bilmemektir. Yanlış hesaplanan piksel değerleri, kenar çubuğunun (sidebar) aşağı kaymasına veya başlığın (header) taşmasına neden olur.

Blogunuzun başlık (header), kenar çubuğu (sidebar) ve ana sütun (main content) genişliklerini hiçbir kod bilgisine ihtiyaç duymadan, tarayıcınızın yerleşik araçlarıyla nasıl bulabileceğinizi adım adım inceleyelim.

Adım Adım Blog Bileşenlerinin Genişliğini Bulma

Adım 1: İnceleme Aracını (Inspect Element) Açın

Web sitenizin genişlik kodlarına ulaşmanın en hızlı yolu tarayıcı geliştirici araçlarıdır.

Blogunuzun ana sayfasını Google Chrome, Edge veya Firefox tarayıcısında açın.
Klavyenizden F12 tuşuna basın veya sayfa üzerinde boş bir yere sağ tıklayarak İncele (Inspect) seçeneğine tıklayın.
Ekranın sağında veya altında bir kod penceresi açılacaktır.

Adım 2: Öğe Seçiciyi Aktif Hale Getirin

Geliştirici panelinin sol üst köşesinde bulunan ok simgesine (Öğe Seçici / Select Element) tıklayın. Bu araç, farenizi site üzerinde gezdirdiğiniz alanların arka plan kodlarını ve boyutlarını görmenizi sağlar.

Adım 3: Başlık (Header) Genişliğini Ölçün

Öğe seçici aktifken farenizi blogunuzun en üstündeki logo veya menü alanının (başlık) üzerine getirin.
Başlık alanının tamamını kapsayan mavi renkli şeride tıklayın.
Fareyi üzerinde tuttuğunuzda veya sağ paneldeki Computed (Hesaplanmış) sekmesine baktığınızda width değerini piksel (px) cinsinden görebilirsiniz. (Örn: 1200px veya tam ekran ise 100%).

Adım 4: Ana Sütun (Main Column) Genişliğini Bulun

Tekrar ok simgesine tıklayın ve bu kez yazılarınızın listelendiği ana içerik alanının üzerine gelin.
Genellikle <div class='main-outer'> veya <main> etiketine sahip olan bu bölgeye tıklayın.
Sağdaki CSS panelinde veya doğrudan görselin üzerinde beliren kutucukta ana sütunun net genişliğini not edin. (Örn: 750px).

Adım 5: Kenar Çubuğu (Sidebar) Genişliğini Tespit Edin

Son olarak ok simgesiyle sitenizin yan panelinin (popüler yazılar, arşiv, kategoriler vb. bulunduğu alan) üzerine gelin.
Genellikle <aside> veya class='sidebar' olarak adlandırılan bu bloğu seçin.
Bu alanın genişlik değerini de piksel olarak kaydedin. (Örn: 350px).

Önemli İpucu: Tasarımın bozulmaması için Ana Sütun Genişliği + Kenar Çubuğu Genişliği + Aralarındaki Boşluk (Margin/Padding) toplamının, blogun genel gövde (wrapper) genişliğine eşit veya ondan küçük olması gerekir.

blog genişliği bulma, sidebar ölçüleri, web tasarım rehberi

Konu İle İlgili Alternatif Başlıklar

Blogger Tema Genişliği Ayarlama ve Piksel Hesaplama
CSS ile Site Bileşenlerinin Boyutları Nasıl Öğrenilir?
Blog Tasarımında Sütun Genişlikleri Neden Önemlidir?
Tarayıcı İnceleme Aracı (Inspect) ile Sayfa Ölçüleri Bulma
Responsive Web Tasarımında Alan Genişliği Tespiti

Konu İle İlgili Anahtar Kelimeler

site genişliği ölçme, css element genişliği, blog header boyutu, kenar çubuğu px bulma, tarayıcı incele aracı, web sitesi piksel ölçer, blogger sayfa düzeni, responsive genişlik tespiti, html sütun genişliği, web tasarım ölçüleri,