Dynamische Ansichten: Schriftgrößen und Schriftgewichte ändern

Ändert man im Blogger-Vorlagendesigner unter den vorgefertigten Einstellmöglichkeiten die Schriftgrößen und Schriftgewichte für die verschiedenen Stellen der dynamischen Ansichten, bleibt das ohne Effekt. Es scheint, als wären die Einstellmöglichkeiten Attrappen, die da nur stehen, weil es sie im Blogger-Vorlagendesigner sonst halt gibt.

Ich habe einiges per CSS probiert, um Schriftgrößen und Schriftgewicht an verschiedenen Stellen der Dynamischen Ansichten zu beeinflussen und so zu den unten stehenden erfolgreichen Kommandos gefunden.

---

Beachten: Die Kommandos, die ich in diesem Post hier nenne, regeln die Schriftgrößen gleich unter allen Ansichten. Die Schriftgrößen-Kommandos, die ich in anderen Posts nur für einzelne Ansichten nenne, können sich auf gleiche Elemente beziehen. Sie müssen aber nicht zweimal eingetragen werden.

Man trägt die Kommandos unter  
Blogger-Dashboard > Blog-Menü (Pfeil) > Vorlage > Anpassen > Erweitert > CSS hinzufügen
ein, klickt auf "Auf Blog anwenden" und dann auf "Blog anzeigen" und navigiert ggf. zu den Stellen, die man geändert hat, um den Erfolg zu sehen; denn nicht alles ist ja im Vorschaufenster sichtbar, weil das nur eine bestimmte Ansicht zeigt.

Grundeinstellung für das Blog

/* Grundeinstellung für ganzes Blog: Schriftgrößen (Beeinflusst auch untergeordnete Schriftgrößen-Kommandos ergänzend.) */
body, body a {
font-size:105%;
}

Diese Grundeinstellung für Schriftgrößen normaler Schrift (body) und verlinkter Schrift (body a), die für das ganze Blog gilt, regelt nicht nur bestimmte Schriftgrößen direkt, sondern beeinflusst auch ergänzend die Schriftgrößen-Kommandos an speziellen untergeordneten Stellen.

Blog-Titel

/* Blog-Titel: Schriftgröße und Schriftgewicht */
#header .header-bar .title h1 {
font-size:38px;
font-weight:600;
}

Ansichten-Menü

/* Ansichten-Menü: Schriftgröße und Schriftgewicht */
#header .menu .menu-item, #header .menu .menu-heading {
font-size: 105%;
font-weight:600;
}

Vergleichende Bilder zu "Ansichten-Menü"

Das Kommando bezieht sich nur auf das Menü, also hier sichtbar auf den Link zu "Snapshot". Die Seiten-Titel-Links (beispeilsweise "Startseite) wurden von einem anderen Kommando vergrößert.

Gadget-Titel

/* Gadget-Titel: Schriftgröße und Schriftgewicht */ .gadget-title { font-size: 120%; font-weight:600; }

Posts-Titel in Posts

/* Posts-Titel in Posts: Schriftgröße und Schriftgewicht */
h1.title a {
font-size:30px;
font-weight:600;
}

Posts-Titel in Voransichten (zB. bei Snapshot unter den Bildern)

/* Posts-Titel in Voransichten (Beispiel Snapshot): Schriftgröße und Schriftgewicht */
h3.title a {
font-size:20px;
font-weight:500;
}

Hier darf man nicht zu fett und nicht zu groß einstellen, weil sonst beispielsweise die Bilduntertitel unter Snapshot, selbst dann nicht mehr komplett angezeigt werden, wenn sie sehr kurz gehalten wurden.

Ich habe hier als Schriftgewicht 500 eingestellt, weil meine Schrift auf den Wert reagiert. Einige Schriften können aber nur 400 (normal) oder 600 (fett) anzeigen und reagieren auf 500 gar nicht. Falls also 500 eingetragen ist und die Schrift nicht fett angezeigt wird, dann kann sie 500 nicht verstehen und man muss ihr 600 geben.Bei den Schriften, die aber auch auf 500 reagieren, kann man den Fettgrad der Schrift differenzierter bestimmen, also fett oder noch fetter bewirken.

Posts-Inhalte (voreingestellte Schriftgröße)

/* Posts-Inhalte: Voreingestellte Schriftgröße */
.article {
font-size: 105%;
}

Erfolgs-Tests

In allen aktuellen gängigen Browsern (außer im Opera, mit dem man die Dyn. Ansichten grundsätzlich nicht erfolgreich nutzen kann) wirkten die Kommandos erfolgreich. Man muss aber kontrollieren, wie die Größen und Gewichtswerte in den verschiedenen Browsern angezeigt werden. Für manche Browser kann etwas zu groß und fett sein, was in anderen Browsern ganz hervorragend passt. Man muss dann Kompromiss-Werte finden.


Ute Ziemes, sg.utez.de, 02.03.2013, Änderung: 26.03.2013, Adressänderungen 03.03.2013, 26.03.2013