Bildunterschriften per CSS gestalten

CSS Beschriftung
Geschätzte Lesezeit: 1 Minute

Der WordPress-Version 3.4 wurden einige Funktionen hinzugefügt, die ich wahrscheinlich zum größten Teil überhaupt nicht nutzen werde. Eine schöne zusammenfassende Erklärung , um welche es sich dabei handelt und wie diese umgesetzt werden, hat Elmastudio veröffentlicht.

Genau wie Ellen finde ich das Einfügen von Bildunterschriften mit Html-Attributen am interessantesten.

Nun nutze ich diese zwar nicht sehr häufig, aber letztens habe ich in einem meiner Beiträge tatsächlich einmal die Caption-Funktion bemühen müssen. Mir gefiel die Darstellung aber überhaupt nicht. In meinem nicht mehr so taufrischen und zudem kostenlosen Theme war das Schriftbild unter den Bildern identisch mit dem Rest des Beitragstextes und hob sich somit nicht klar von ihm ab.

Nachrüsten bei meinem alten Theme

Mag sein, dass die Designer neuerer Themes eine grundlegende Gestaltung per Caption berücksichtigt haben, aber ich musste diese nun nachholen. Jede Bildunterschrift umfangreich per Hmtl zu generieren, war mir dann doch erst einmal zu umständlich.

Daher begab ich mich auf die Suche nach einer grundlegenden Lösung und wurde auf einen Codex bei WordPress.org aufmerksam. Dort habe ich den folgenden CSS-Code herausgepickt und in die Datei style.css im Verzeichnis meines Templates kopiert:

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin:0;
    max-width: 98.5%;
    padding:0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
}

 

Bild - Schafe

Sind das nicht wunderschöne Schafe? Weitere Tierbilder seht ihr in dem Album „Allerlei Getier“ bei Flickr.

 

Durch das Ändern des Rahmens, der Schriftgröße, Hintergrundfarbe bzw. der padding– und margin-Werte erziele ich schon einmal eine einheitliche Darstellung für Grafiken mit Bildunterschriften.

Einzelne Attribute für Fettschrift oder Links sind dann schnell hinzugefügt.

 

Hinweis
Dieser Beitrag bezieht sich auf Codierungen oder/und Funktionen, die ich noch in meinem alten Template umgesetzt habe. Es ist möglich, dass sie in dem aktuellen Blog-Theme nicht übernommen wurden und somit die Darstellung bzw. Funktion nicht mehr existiert.

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen, sei es über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Wenn Du hier kommentierst, bist Du mit den Datenschutzbedingungen von Sylvis Blog einverstanden.

Du kannst diese HTML-tags und attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Copyright © Sylvis Blog • 2019. Alle Rechte vorbehalten. •   Impressum   •    Datenschutzerklärung