Blockquote ist ein HTML-Element, das es schon seit geraumer Zeit gibt: 1995 entdeckte es mit der Version HTML 2.0 das Licht der Welt. Seither dient es der Auszeichnung von Zitaten. Deshalb benennt es WordPress in der Beitragsbearbeitung auch Zitat und benutzt als Icon ein typographisches Anführungszeichen. Wie so ein WordPress Blockquote dann tatsächlich auf der Website aussieht, hängt maßgeblich vom aktiven Theme ab. Doch wie eigentlich fast alles lässt sich auch das ändern.
Twenty Seventeen und die Darstellung des WordPress Blockquote
Nutzer des Twenty Seventeen Themes mögen ein bisschen enttäuscht sein ob der Darstellung der Zitate. Wenn Sie in der Beitragsbearbeitung immer nur im Visuellen Modus arbeiten und den Button für die Zitate nutzen, gibt das Theme den so ausgezeichneten Text schlicht kursiv aus. Punkt. Wozu soll das gut sein?, mag sich mancher fragen. Kursiv ginge ja auch anders.
Historisch betrachtet hat die mittlerweile übliche kursive Schrift im Übrigen keine Grundlage. In der Tat ist die ursprüngliche Idee des Blockquote Elementes einzig der Einzug. Ohne jegliche Formatierung durch Sie oder Ihr Theme stellen Browser entsprechend ausgezeichneten Text mit einem linken (und rechten) Einzug von 40px dar. Twenty Seventeen hingegen verzichtet auf diese Abstände links und rechts.
Variante 1: Twenty Seventeens .alignleft
Beim Blick in die Dokumentation des Themes fällt dann aber auf, dass es eine Klasse für das Element zur Verfügung stellt. Diese Klasse heißt .alignleft. Um sie nutzen zu können, ist es nötig, den Visuellen Modus zu verlassen und stattdessen auf den Textmodus umzuschalten. Hier stellt WordPress Ihren Text zumindest in Teilen mit den zugehörigen HTML-Elementen dar. Wenn Sie also den WordPress Blockquote Button geklickt haben, erscheint hier dann auch die entsprechende Auszeichnung:
<blockquote>Ihr Text ...</blockquote>
Wenn Sie das Element nun also mit der entsprechenden Klasse versehen,
<blockquote class="alignleft">Ihr Text ...</blockquote>
sieht Ihr Zitat gleich ganz anders aus:
Variante 2: Blockquotes als Zitate kenntlich machen
Die Grundidee des Blockquote Elementes ist das Zitat. Deshalb gehen viele Theme-Autoren hin und geben Blockquotes mit einem vorangestellten typographischen Anführungszeichen aus. Das macht die Qualität des Zitates mal so richtig deutlich.
Die Auszeichnung des Elements erfolgt dann wie bei der Klasse .alignleft. Nur dass Sie hier jetzt die Klasse .zitat vergeben und diese erst einmal im Rahmen des Customizers > Zusätzliches CSS definieren müssen:
.zitat {
padding: 10px 20px 20px 70px; position: relative;
font-size: 1em;
}
.zitat:before {
content: '\201D';
width:60px;
font-family: serif;
font-size: 100px;
line-height: 100px;
font-weight: 700;
font-style: normal;
text-align: center;
color: orange;
position: absolute;
top: 0;
left: 0;
}Wenn Sie das Anführungszeichen so wie beim WordPress Blockquote Button wünschen, lautet die Angabe für den content übrigens \201C.
Alternativ können Sie natürlich auch das Blockquote Element grundsätzlich so definieren. Dann würden Sie statt der Klasse .zitat einfach das Element blockquote entsprechend umdefinieren.
Variante 3: Blockquote als Info-Kasten
Vielleicht geht es Ihnen aber auch wie mir und Sie zitieren gar nicht so oft. Und wenn sie schon zitieren, wollen Sie dies innerhalb eines Absatzes tun. Sprich: Sie wollen kein Blockelement, sondern ein Inline-Element nutzen. Zwar war das Element cite ursprünglich dafür gedacht, innerhalb eines blockquote die Quelle des Zitates zu markieren. Es ließe sich aber auch zur Kennzeichnung eines Zitates im Rahmen es normalen Absatzes verwenden. Praktisch ist es in den meisten Themes auch nur mit kursiver Schrift definiert.
Ich benutze Blockquotes für das Hervorheben von wichtigen Hinweisen. Also als Infokasten. Mein Theme sieht dies so vor, daran habe ich nie etwas geändert. Einzig habe ich das pre Element für Code-Angaben genauso definiert. Und diese Art der Darstellung ließe sich nun auch für Twenty Seventeen übernehmen.
Nun hieße die Klasse des Elementes .kasten, und die Definition dieser Klasse wäre:
.kasten {
padding: 10px 20px;
border: 1px solid #e6e6e6;
border-left: 3px solid orange;
font-size: 1em;
margin-bottom:25px;
}
.kasten p {margin-bottom:0;}Auch hier gilt, dass Sie natürlich einfach das Element blockquote entsprechend umdefinieren können. Dann sehen alle Zitate wie Infokästen aus.
Beitragsbilder: Britta Kretschmer, Lollipop-Blindtext: Cupcake Ipsum
Schreibe einen Kommentar