17 juin 2012

Comment améliorer la qualité des photos sur Canalblog

Est-ce que vous vous êtes déjà sentis contrariés par la qualité de vos photos sous Canalblog ?

Moi qui suis un peu perfectionniste sur les bords (certains aime utiliser le terme de « maniaque »)(de façon totalement injustifiée bien sûr) j'étais fort bien déçue par le résultat. J'ai donc cherché à comprendre d'où venait le problème et j'ai finalement trouvé une solution toute simple pour arranger ça.

En fait, tout vient du fait que Canalblog réduit automatiquement la qualité des images, ce qui a pour effet de les rendre alors toutes moches. Mais comment palier à cet épineux problème, vous demandez vous ? Et bien en gros, il suffit pour cela d'ajouter une photo en tant que « document » et non en tant qu' « image ». Easy.

Ajouter le document
Cliquez sur l'icone cbfile pour ajouter votre photo. Vous obtenez alors un lien du nom de votre image.

Modifier le code HTML
Dans la barre bleu juste au dessus de l'article, cliquez sur le bouton HTML. Cherchez alors la ligne correspondant à :

<a href="URL_du_l'image">texte_à_cliquer</a>

Remplacez simplement cette ligne par celle-ci :

<img src="URL_de_l'image">

Appuyez sur le bouton Valider et vous avez maintenant une bien belle photo ajoutée dans votre article.

Petit exemple pour illustrer l'histoire.

Avant / Après

Passion_Pit-260Passion_Pit-260

 

 

 

 

 

 

 



 

 




15 mai 2012

Comment ajouter des polices sur Canalblog avec Google Web Font

309656_10150310316682072_6191917071_7824838_73190_n

Dans ce tuto nous allons voir comment ajouter des polices un peu sympas sur son blog avec Google Web Font, parce qu'Arial et Times New Roman c'est pas tout le temps terriblement folichon.

1. Passer en mode Avancé

Il est absolument nécéssaire d'être en mode Avancé pour ajouter des polices donc si ce n'est pas déjà le cas, consultez ce tutoriel qui vous expliquera tout ça très bien avec des petites illustrations et tout. Attention par contre, une fois que vous avez changé de mode, impossible de retourner en arrière. C'est le prix à payer mais ne soyez pas effrayé, tout se passera bien... normalement.

2. Ajouter l'URL

Maintenant nous allons sur Google Web Font en cliquant ici pour trouver une police qui nous plait. Pour cet exemple je vais prendre Amatic SC qui est la police que j'utilise pour les titres d'articles.

On retourne ensuite sur Canalblog pour ajouter notre police. Cliquez sur l'onglet Apparence puis Editer les fichiers de ce modèle et enfin, dans le menu déroulant, sélectionnez Page d'accueil. Apparait alors du superbe code HTML à la mise en page bien moche mais bref, passons... Sous la bannière on va alors ajouter une ligne du type :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=nom_de_la_police">

Il y a une petite subtilité à connaître cependant sur le nom des police à mettre ici : les majuscules sont à respecter et les espaces sont à remplacer par un "+". Donc, pour ma police Amatic SC dont je vous parlez tout à l'heure, j'aurai :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Amatic+SC">

Pour rajouter de nouvelles polices, il suffit de les séparer par un "|". Par exemple, pour la police Cedarville Cursive que j'utilise dans cet article, j'obtiendrai :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Amatic+SC|Cedarville+Cursive">


3. Appliquer la police à une classe

Dans le menu déroulant, sélectionnez Feuille de générale. Modifiez alors la valeur du font-size associé à la classe que vous souhaitez modifier (en gros à une zone de texte choisie), mais gardez au moins une police alternative standard au cas où la police n'ait pas été chargée correctement.

font-family: 'Amatic SC', Courier;

Et voilà c'est gagné!

Si vous voulez en savoir un peu plus, je vous recommande cet article sur lequel je me suis basée pour écrire ce tuto.