Grundeinstellung
Die Standardschriftart, Standardschriftgröße und Standardschriftfarbe für Posts und Seiten in seinem Blog regelt man bei Layout-Vorlagen im Vorlagendesigner (Vorlage > Anpassen > Erweitert) über "Seitentext". Bei den Dynamischen Ansichten heißt der Abschnitt "Seite" und das Feld für die Schriftgröße ist zwar auch vorhanden, aber ohne Funktion. Deshalb muss man, wenn man eine der Dynamischen Ansichten als Vorlage nutzt, speziell die Standardschriftgröße mittels CSS-Kommando unter "CSS hinzufügen" angeben, wenn sie anders als die vorgegebene Größe sein soll.Im Blogger-Editor, in dem man den Post bzw. die Seite schreibt, muss man keine weiteren Einstellungen für die im Post oder auf der Seite zu verwendende Standardschrift machen, sondern kann da einfach drauflos schreiben. Im Editor selbst sieht die Schrift zwar anders aus, aber das ist nicht das, was man im veröffentlchten Post bzw. der veröffentlichten Seite sehen wird. Man kann "Vorschau" anklicken, dann sieht man, wie der Text tatsächlich aussehen wird.
 |
| Layout-Vorlage |
 |
| Dynamische Ansicht |
.article-content {
font-size: 14px;
}
Einzelne Textstellen anders als den Standard gestalten
Will man einzelne Textstellen innerhalb eines Abschnitts* mal abweichend vom Standard gestalten, stehen einem dafür im Verfassen-Modus des Blogger-Editors zusätzliche Gestaltungsmöglichkeiten zur Verfügung.*Ein Abschnitt ist z.B. Text innerhalb einer Überschrift, Text innerhalb eines Listenpunkts, ein Wort oder Abschnitt mit allgemeinem Text im Post.
Die Einstellmöglichkeiten im Verfassen-Modus des Blogger-Editors eignen sich nicht, um sie auf den gesamten Post oder die gesamte Seite anzuwenden. Macht man das dennoch, dann hat man das jeweilige Kommando später im Post-HTML quasi in jeder Zeile stehen. Der Post bzw. die Seite ist dann mit viel zu viel Code überladen, was die problemlose weitere Bearbeitbarkeit des Inhalts gefährdet.
Um einzelne Textstellen mit den Einstellmöglichkeiten im Verfassen-Modus des Editors zu gestalten, muss man sie markieren und dann für den markierten Bereich das entsprechende Kommando geben. Möglich sind die Angabe einer Schriftart, einer Schriftgröße, von Fettschrift, Kursivschrift, Unterstrich, Durchstreichung, Textfarbe, Hintergrundfarbe.
Im Folgenden stehen Beispiele zu den Einstellmöglichkeiten und jeweils darunter steht, wie das Kommando (rot markiert) dazu im Quelltext aussieht.
<span style="font-family: "Courier New",Courier,monospace;">Dies ist ...</span>
<span style="font-size: x-small;">Dies ist ...</span>
<b>Dies ist ...</b>
Dies ist ein Beispiel für Kursivschrift.
<i>Dies ist ...</i>
Dies ist ein Beispiel für Text mit Unterstrich.
<u>Dies ist ...</u>
<strike>Dies ist ...</strike>
Dies ist ein Beispiel für eine abweichende Textfarbe.
<span style="color: blue;">Dies ist ...</span>
Dies ist ein Beispiel für eine abweichende Hintergrundfarbe (Marker-Effekt).
<span style="background-color: yellow;">Dies ist ...</span>
Rücknahme von Formatierungen
Wenn man sich doch gegen die gerade erst gemachte Einstellung entscheidet, kann man sie per Einzel-Klick auf den Zurück-Pfeil
wieder rückgängig machen. Der Zurück-Pfeil macht die letzte Handlung rückgängig. Klickt man nochmal drauf, wird auch der vorletzte Arbeitsschritt rückgängig gemacht und so weiter. Aber Achtung, hatte man zwischendurch auch mal Text geschrieben, würde man auch das rückgängig machen. Ob man das bemerkt, ist fraglich. Mit dem Pfeil nach rechts macht man den letzten Rückgängigmachen-Schritt wieder rückgängig. Den sollte man auf jeden Fall verwenden, wenn man nicht nachvollziehen konnte, was man gerade mit dem Pfeil nach links rückgängig gemacht hatte.Will man ein Kommando erst viel später wieder rausnehmen oder hat man für einen Abschnitt mehrere Kommandos gegeben und dabei auch noch beim Markieren Fehler gemacht, dann nutzt man den Button zum "Formatierung entfernen"
. Will man beispielsweise sowas wie das Folgende wieder in Ordnung bringen, dann muss man den kompletten Abschnitt markieren und auf den "Formatierung entfernen"-Button klicken, um dann nochmal alles neu zu machen.Dies ist ein Beispiel für blauen, fetten, kursiven, großen Text, der an einer Stelle eine Hintergrundfarbe beinhaltet und fehlerhaft formatiert wurde.
<i><b><span style="color: #6aa84f;"><span style="font-size: large;">D</span><span style="color: blue;"><span style="font-size: large;">ies ist ein Beispiel für blauen, fetten, kursiven, großen Text, der an einer Stelle eine <span style="background-color: yellow;">Hintergrundfarbe</span> beinhaltet und fehlerhaft formatiert wu</span>rde.</span></span></b></i>
Dies ist ein Beispiel für blauen, fetten, kursiven, großen Text, der an einer Stelle eine Hintergrundfarbe beinhaltet und fehlerfrei formatiert wurde.
<span style="font-size: large;"><i><b><span style="color: blue;">Dies ist ein Beispiel für blauen, fetten, kursiven, großen Text, der an einer Stelle eine <span style="background-color: yellow;">Hintergrundfarbe</span> beinhaltet und fehlerfrei formatiert wurde.</span></b></i></span>
Werte der Farb- und Größenkommandos durch passendere ersetzen
Man kann die Kommandos für Schriftgröße, Schriftfarbe und Hintergrundfarbe auch nur geben, um bequem Span-Klammern in das HTML des Post zu setzen, aber im HTML-Modus dann die Werte ändern. So kann man Farben eintragen, die besser zum Design passen und Schriftgrößenwerte verwenden, die nicht absolut, sondern relativ sind, z.B. Prozentwerte. Hinter color und background-color und font-size kann man den zunächst eingetragenen Wert durch seinen gewünschten ersetzen. Aber den dem Wert vorausgehenden Doppelpunkt und das dem Wert folgende Semikolon nicht versehentlich löschen!<span style="color: WERT;">...</span><span style="background-color: WERT;">...</span><span style="font-size: WERT;">...</span>
<span style="font-size: WERT; line-height: WERT;">...</span>
Style durch Class ersetzen
Kann man sich die WERTE, die man bei Style alternativ zu denen, die der Editor anbietet, eintragen will, nicht gut merken, weil man z.B. selten Ausnahmebereiche einsetzt und die WERTE deshalb selten eintragen muss, dann könnte das folgende helfen:Man kann unter Vorlage > Anpassen > Erweitert > "CSS hinzufügen" Werte für Span-Klassen definieren und im Post-HTML das jeweilige
style="..." durch class="..." ersetzen.Statt solcher Kommandos, wie man sie oben sieht, stünde dann im Post-HTML letztlich beispielsweise für rote Schriftfarbe, rote Hintergrundfarbe, kleinere Schrift und größere Schrift das Folgende:
<span class="crot">...</span><span class="bcrot">...</span><span class="kleiner">...</span><span class="groesser">...</span>
Die Farbcodes und Größenwerte und Höhenwerte muss man hierbei nur einmal eintragen, nämlich wenn man unter "CSS hinzufügen" die Span-Klassen definiert, also festlegt, wie die Span-Klassen mit den Namen crot, bcrot, kleiner, groesser gestaltet werden sollen. Solche Kommandos werden im CSS wie folgt geschrieben:
span.crot { color: WERT; }span.bcrot { background-color: WERT; }span.kleiner { font-size: WERT; line-height: WERT; }span.groesser { font-size: WERT; line-height: WERT; }
Allgemeines zu "span"
Das HTML-Element span kann (bis auf wenige Ausnahmen) nur Inline-Elemente enthalten und ist dazu da, den damit umschlossenen Bereich per CSS-Kommandos bzw. Style-Kommandos abweichend vom Standard zu formatieren. Inline-Elemente sind Elemente, die innerhalb von Block-Elementen stehen. Beispiel: Text innerhalb eines einzelnen Listenpunkt.Block-Elemente erzeugen einen eigenen Absatz im Textfluss. Beispiele: Überschrift, Liste, Listenpunkt, Zitat-Block, ... Zur abweichenden Gestaltung von Inhalt mit Block-Elementen nutzt man das HTML-Element div. Die Einrichtung eines Div-Containers und die Gestaltungsangaben für seinen Inhalt muss man ohne Unterstützung durch den Editor in das Post-HTML schreiben. Dafür gibt es keinen Button im Editor.
Weiterführende Links
Ute Ziemes, sg.utez.de,
0 Kommentare:
Kommentar veröffentlichen