Nachdem du das Bild in den Beitrag eingefügt hast, siehst du es im Textfeld deines Beitrags. Klicke nun mit der Maus auf das Bild. Es erscheinen zwei Icons: Der Bleistift zum Bearbeiten des Bildes und das x zum Löschen des Bildes. Wenn du auf das Bleistift-Icon klickst, gelangst du zu den erweiterten Bildbearbeitungsoptionen!

Über dieses Feld kannst du im HTML-Code zu deinem Bild einen title-Tag einfügen. Der Text, den du hier einfügst, wird dann als Tooltip angezeigt - das heißt, er wird sichtbar, wenn User den Cursor über ein Bild halten. Füge hier am besten eine kurze Bildbeschreibung ein, die die wichtigsten Keywords enthält. Außerdem könntest du hier auch Angaben zum Urheber und Copyright des Bildes machen.

Wenn du ein Theme hast, das custum CSS anbietet, kannst du in der custom-CSS-Box (meist zu finden im Menüpunkt Design/Theme Options) eine Klasse für deine Bilder anlegen. In das Feld "Bild-CSS-Klasse" kannst du anschließend den Namen der Klasse eintragen, so dass diese Klasse auf das Bild angewendet wird.

Eine CSS-Klasse anlegen

Beispiel: Bildern eine Bildkontur, abgerundete Bildecken und einen Schatten geben:
Füge in die custom-CSS-Box folgenden Befehl ein:

.image-border {border: 1pt solid black;
border-radius: 10px;
box-shadow: 2px 2px 10px grey;}

Du verstehst nur Bahnhof?

• Der . steht für "Klasse"
• Dann folgt der Name der Klasse (hier lautet der Name "image-border")
• In den geschweiften Klammern stehen Angaben, die die Klasse näher bestimmen
• border: hier folgen Angaben zur Bildkontur
• border-radius: hier folgt die Angabe zum Eckenradius
• box-shadow: Hier folgen die Angaben zum Schatten, der das Bild umgibt

Einem Bild eine CSS-Klasse zuweisen

Gehe zu den erweiterten Bearbeitungsoptionen deines Beitragsbildes (öffne den Beitrag, klicke auf das Beitragsbild und anschließend auf das Bleistift-Icon) und füge bei "Bild-CSS-Klasse" den Namen der Klasse ein, die du eben in der custom-CSS-Box angelegt hast, also: image-border. Nun hast du dem Bild eine bestimmte Klasse zugewiesen! Klicke auf den Aktualisieren-Button, speichere deinen Beitrag und klicke auf "Vorschau" - nun kannst du sehen, wie die CSS-Klasse das Aussehen deines Bildes bestimmt hat: Das Bild hat nun einen 1 pt breiten durchgehenden Rahmen in der Farbe schwarz, abgerundete Ecken und wirft einen Schatten nach außen. Spiele einfach mal mit den Möglichkeiten der Gestaltungssprache CSS - Voraussetzung ist natürlich, das dein Theme custom-CSS anbietet!

CSS lernen

• css4you
  Wie CSS-Befehle aufgebaut sein müssen und welche Befehle es gibt, kannst du hier nachlesen!

Kein custom-CSS? Was nun?

Wenn du ein kostenloses Theme benutzt, kannst du häufig auf eine kostenpflichtige Version upgraden, mit der Möglichkeit, nun das Design individuell über custom-CSS anzupassen. Ansonsten kannst du auch direkt an der CSS-Datei deines Themes rumbasteln (die Datei style.css findest du im Menüpunkt Design/Editor. Damit du die Datei verändern kannst, muss sie vom Server beschreibbar sein. Falls sie das nicht ist, musst du die Schreibrechte für die Datei ändern). Beim Rumbasteln am Theme-Code ist allerdings ein bisschen Vorsicht geboten! Du kannst leicht eine Datei "zerschießen" ohne dir den ursprünglichen Zustand der Datei gemerkt zu haben! Damit dir das nicht passiert, kannst du ein Child Theme anlegen. Im Child Theme kannst du dann Änderungen der CSS-Datei vornehmen, hast aber immer wieder die Möglichkeit zum ursprünglichen Zustand des Themes zurückzukehren!

Ein Child-Theme anlegen

• t3n
  Hier erfährst du, wie man ein Child-Theme anlegt!

Wenn du ein Bild verlinkt hast, z.B. zu einer internen oder externen Seite, kannst du über die "Link-Beziehung" eine Angabe zur Beziehung zum Linkziel machen. Der Attributwert "nofollow" gibt Suchmaschinen zum Beispiel die Anweisung, dem Link nicht zu folgen. Nicht alle Suchmaschinen beachten diese Anweisung jedoch. Auch kann man über das rel-Attribut logische Dokumentbeziehungen beschreiben - ob und wie ein Browser diese Angaben für den Anwender sichtbar macht, ist jedoch nicht festgelegt.

Screenshot: Erweiterte Bild-Optionen

Für Lizzys, die´s genau wissen wollen!

• Die Kommentar-Funktion
  

Weiter geht´s!

• Schritt 9: Sei rechtlich auf der sicheren Seite!
  
• Zurück zur Kapitelübersicht