El de hoy sirve para cuando aplicamos determinado estilo a los enlaces y ese mismo estilo nos aparece de manera no deseada en una imagen que a su vez tiene un enlace a otra a tamaño original. Esto es lo que suele pasar cuando subimos una imagen en Blogger o cuando usamos algún tipo de lightbox para poder ampliarlas a demanda.
En la imagen de la izquierda podéis ver lo que ocurriría con una imagen con enlace si estos los tenemos definidos con un fondo rojo. Ese cerquillo alrededor de la foto es lo que NO queremos que se vea.
Esto ocurriría con un código como este:
a {background: red;}
<a href="URL_IMAGEN"><img src="URL_IMAGEN"/></a>
El mismo problema tendríamos por ejemplo con un borde añadido a modo de subrayado u otros elementos. La excepción sería con los subrayados hechos con text-decoration y otras propiedas similares que sólo afectarán a los enlaces de texto.
Y la solución sería filtrar los enlaces con un selector de atributos para buscar los enlaces que apuntan a imágenes. Estos los distinguiremos fácilmente por su extensíón, así que sólo debemos crear una regla como esta y poner dentro propiedades que anulen las que hayamos definido para el resto de enlaces:
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
background-color: none;
border: 0;
}
background-color: none;
border: 0;
}
De esta manera, todos los enlaces que terminen en jpg, jpeg, jpe, png y gif adoptarán un nuevo estilo, en el ejemplo, sin color de fondo y sin borde. Para ver con más detalle cómo formular este tipo de selectores podéis ver esta entrada que publicamos hace tiempo.
Ejemplo de imagen con enlaces definidos con borde inferior:
La misma imagen con enlace tras aplicar el filtro para eliminar el borde:
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Mike Oldfield, que buen gusto!
ResponderEliminarMe acuerdo de que de pequeña me ponían sus canciones y flipaba...
¡Buen tuto! gracias :)
Pues recuerda esos años mozos echando un vistazo a Musicae ;)
EliminarHola, Oloman, si he entendido bien en esta entrada explicas cómo quitar el enlace de una imagen para que no aparezca por decir así "en original".
ResponderEliminarJusto hoy se me ha planteado este problema: al publicar una entrada en Blogger Store V2, al darle a la imágen se me abre en tamaño grande y es algo que no me interesa.
Lo que tu has explicado aquí, ¿me sirve para quitarle el enlace a la imagen? Y si la imagen tiene un enlace que conduce a verla en grande, ¿se le puede poner un enlace para que conduzca a la entrada?
Gracias
Pues no. Esto no es para quitar el enlace a la imágenes. Eso se hace quitando la etiqueta A que "rodea" la imagen (IMG). Y lo que tú dices que te pasa es que se activa el Lightbox de Blogger, un sistema llamado "Ventana modal" capaz de mostrar cierto contenido de manera destacada, normalmente, imágenes.
EliminarSi lo quieres desactivar simplemente vas al Escritorio y allí hay una casilla de verificación para ponerlo o quitarlo.
Hola!:
ResponderEliminarMe ha parecido un blog muy interesante.
Recurro a ti, por éste medio, ya que tengo un problema grave, en mi blog, ya que no está actualizando las entradas en los blogs que me tienen enlazada, por lo que pareciera que no he publicado en una semana y mis visitas se redujeron a cero... Estoy sumamente preocupada, ya que no se como solucionar éste problema. Podrías orientarme, por favor!!!!!!!. Te lo agradezco de ante mano, ya que mi blog y el contacto con mis seguidoras, es muy importante para mi.
MUCHAS GRACIAS DE ANTE MANO!
Me quedo a la espera de tu respuesta!
Sobre ese tipo de cosas no tengo casi idea, aunque sé que funcionan con el feed. Tendrías que repasar las opciones que tengas marcadas sobre eso en tu Escritorio, pero con paciencia al probar, pues los cambios no tienen efecto inmediato.
EliminarOye Oloman, muy buen blog, soy algo novato en cuanto a diseño y esas cosas; mi pregunta es:
ResponderEliminar¿Como puedo hacer para eliminar el menu contextual (boton derecho) de un video que he insertado en mi web? lo he visto en otras paginas y me gustaria hacerlo con los videos que inserto. esperarare tu respuesta y de antemano Gracias!!!!
Aquí tienes una manera, pero no olvides leer el resto del post.
EliminarHola Oloman:
ResponderEliminarQuería consultarte si tienes idea de como aplicar enlaces mediante código HTML que vayan seguidos, es decir, uno al lado del otro.
Normalmente cuando se aplica esto: Texto del enlace Texto del enlace Texto del enlace
Aparece así:
Texto del enlace
Texto del enlace
Texto del enlace
Y querría consultarte si sabes cómo hacer para que aparezca así
Texto del enlace Texto del enlace Texto del enlace
Un saludo!
Los enlaces salen seguidos por lo general y la prueba está en esos que pusiste en tu comentario. Tiene que ser una casuística concreta a la que te refieres ¿quizás son enlaces en una lista?
Eliminar¿como evitar imagenes de comentarios en bloguer al colocar link en facebook?
ResponderEliminarhola, lo que pasa que tengo un bloguer..
y algunas personas comentan, lo cual es bueno.
pero, cuando el link del bloguer lo pego en un facebook para compartirlo, sale mi bloguer, si, pero, sale la foto de la persona que al dejado su comentario en mi bloguer.
como hago para evitar su foto, sin borrar su comentario.
Lo mejor es usar el marcado de datos de Facebook (Open Graph Protocol), pero yo no he publicado nada al respecto por lo que tendrás que buscar en otros sitios cómo se hace.
EliminarNo logro quitarle ese estilo que sale debajo de la imagen cuando pongo el cursor encima... quizá es que no lo aplico donde debe ser. apliqué el códico encima de ]]> pero no hace nada.
ResponderEliminarLo tienes que poner en cualquier parte entre las etiquetas SKIN, pero lo mejor es que sea lo más cercano posible a la de cierre.
EliminarEn tu caso, prueba a poner esto otro:
separator {
font-size: 0;
}
No te entendí nada. Dónde están en la plantilla las etiquetas skin?
EliminarPerdona por el comen 7.2 pero legaba de currar y alucinaba jajaja. Luego ví que en realidad te refieres al cierre de ]]>
EliminarAhi lo puse y no hace nada.
Salu2
Lo he comprobado y sí funciona Gude. Inténtalo con !important:
Eliminar.separator {
font-size: 0 !important;
}
Cierto Olomanm funcionó así.
EliminarMuchas gracias.
Hola Oloman. NO sabía donde dejarte esta duda.
ResponderEliminarResulta que estoy poniendo imágenes coon un VÍNCULO a las entradas, en la portada y etiquetas de mi blog. Este es el blog: http://goo.gl/ZZc74B
Pero me gustaría que ese vínculo a las imágenes desapareciese cuando estás ya dentro de la propia entrada:
He intentando varias cosas, pero no logro mi propósito:
1) Intento. Apliqué un hidden a los vínculos del post-body (cuando se ven fuera de entradas), pero de esta forma también me "cargo" los enlaces que tenga de tipo texto cuando entras en la entrada. Malo.
.post-body a {
display: none;}
2º. Intento: Trato de añadir "img" al enlace vínculo, para que sólo elimine las imágenes vinculadas, que es lo que quiero, pero no sucede nada.
.post-body a img {
display: none;}
3º) Intento. Viendo tu post, pensaba que sería capaz de aplicar algo, para eliminar los vínculos de determinados tipos de imágenes. Pero una vez colocado esto en la plantilla no sucede ningún cambio.
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
display: none;}
Así que nada, te pido una ayudita para lograr mi cometido, porque ya llevo 2 días leyendo aquí y allá, pero no consigo dar con la solución. Un cordial saludo
Félix, si el enlace lo metes desde la entrada, sólo lo podrás quitar de esta mediante JavaScript.
EliminarLa solución más fácil que veo es que montes tus entradas sin enlace en las imágenes y luego para la página de entradas y de etiquetas (INDEX), que añadas la imagen y el enlace con este sistema.
Ya di con la solución.... no hay nada mejor que escribir una duda (hacerla texto), que que que surja la solución.
ResponderEliminarResulta que en la plantilla estaba poniendo esto
.a img {display:none;}
Y no pasaba nada, por culpa del punto. Pero sin punto, si funciona
a img {display:none;}
Entonces, te pregunto por curiosidad, ¿por qué con el punto no funcionaba mientras que muchas cosas del skin se ponen con punto? je je. Saludos
Porque a es una etiqueta HTML y funciona directo. No es una clase (selector) CSS, que sí requieren el punto o una almohadilla #. Lo mismo pasa con IMG, BR, HR, TABLE, etc.
EliminarDe todas formas ya te di otra idea para quitar el enlace sin tener que ocultar la imagen que es lo que realmente haces con eso ;)
Gracias por responder Oloman. Pero te cuento que he decidido renunciar a los sumarios resumidos porque la imagen que sale resumida necesito que sea más grande.
EliminarY ahora me dirás que también hay un truco para agrander imágen. Sí, pero pasa una cosa.
Cuando introduzco el scritp de agrandar imágenes para el truco de sumarios resumidos, Blogger me muestra los post que le da la gana en portada y etiquetas (en ocasiones solo 6, 8 10...) pero nunca los 50 post que consigo con el método que voy a implementar ahora de ocular la imagen enlazada.
Mira cómo va quedando lo que te digo.. je je (a mi me gusta, otra cosa es que a Google no le gusten los "diplay:none"... porque quién oculta... algo esconde.. je je) http://goo.gl/ZZc74B
Gracias por contestar.
Hay otra forma de mostrar imágenes más grandes sin recurrir a JavaScript y lo de que Blogger te limite el número de entradas se soluciona añadiendo el corte < !--more--> a todas las entradas, pero si has encontrado otro sistema y además te gusta el resultado, pues ya está :)
Eliminar