Einzelne Post-Titel individuell gestalten

Will man in einem Blog mit Layout-Vorlage den Titel eines einzelnen Posts anders als die anderen Titel gestalten, z.B. rot färben, während die anderen blau sind, kann man nicht einfach per CSS oder Style kommandieren, dass .post-title rot sein soll; denn dann wären in Übersichten (Startseite, Label, Posts eines Monats) alle Posts rot.

Man braucht also einen individuellen Selektor, der nur bei diesem Post zu finden ist und für den Titel genutzt werden kann. Rund um den Titel findet man auch tatsächlich individuelle ID-Zahlen, die nur für diesen Post gelten. Sie sind aber so eingetragen, dass man sie nicht unmittelbar für den Post-Titel nutzen kann. Man kann die üblichsten CSS-Codes deshalb nicht nutzen.

Zum Glück gibt es jedoch auch CSS-Codes, die komplexer sind.

---

CSS-Kommandos, die das Vorhaben realisieren

In den folgenden Kommandos wird das Attribut "name" von a, des Ankers, der über dem Post-Titel steht und als Name die Post-ID hat, zu einem Selektor gemacht und festgelegt, dass darauf folgende Post-Titel, die innerhalb des gleichen Eltern-Elements stehen (und das ist hier nur der Titel des folgenden Posts) rot gefärbt werden sollen.

/* Titel des ersten Post vom DATUM in verlinkter Version (Übersichten) rot gefärbt */
a[name="123456789MUSTER7891"] ~ h3.post-title a {
color:#ff0000;
}
/* Titel des ersten Post vom DATUM in unverlinkter Version (geöffnet) - rot gefärbt */
a[name="123456789MUSTER7891"] ~ h3.post-title {
color:#ff0000;
}

Man kann die Codes unter Vorlage > Anpassen > Erweitert > CSS hinzufügen eintragen.

Oder im HTML-Modus des Post selbst zwischen Style-Klammern, die man unter den eigentlichen Inhalt setzt:

<style>
Code hier zwischen
</style>


Erst nach der Speicherung eintragbar

Erst durch die Speicherung oder Veröffentlichung des Post erhält er eine ID.

Wenn der Post zumindest als Entwurf in der Postsliste auftaucht, kann man die Post-ID in Erfahrung bringen, indem man in der Posts-Liste einen Rechtsklick auf den "Bearbeiten"-Link unter dem Post/-Entwurf macht und dann die Linkadresse kopiert und sie dann in einen Texteditor einfügt. In der Adresse befinden sich zwei IDs, die jeweils aus einer langen Zahlenkette bestehen, die für das Blog (blogID) und die für den Post (postID). Die ID für den Post benötigt man für das Stylekommando.

So sieht der Code des "Bearbeiten"-Link aus (Muster):

https://www.blogger.com/blogger.g?blogID=987654321MUSTER1234#editor/target=post;postID=123456789MUSTER7891;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=9;src=link

Dort steht die Post-ID im Quelltext der Webansicht des veröffentlichten Posts

Wer sehen möchte, wo die Post-ID im HTML steht, kann das im Quelltext der Webansicht des veröffentlichen Post nachsehen: Rechtsklick > Quelltext anzeigen > Bearbeiten > Suchen > Post-Titel eingeben > Suche starten

So sieht die Stelle aus, zu der man gesprungen ist, wenn es eine Übersichtsseite ist:

<a name="123456789MUSTER7891"></a>
<h3 class="post-title entry-title" itemprop="name">
<a href="POSTADRESSE">
POSTTITEL
</a>
</h3>

So sieht die Stelle aus, wenn es ein geöffneter Post ist:

<a name="123456789MUSTER7891"></a>
<h3 class="post-title entry-title" itemprop="name">
POSTTITEL
</h3>

Weiterführende Links

• wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Geschwisterselektor

Ute Ziemes, sg.utez.de, 2014-01-16, Änderungen: 2014-03-16, 2015-05-25, 2016-02-07