Home Behind Design Panem-Mania Impressum
Home Panem-Mania News Buchreihe Spotttölpelspiele Das Team Skype-Gruppe Gästebuch Copyright-Info

CSS: Unterüberschriften erstellen

Montag, 7. Juli 2014 ♥ 2 Kommentare

Hallo, ihr Lieben!
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:
http://img5.fotos-hochladen.net/uploads/unterberschrifavpqcx2ul7.png

1. Grundgerüst
  1. Klickt in dem Menü rechts auf Vorlage und dann auf HTML bearbeiten, sodass ihr einen bunt gefärbten Text vor euch habt.
  2. Nun öffnet ihr den CSS-Teil, indem ihr auf den Pfeil (►) am linken Rand klickt.
http://img5.fotos-hochladen.net/uploads/unterberschrifn4yeqhbspc.png
  1. 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.
  2. Über eurem ersten Suchergebnis, das übrigens gelb hinterlegt wird, fügt ihr folgendes ein (siehe Screenshot):

  3. /* 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:

http://img5.fotos-hochladen.net/uploads/unterberschrif7y2qejftnb.png

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:

http://img5.fotos-hochladen.net/uploads/unterberschrifxvqr12ds6u.png
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 {}
Zunächst fügen wir unsere font-family-Eigenschaft zwischen die Klammern ein:

/* 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;
}
So, das war's auch schon.
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
Öffnet dazu den Editor eures gewünschten Postes und wechselt links oben von Verfassen auf HTML. Dort - unter HTML - fügt ihr den Code ein und ersetzt das "Hier deine Überschrift" logischerweise durch eure Überschrift.

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.

http://www.fotos-hochladen.net/uploads/berschriftwzxk20v8ei.png

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

Unknown
12. Juli 2014 um 10:10

Oh wie toll, das hast du klasse gemacht :)

Unknown
16. Juli 2014 um 12:41

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