Como Evitar Que Suas Imagens Invadam a Sidebar

No post Quer Melhorar a Visitação do Seu Blog? Mantenha a Casa Em Ordem o Profº Bauru deixou um comentário falando de várias questões relacionadas ao assunto. Vou escrever sobre elas, pois creio que são dilemas que muitos de vocês enfrentam.

Começo pela questão mais simples: as imagens.

No caso do layout, a largura das colunas é um problema. Já usei diversas e, invariavelmente, usava imagens nessas larguras. Hoje, creio que cheguei numa largura interessante, mas tenho imagens desconfiguradas, às vezes, invadindo um pouco a área da sidebar.

Esse é um problema realmente chato, pois passa ao leitor uma impressão de desleixo com o blog – mesmo quando isso não é verdade.

Como Resolver o Problema de Imagens Invadindo a Sidebar

Você pode fazer isso com CSS. Para usar esta dica, você precisa entender um pouquinho de CSS e HTML. Só um pouquinho, mesmo. 😉

Procure no código fonte do seu template ou theme a div html dos posts. Se você olha o código fonte de um post, vai ver que ele tem um div logo antes do título, algo parecido com isto:

<div class='post'>

No lugar de "post" você pode ter outra coisa; "post-body", por exemplo. O importante é que você encontre a div que contém seus posts. Isso feito, procure essa div no CSS do seu blog. Quando encontrá-la, adicione esta linha ao CSS dessa div:

overflow: hidden;

Essa linha de CSS "esconde" a parte de um elemento do post que exceder sua largura. Não é a solução mais elegante de todas, pois ele simplesmente "corta" a imagem no tamanho do post; mas sem dúvida isso é melhor do que ter a imagem "escapando" para o lado da sidebar.

Como Evitar Que As Imagens Invadam a Sidebar

Há uma forma muito simples de nunca ter esse problema.

Ao trocar de layout, escolha sempre templates que tenham a mesma largura nos posts, ou que tenham uma largura maior que o template anterior.

Fazendo isso você garante que sempre terá espaço para as imagens dos posts mais antigos. 😉

Image: Tim Snell– CC By-Nd