Yazılarınızı Sütunlara Bölün
[ Okuma süresi tahmini 2 dakikadır ]
Yazılarınızı postlarınızı sütunlara bölmek okunmasını kolaylaştırır. Özellikle masaüstü, pc, tablet üzerinde uzun yazılara uygularsanız sayfanız daha etkin bir yapıya sahip olacaktır.
CSS ile Sütun
Site yazılarınızı sütun halinde yayınlamanızın en kolay yolu elbette CSS. Bunu sağlayan CSS elementi column-count.
Örnek olarak bu yazının bu kısmı iki sütunludur.
column-count
Bu sitede kullandığım CSS column-count örneği şöyle;
.sutun{-moz-column-count:2;-webkit-column-count:2;column-count:2;
-moz-column-gap:3em;-webkit-column-gap:3em;column-gap:3em;
-moz-column-rule:1px solid #999;-webkit-column-rule:1px solid #999;column-rule:1px solid #999}
column-count:2 ile yazıyı iki sütuna bölmüş oluyoruz. Siz istediğiniz sayı ile yapabilirsiniz.
Ancak dikkat edilmesi gereken masaüstü yani oldukça geniş bir ekranda yazınızı 5 veya 6 sütuna kadar bölmek rahatsızlık vermese de tablet ve küçük ekranlarda sorun çıkarır. Okumayı kolaylaştıracağına daha kötü hale getirebilir. Bu sebeple sütunların belirli genişlikte ekranlara göre değişmesini sağlamalısınız. Başka bir değişle sütun kodunuzu CSS içinde Medya Sorgularınıza (CSS3 Media Queries) uygun yerleştirme yapmalısınız.
Ben işi çok çetrefilli hale getirmemek adına iki sütun ve bunları CSS dosyasında @media(min-width:40em) altında belirtiyorum. Böylece 40em genişliğinin altında yazılar tek sütun görünür. 40em genişliğinin üzerindeki ekranlarda ise iki sütun olarak görünmektedir
Özelliğin tüm tarayıcılarda çalışması için moz ve webkit tanımları da kullanılmalıdır. CSS kodunda kullanılan column-gap sütunlar arasındaki boşluğu ayarlamak için. column-rule ile de sütunların arasına çizgi desen vesaire yapabiliyoruz.
Sütun HTML Kodu
CSS dosyasında tanımladığımız class’ı yazılarımızda bir HTML kod ile göstereceğiz. Yoksa tarayıcı nereyi sütunlu göstereceğini bilemez.
Bunun için;
Sütunlara bölmek istediğiniz yazıyı <div class=sutun> ..... </div> içine almanız yeterli.
Hepsi bu kadar.