Heute möchte ich euch zeigen, wie man eigene Unterüberschriften erstellt, um Posts noch mehr zu gliedern oder sie übersichtlicher zu gestalten.
In meinem Post über Bildbearbeitung findet ihr Beispiele für solche Überschriften:
1. Grundgerüst
- Klickt in dem Menü rechts auf Vorlage und dann auf HTML bearbeiten, sodass ihr einen bunt gefärbten Text vor euch habt.
- Nun öffnet ihr den CSS-Teil, indem ihr auf den Pfeil (►) am linken Rand klickt.
- Klickt nun einmal auf eine beliebige Stelle im Text, drückt dann Strg+F, gebt in das Suchfeld, das sich im rechten, oberen Eck öffnet Comments ein und bestätigt mit Enter.
- Über eurem ersten Suchergebnis, das übrigens gelb hinterlegt wird, fügt ihr folgendes ein (siehe Screenshot):
/* Unterüberschriften
----------------------------------------------- */
#Überschrift {}
2. Schriftart
Nun müssen wir in den beiden geschweiften Klammern die Eigenschaften definieren, die unsere Unterüberschrift haben soll. Ich habe meine übrigens absichtlich so gestaltet wie den Post-Titel, allerdings könnt ihr da natürlich variieren.Als erstes bestimmen wir die Schriftart. Hierfür gibt es zwei Möglichkeiten:
a) Standardschriftart
Standardschriftarten zu verwenden, ist die einfachere Variante. Sucht euch dafür einfach eine Schriftart wie beispielsweise Arial, Verdana, Georgia, Trebuchet usw. aus.Dann definiert ihr eine neue Eigenschaft, in diesem Fall font-family. Also zum Beispiel so:
font-family: Times New Roman;Denkt auch an das Semikolon danach!
Die Eigenschaft brauchen wir erst später, ihr könnt sie euch also irgendwo zwischennotieren.
b) Google Webfonts
Für diese Variante öffnet ihr diese Seite: Google Webfonts. Dort sucht ihr euch dann eine Schriftart aus, die euch gut gefällt. Ich hab mich hier für Calligraffitti entschieden. Klickt danach auf den kleinen Pfeil rechts unten:
Scrollt nach unten bis ihr zu Add this code to your website gelangt. Den Code, der dort angezeigt wird, kopiert ihr. Bei mir wäre das dann dieser hier:
<link href='http://fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'>Diesen Code müssen wir nun jedoch noch leicht verändern, sonst funktioniert's nicht.
Fügt vor dem abschließenden ">" noch einen Schrägstrich ein, also so:
<link href='http://fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'/>Diesen entgültigen Code fügen wir nun nach unserem CSS-Teil ein: Öffnet hierzu wieder HTML bearbeiten, sowie das Suchfeld mit Strg+F, indem ihr wieder auf eine beliebige Stelle im Text klickt.
Im Suchfeld gebt ihr diesmal <body> ein.
Nachdem ihr auf Enter gedrückt habt, sollte die entsprechende Stelle gelb gefärbt sein.
Davor fügen wir nun den vorbereiteten Code mit dem Schrägstrich ein, also so:
Zum Vergrößern einfach auf's Bild klicken!
Und jetzt machen wir das Gleiche, wie bei der ersten Möglichkeit auch: Wir definieren die Eigenschaft für die Schriftart. Meine Schriftart heißt ja Calligraffitti, also sieht der Code so aus:
font-family: Calligraffitti;Wenn ihr euch bei den Google Webfonts eine andere Schrift rausgesucht habt, müsst ihr den Teil nach font-family natürlich entsprechend anpassen.
Notiert euch den am besten irgendwo, denn jetzt geht's weiter...
3. Weitere Eigenschaften
Wir haben nun bereits die Schriftart definiert; die ist ja bei einer Überschrift auch am wichtigsten!Nun fahren wir mit weiteren Eigenschaften fort.
Diese schreiben wir zwischen die geschweiften Klammern des Grundgerüsts, das wir bereits beim ersten Schritt erstellt haben. Dieses sollte sich ja bereits an der entsprechenden Stelle befinden, wenn ihr diesen richtig durchgeführt habt. So sieht es also aus:
/* Unterüberschriften
----------------------------------------------- */
#Überschrift {}
/* Unterüberschriften
----------------------------------------------- */
#Überschrift {
font-family: Calligraffitti;
}
Und nun ergänzen wir weitere Eigenschaften.
Ich hab euch mal ein paar mögliche in einer Tabelle zusammengeschrieben:
Eigenschaft
|
Wert
|
Erklärung
|
font-size: | 18px | Schriftgröße (Angabe in Pixel) |
color: | #639194 | Farbe der Überschrift • Such dir hier 'ne Farbe aus: ColorPicker |
text-align: | left / right / center | Textausrichtung:
• left: nach links ausgerichtet • right: nach rechts ausgerichtet • center: zentriert |
letter-spacing: | 1px | Abstand zwischen den einzelnen Buchstaben (Angabe in Pixel) |
word-spacing: | 3px | Abstand zwischen den einzelnen Wörtern (Angabe in Pixel) |
text-transform: | uppercase / lowercase | Text wird in Groß- bzw. Kleinbuchstaben angezeigt
• uppercase: Großbuchstaben • lowercase: Kleinbuchstaben |
border-bottom: | 1px soild #ccc | Linie unterhalb der Überschrift • 1px: Breite der Linie (Angabe in Pixel) • solid / dotted / dashed: durchgezogen / gepunktet / gestrichelt • #ccc: Farbe (siehe ColorPicker) |
background: | #eee | Hintergrundfarbe der Überschrift (siehe ColorPicker) |
Sucht euch nun die Eigenschaften raus, die ihr gerne verwenden möchtet, oder, falls ihr im CSS-Bereich schon etwas erfahren seid, fügt weitere hinzu, die ich hier nicht aufgezählt habe - denn da gibt es noch eine ganze Menge Möglichkeiten!
Passt auf jeden Fall auch die Wertzuweisungen auf euch persönlich an, meine in der Tabelle sind ja nur Beispiele!
Die fertigen Eigenschaften mit den Werten fügt ihr genauso ein, wie die font-family-Eigenschaft auch. Vergesst nicht, nach jeder Wertzuweisung ein Semikolon zu setzen!
So könnte das also nun aussehen:
Beispielüberschrift
/* Unterüberschriften
----------------------------------------------- */
#Überschrift {
font-family: Calligraffitti;
font-size: 24px;
color: #639194;
text-transform: lowercase;
border-bottom: 1px dotted #bbb;
letter-spacing: 1px;
}
Bestätigt die Änderungen mit einem Klick auf Vorlage speichern.
4. Einfügen der Überschrift in den Post
Die Überschrift in den Post einzufügen ist jetzt ganz einfach. Dazu benötigt ihr diesen Code:<div id="Überschrift">Hier deine Überschrift</div>Text eures Blogposts
Achtung!
Wenn ihr nun wieder auf Verfassen zurückschaltet, bemerkt ihr keine Veränderung. Ihr habt also nur eure Überschrift in der ganz normalen Schriftart und -größe vor euch, das heißt, sie unterscheidet sich nicht vom Rest eueres Blogposts. Wenn ihr jedoch auf Vorschau klickt, wird die Überschrift letztendlich richtig angezeigt.Also, kein Grund zur Panik.
5. Mehrere Überschriften gleichzeitig
Auf diese Art und Weise könnt ihr übrigens auch ganz verschiedene Überschriften gestalten.Dabei müsst ihr allerdings darauf achten, sie dann nicht mehr Überschrift zu nennen, sondern vielleicht Überschrift1 oder ÜberschriftBlau und die Codes anzupassen.
Wie ihr seht, hab ich hier für beide Codes den Namen Überschrift verwendet. Wenn ihr eine zweite erstellt und diese beispielsweise Überschrift1 nennt, müsst ihr natürlich auch beide Codes anpassen.
Ich hoffe, euch hat das Tutorial etwas weitergeholfen!
Wenn's noch Fragen oder Unklarheiten gibt, könnt ihr mir gerne einen Kommentar hinterlassen. Ich antworte euch dann auf eurem Blog und versuche, euer Problem oder eure Frage zu klären.
Auch wenn ihr Vorschläge oder Wünsche für weitere Tutorials habt, könnt ihr mir gerne Bescheid sagen.
2 Kommentare
Oh wie toll, das hast du klasse gemacht :)
Echt gue erklärung. Dein Blog ist übrigends echt wundervoll, sieht dehr professionell aus :D Da musste ich dirgleich mal via gFc folgen <3
Dir einen wundervollen Tag Süße und pass gut auf dich auf!
Isabella <3
glam-of-life.blogspot.com