Kleine Theme-Änderung

WordPress Zeilenabstand anpassen

Share on Facebook0Tweet about this on Twitter0Share on Google+0Share on LinkedIn0Email this to someone

Das grobe Aussehen eurer WordPress-Seite legt ihr mit einem Theme fest. Um das Theme weiter an eure Vorstellungen anzupassen und den Zeilenabstand anzupassen, gibt es verschiedene Möglichkeiten. Hier lest ihr, wie ihr den Zeilenabstand in WordPress ändert.

Zeilenabstand2

Etwas mehr Zeilenabstand kann die Lesbarkeit eurer Texte verbessern.

Zeilenabstand ändern

Egal, ob ihr ein Child-Theme verwendet oder nicht, den Zeilenabstand ändert ihr per CSS. Der Code dafür ist bei allen Vorgehensweisen nahezu identisch und wird lediglich an verschiedenen Stellen eingesetzt. Das Element, mit dem der Zeilenabstand festgelegt wird, lautet line-height: gefolgt von einer Zahl mit Dezimalstellen (in englischer Schreibweise, also mit Punkt statt Komma) und einem Semikolon (;).

Damit legt ihr die Zeilenhöhe fest. Der Wert 1 entspricht dabei der Höhe des Textes und lässt zwischen den Textzeilen keinen Freiraum (Beispiel: Der linke Textabschnitt in unserer Beitragsgrafik). Angenehmer zu lesen ist ein Text mit etwas mehr Abstand, wie er im zweiten Textblock unserer Grafik zu sehen ist. Dafür haben wir diesen Code verwendet:

line-height: 1.3;

Wo genau muss dieser Code aber hin? Das kommt darauf an, was ihr erreichen wollt. Möchtet ihr den Zeilenabstand aller Textblöcke ändern? Oder wollt ihr individueller vorgehen?

Wenn ihr den Zeilenabstand aller Textblöcke ändern möchtet

1. Mit Child-Theme

Ihr habt bereits ein Child-Theme erstellt und in Verwendung? Dann ist die Sache einfach. Fügt in die style.css eures Child-Themes einfach diesen Code ein, um den Zeilenabstand aller Textblöcke festzulegen:

p {
 line-height: 1.3;
 }

Das p definiert dabei die Elemente, für die die nachfolgende Anweisung gilt, in diesem Fall also alle Paragraphs. Die geschweiften Klammern beinhalten die genaue Anweisung.

Speichert die Änderung und eure Arbeit ist erledigt.

2. Ohne Child-Theme, aber mit Plugin

Ihr verwendet noch kein Child-Theme? Kein Problem. Kleine Anpassungen am Theme könnt ihr dennoch einfach vornehmen. Dazu bietet sich das Plugin Simple Custom CSS an, das wir hier vorgestellt haben. Nach der Aktivierung steht für euch im WordPress-Dashboard ein Textfeld im Bereich Design > Custom CSS bereit. Auch hier genügt es, den Code wie oben einzufügen und zu speichern:

p {
 line-height: 1.7;
 }

In diesem Beispiel verwenden wir eine Zeilenhöhe von 1,7 – zu sehen im dritten Beispiel der Beitragsgrafik.

Wenn ihr den Zeilenabstand nur für einzelne Textblöcke ändern wollt

Einzelne Textblöcke auf der Seite stylt ihr mit CSS-Klassen (praktisch, wenn ihr mehrere Textblöcke auf einer Seite anpassen möchtet), CSS-IDs (wenn ihr maximal einen Textblock je Seite anpassen möchtet) oder „inline“. Die letzte Vorgehensweise ist nicht die best practice – wir stellen sie nur der Vollständigkeit halber vor.

CSS-Klasse

Um mit CSS-Klassen zu arbeiten, nehmt ihr an zwei Stellen Änderungen vor. Zum einen direkt in eurem Beitrag, wo ihr dem anzupassenden Textblock eine Klasse zuweist, und einmal in der style.css (oder dem Simple Custom CSS Plugin), wo ihr die Anweisungen für diese Klasse definiert.

Schritt 1: Klasse zuweisen

Weist dem Textblock im Beitragseditor eine „Klasse“ zu. Bei der Namensgebung habt ihr prinzipiell freie Wahl. Ihr solltet aber darauf achten, keine bereits verwendeten Klassen oder Sonderzeichen zu benutzen. Achtet auch auf Groß/Kleinschreibung. Wir nennen unsere Klasse zeilenabstand.

Dem Absatz weist ihr mit diesem Code eine Klasse zu:

<p class="zeilenabstand">

Hier steht euer Text.

</p>

Wenn das dann so aussieht, aktualisiert ihr den Beitrag.

Absatz als Klasse für einen Absatz

WordPress Zeilenabstand mit eine CSS-Klasse definieren.

Schritt 2: Die CSS-Klasse formatieren

Ähnlich der Schritte beim Ändern aller Textblöcke geht ihr auch hier vor. Verwendet ihr ein Child-Theme, ändert ihr die style.css. Verwendet ihr das Plugin, ergänzt ihr eure Änderungen im Textfeld unter Design > Custom CSS:

.zeilenabstand {
 line-height: 2.0;
 }

Anders als für alle Textblöcke, die über das p angepasst wurden, gilt unser Code für die Klasse „zeilenabstand“. Da wir hier eine CSS-Klasse verwenden, müssen wir dem Namen noch einen Punkt voranstellen: .zeilenabstand

Anschließend speichert ihr eure Änderung.

CSS-ID

Alternativ zu CSS-Klassen könnt ihr ein einzelnes Element auch per CSS-ID anpassen. Das Vorgehen ist dabei weitgehend identisch zur CSS-Klasse. Beim Definieren der ID lautet der Code im Beitragseditor nicht <p class=“zeilenabstand“> sondern <p id=“zeilenabstand“>

Die Anweisungen im CSS werden außerdem nicht wie bei einer Klasse mit dem Punkt angesprochen (.zeilenabstand), sondern mit einer Raute: #zeilenabstand.

#zeilenabstand {
 line-height: 2.0;
 }

Inline

Beim inline-Formatieren von Elementen und Textblöcken schreibt ihr die Anweisungen direkt in den Text-Editor von WordPress. Im Dashboard ruft ihr dafür euren Beitrag oder eure Seite auf und wählt dann die Ansicht „Text“.

In dieser Darstellung sucht ihr euch den Textblock heraus, bei dem ihr den Zeilenabstand verändern möchtet. Falls der Textblock bereits mit <p> beginnt und mit </p> endet, fügt ihr den Code für die Formatierung an das <p> an. Andernfalls fügt ihr am Anfang des Absatzes das <p mit der Anweisung ein und am Ende schließt den Absatz mit </p>.

<p style="line-height: 2.0;">

Hier steht euer Text.

</p>

In eurem Editor sollte der Textabschnitt in etwa so aussehen:

Inline für einen Absatz

Den Zeilenabstand inline im Beitragstext festzulegen ist eine schlechte Lösung.

Mit diesem inline-Code ändert ihr den Zeilenabstand für einzelne Textblöcke im Beitragseditor.

Die Änderungen werden nach dem Aktualisieren eures Beitrags sichtbar.

Anmerkung: Zwar ist die inline-Formatierung für einen einzelnen Beitrag insgesamt weniger aufwändig als der Weg über die CSS-Klasse bzw. -ID. Sobald ihr die inline-Formatierung aber bei mehreren Beiträgen verwendet und zu einem späteren Zeitpunkt den Zeilenabstand nochmals ändern möchtet, artet das Ganze in viel Arbeit aus. Denn dann müsst ihr die Formatierung in jedem Beitrag einzeln anpassen, ohne die Möglichkeit, es zentral an einer Stelle über die CSS-Klasse oder -ID zu lösen.

Zeilenabstand für alle Textblöcke ändern und zusätzlich einzelne Absätze individuell anpassen

Die hier vorgestellten Anpassungen könnt ihr auch kombinieren und so zum einen den Zeilenabstand für alle Textabschnitte definieren, als auch zusätzlich einzelne Abschnitte per CSS-Klasse oder -ID individualisieren.

Das CSS sieht dann zum Beispiel so aus:

p {
 line-height: 1.7;
 }
.zeilenabstand {
 line-height: 2.2;
 }

Damit definiert ihr einmal eine Zeilenhöhe von 1,7 für alle Textblöcke und außerdem eine Zeilenhöhe von 2,2 für die Textblöcke mit der CSS-Klasse „zeilenabstand“ (wie das rechte Beispiel in unserer Beitragsgrafik).


Hans Jung

Hans Jung

Hans ist Datenschutzbeauftragter und bekennender WordPress-Fan – und versucht beides unter einen Hut zu bekommen.
Hans Jung
Share on Facebook0Tweet about this on Twitter0Share on Google+0Share on LinkedIn0Email this to someone
Kommentare zu "WordPress Zeilenabstand anpassen"
  1. Michael H. schrieb am 12. Mai 2015, um 13:16 Uhr:

    Ich bin doch eher neu auf diesem Gebiet und finde bei euch immer wieder gute, hilfreiche Tipps. Danke dafür. Und: macht weiter so.

Schreibe einen Kommentar

Pressengers lebt von der Wordpress Community, beteilige dich mit einem Kommentar!
Deine E-Mail Adresse wird nicht veröffentlicht.

Achtung: Mit dem Absenden eines Kommentars erklärst du dich damit einverstanden, dass alle eingegebenen Daten und deine IP-Adresse zum Zweck der Spamvermeidung durch das Programm Akismet in den USA überprüft und gespeichert werden. Weitere Informationen zu Akismet und Möglichkeiten des Widerrufs..