5202

ein Blog über technische Fragen zu Blogger

Blogger: Schriftgröße in Posts global ändern

von
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 Inline style Attribut direkt in den Post. Das schaut etwa so aus:
<span style="font-size: x-small;">blabla</span>
Ihr könnt euch das in eurem eigenen Blog anschauen, wenn ihr im Editor vom 'Verfassen' Modus auf den HTML-Modus wechselt.

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 dem style 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 inline style 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
.post-body{ font-size: 21px }
Dadurch bekommen alle Texte im Post, die _nicht_ im Editor formatiert worden sind, die Schriftgröße 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
<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>
Das Script schreibt in alle 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 inline style 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.

Anmerkungen

Wenn was nicht klappt ... dann fragt einfach nach :).