8.12.12
Blogger: Schriftgröße in Posts global ändern
Bekanntlich könnt ihr eure Texte im Post individuell formatieren - was im Editor so einfach und locker daherkommt, macht große Probleme, wenn ihr etwa nachträglich die Schriftgröße für alle Posts ändern wollt. Warum?Editor im Verfassen Modus
Der Blogger Editor schreibt jede Änderung von Schriftart, Farbe, Schriftgröße und so weiter mit Inlinestyle Attribut direkt in den Post. Das schaut etwa so aus: Ihr könnt euch das in eurem eigenen Blog anschauen, wenn ihr im Editor vom 'Verfassen' Modus auf den HTML-Modus wechselt.
<span style="font-size: x-small;">blabla</span>
Entweder ihr formatiert eure Posts nicht, dann findet ihr logischerweise auch nicht die
span Container drin - oder ihr habt sie formatiert, dann stehen diese Container drin. Spezifität
Ihr könnt CSS mit verschiedenen Methoden auf ein HTML Element anwenden - innerhalb eines HTML Tag mit demstyle Attribut, als internes Stylesheet im Dokument selber oder als externes Dokument über ein Link. Je nach Methode bekommt eure CSS eine unterschiedlich Spezifität - das meint, das eure CSS eine unterschiedliche 'Gültigkeit' hat, je nachdem, mit welcher Methode sie eingebunden ist. Das heißt im Klartext?
Eine CSS über ein inlinestyle Attribut hat von allen CSS-Methoden die höchste Spezifität, nämlich '1000'. Ihr könnt so eine CSS deshalb mit keiner anderen CSS überschreiben. Aus die Maus. Schriftgröße anpassen
Wenn ihr die Schriftgröße von einem [allen] Posts nachträglich ändern wollt, gibt es nun drei Methoden:Post Editor
Was immer geht, ist den Post in den Editor zu stellen und dort zu formatieren ... löscht notfalls alle Formatierungen. Wenn ihr viele Posts ändern wollt, stösst das möglicherweise an eine Grenze.Globale CSS
Was ihr statt dessen versuchen könnt, ist die Schriftgröße durch eine globale CSS zu ändern:Vorlagen Designer > Eigene CSS
Dadurch bekommen alle Texte im Post, die _nicht_ im Editor formatiert worden sind, die Schriftgröße 21px.
.post-body{ font-size: 21px }
Falls ihr nun ein Fan vom Editor gewesen seit, bewirkt diese CSS rein gar, nichts ... also machen wir Schluss mit lustig und packen den Hammer aus.
jQuery
Alle CSS, die ihr im Vorlagen Designer formatiert habt, könnt ihr mit diesem JQuery Script überschreiben:Layout > HTML/Javascript Gadget
Das Script schreibt in alle
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
$('.post-body span').css('font-size','21px');
});
</script>
span Container im Post eine Style Anweisung über eine Schriftgröße von 21px - zusammen mit der CSS aus Methode 2 könnt ihr damit global die Schiftgröße in allen Posts ändern, egal ob sie fromatiert sind oder nicht. Ist das 'best practice'?
Nein - CSS Anweisungen solltet ihr eigentlich nie mit Javascript machen ... aber was soll's? Ein Eitor sollte eigentlich auch keine inlinestyle Attribut schreiben :D.Die Methode funktioniert und braucht im Vergleich zu den gerade so beliebten 'Schnee Scripts' etwa 1000mal weniger Rechenkraft. Wer also grundsätzlich Javascript auf seinem Blog einsetzt, kann auch seine Schriftgröße über ein Script verändern - das macht das Kraut nicht fett.