Versión imprimible del blog via CSS

Aunque no sea una práctica muy común, hay personas que aún imprimen páginas de sitios en Internet; Así que, ¿por qué no facilitarles una versión imprimible de nuestro blog? Con ayuda de la regla @media podemos agregar un CSS específico para dispositivos de impresión.

Para mi blog, que usa la plantilla Sandbox, he definido estas reglas CSS en la versión imprimible:

@media print {
div#wrapper {width:100%;}

div#wrapper * {width:auto;}

div#header {
	height:auto !important;
	margin:0 !important;
	padding:0 !important;
}

#blog-title {
	text-align:center;
	margin:0 !important;
	padding:0 !important;
}

#wpcombar,#blog-description, div#footer, #wpstats, 
div.sidebar, #globalnav,.navigation {
	display:none !important;
	margin:0;
	padding:0;
}

div.container {
	margin:0;
	padding:0;
}


h2.entry-title { padding:0 !important; }

.comments { display:none; }

a,a:visited {
	color:black !important;
	text-decoration:none;
	border-bottom:1px dotted #333;
}

}

Fácilmente puede ser adaptado a otras plantillas sin necesidad de un plugin adicional. Básicamente hay que dejar el contenido real y ocultar aquellos elementos que no sean de importancia en la versión imprimible como:

  • La descripción del blog.
  • La navegación.
  • La barra lateral.
  • Los comentarios del post.
  • El formulario de envío de comentario.
  • El footer.

Puedes considerar eliminar paddings, colores y otros adornos en el texto innecesarios. Si imprimen alguno de los post de este blog, deber verse como similar a esto:

Versión imprimible de un post

Etiquetas: diseño, ,

4 thoughts on “Versión imprimible del blog via CSS”

  1. jajaja, yo soy de los que imprime páginas de la Web XD
    Es que en mi casa no tengo conexión a Internet y cuando me conecto por celular, es muuuuuuuuy lento. Así que mejor imprimo los artículos interesantes y me los llevo para leer por las noches… aparte que la vista descansa un poco más que leyendo desde el monitor 😉

Comments are closed.