CSS und WordPress - Bloglayout anpassen

CSS und WordPress: der ultimative Guide zum Anpassen deines Bloglayouts

Hast du dich schon mal gefragt, wie du das Layout von deinem WordPress-Blog aufpeppen kannst?

Na, dann mal los, denn in diesem Artikel lernst du CSS kennen: die Superkraft, mit der du deinen Blog in ein wahres Meisterwerk verwandeln kannst. đŸ€©

Was in aller Welt ist CSS?!

Die AbkĂŒrzung CSS steht fĂŒr Cascading Style Sheets: CSS ist eine Coding-Sprache, mit der du das Aussehen deiner Webseite definieren kannst. Du legst damit fest, welche Farben der Hintergrund und die Elemente haben sollen, wie groß die Schrift ist, wie breit deine Sidebar sein soll und so weiter.

Ohne CSS wĂŒrde jede Webseite einfach nur langweilig aus schwarzer Schrift auf weißem Grund bestehen. GÀÀÀÀhn!

Du kannst dir CSS also als Make-Up fĂŒr Webseiten vorstellen – es verleiht deinem Blog den Glanz, den er verdient. 😉

Wie sieht CSS aus?

Die CSS-Anweisungen werden in einer Datei gespeichert, die mit dem KĂŒrzel .css endet. Traditionell wird dieses sogenannte Stylesheet oft als style.css abgespeichert.

Du kannst dir die CSS-Gestaltung jeder Webseite anschauen, indem du auf ein Element rechtsklickst und „Untersuchen“ wĂ€hlst: das zeigt dir den verwendeten CSS-Code. Cool, oder?

CSS schreibst du so, dass du das gewĂŒnschte HTML-Element ansprichst – mit seinem Elementnamen, als Klasse oder ID – und dann die Formatierungsanweisungen in geschweifte Klammern { } packst.

Hier sagen wir, dass alle AbsĂ€tze (p ist das HTML-Element, das einen Absatz generiert) eine SchriftgrĂ¶ĂŸe von 16px haben sollen und der Text als Blocksatz gesetzt sein soll:

p {
   font-size: 16px;
   text-align: justify;
}

Klassen sprichst du ĂŒber einen vorangestellten Punkt an. Die folgende Anweisung verleiht allen Bildern, die im HTML die Klasse avatar bekommen haben, einen grauen Rahmen.

HTML:

<img class="avatar">

CSS:

img.avatar {
   border: 2px solid #ccc;
}

HTMl-Elemente mit einer ID sprichst du im CSS ĂŒber eine Raute an – in diesem Falle gibst du dem Bereich, in dem die Kommentare angezeigt werden, nach oben hin einen Abstand von 20px.

HTML:

<div id="kommentare">

CSS:

#kommentare {
   margin-top: 20px;
}

Das Who’s who der CSS-Anweisungen

Es gibt eine riesige Menge von CSS-Definitionen.

Dir hier jetzt alle verfĂŒgbaren CSS-Anweisungen vorzustellen, wĂŒrde den Rahmen dieses Beitrags ganz dezent sprengen. 😉
Ganz genauso wie Deutsch oder Französisch entwickeln sich nĂ€mlich auch Coding-Sprachen weiter und werden im Laufe der Jahre immer umfangreicher. Um die Jahrtausendwende herum lag der Fokus bei CSS auf Farben, GrĂ¶ĂŸen und grundlegenden Positionsangaben (und nicht zu vergessen: Rahmen! 😀 ). Mittlerweile kannst du mit CSS auch Animationen erstellen und dein Layout sehr flexibel an unterschiedliche AusgabegerĂ€te anpassen, damit es auf Smartphones genauso schick aussieht wie auf großen Bildschirmen.

Die folgende Liste soll dir nur mal schon einen ganz groben Überblick verschaffen, was was ist:

  • background & color: Farbe
  • alles, was mit text- oder font- beginnt – Schriftgestaltung
  • border: Linien
  • margin & padding: AbstĂ€nde
  • width, height: Dimensionen
  • position, display, float & clear: Anzeige und Ausrichtung von Elementen

Du siehst schon: CSS ist wirklich mÀchtig.

Der Charme von WordPress und CSS

WordPress ist bereits ein verdammt großartiges Content-Management-System (CMS) fĂŒr Blogger. Damit hast du definitiv die richtige Entscheidung getroffen!

Und natĂŒrlich bringt WordPress auch von Anfang an einige Layouts mit – du startest also nicht mit der besagten schwarzen Schrift auf weißem Hintergrund. 😉
Du kannst dir auch ganz einfach andere Layouts bzw. Themes aussuchen, es gibt Tausende kostenloser Themes und ebenso viele Premium-Themes – das ist schon wirklich cool!

Aber seien wir ehrlich: manchmal braucht es ein wenig mehr Pep, um aus der Masse herauszustechen. Denn egal wie schick das von dir ausgesuchte Theme ist – sofern du es nicht individuell in Auftrag gegeben hast, wird es so oder so Ă€hnlich auch schon auf vielen anderen Blogs verwendet.

Hier kommt CSS ins Spiel! Damit kannst du dein Theme nĂ€mlich haargenau an deine WĂŒnsche anpassen.

So, dann wollen wir mal! Bist du bereit? 🙂

Safety first…

Die obligatorischen Sicherheitshinweise:

  1. Leg dir ein Backup an von allem, was du verĂ€nderst! Du kannst die CSS-Anweisungen ĂŒber copy & paste einfach in eine leere Textdatei sichern und im Zweifelsfall einfach wieder zurĂŒckkopieren.
  2. Wurschtle nicht live auf deinem Blog herum, wenn du nicht genau weißt, was du tust. Erstell dir einen Testblog und probiere dort in Ruhe alles aus. Du willst ja schließlich nicht, dass deine Leser plötzlich in einem bunten Scherbenhaufen landen.

Wo kannst du in WordPress CSS eingeben?

Bei WordPress hast du drei verschiedene Möglichkeiten, um dein Layout mit deinem eigenen CSS anzupassen:

Option 1: ĂŒber den Customizer

WordPress ermöglicht es dir sehr komfortabel, das CSS direkt im Adminbereich zu bearbeiten.

Du brauchst dafĂŒr also kein anderes Programm.

Klick links in der Sidebar einfach auf den MenĂŒpunkt „Design“ und geh dann auf „Customizer“. Je nachdem, wie umfangreich dein Theme programmiert ist, kannst du hier superviele Einstellungen ĂŒber Formulare vornehmen.
Ganz unten findest du schließlich den Punkt „ZusĂ€tzliches CSS“ – das ist das, wo wir hinwollen!

Hier kannst du nĂ€mlich direkt deinen CSS-Code eintippen: frei und wild und unabhĂ€ngig von irgendwelchen vorgegebenen Einstellungsmöglichkeiten! đŸ„ł

Wie der Name schon sagt, gibst du hier zusĂ€tzliches CSS ein. Das wird also am Ende an die Anweisungen drangehĂ€ngt, die dein Layout ohnehin schon verwendet. Damit ĂŒberschreibt es die Angaben, die weiter oben im Stylesheet standen.

Option 2: in der style.css via WordPress

Alternativ zum Customizer kannst du das Stylesheet deines Themes auch direkt im Theme-Datei-Editor anpassen. Der Theme-Datei-Editor listet dir sÀmtliche Dateien auf, aus denen dein Theme besteht. Du kannst sie direkt von WordPress aus bearbeiten.

Dadurch musst du also nicht bereits bestehende Gestaltungsanweisungen ĂŒberschreiben (wie es das zusĂ€tzliche CSS im Customier tut), sondern kannst sie von vornherein nach deinen WĂŒnschen definieren.

Das macht die ganze Sache natĂŒrlich deutlich schlanker! Teilweise ist das mit dem nachtrĂ€glichen Überschreiben auch nicht ganz so trivial, gerade bei sehr verschachtelten Anweisungen.

Allerdings verĂ€nderst du hiermit auch bestehende Angaben. Du solltest also mehr oder weniger wissen, was du tust. đŸ€“

Den Theme-Datei-Editor findest du, indem du links im MenĂŒ auf „Design“ gehst und dann den letzten Eintrag wĂ€hlst.

Option 3: in der style.css auf deinem Webspace

Der Theme-Datei-Editor ist schon ganz nett. Wenn du aber bereits etwas Erfahrung im Coden hast, wirst du so wie ich vermutlich lieber mit eigens dafĂŒr entwickelten Programmen arbeiten wollen. Hier hast du andere Auto-VervollstĂ€ndigungen, farbliche Hervorhebungen der Anweisungen und so weiter.

Um dein Stylesheet in einem Texteditor wie Brackets oder Sublime zu öffnen, greifst du mit einer FTP-Verbindung direkt auf die Dateien auf deinem Webspace zu. Du findest dein Theme im Verzeichnis deines Blogs unter wp-content/themes/deintheme, dort liegt die style.css.

Option 4: nutz ein Child-Theme

Du hast jetzt drei Wege kennengelernt, um das CSS deines Layout zu verĂ€ndern. FĂŒr kleinere Anpassungen ist das meist auch völlig ausreichend.

Der VollstĂ€ndigkeit halber sei hier jetzt auch noch die sauberste und sicherste Option genannt, um dein Layout in WordPress zu verĂ€ndern: ĂŒber ein sogenanntes Child-Theme.
Damit kannst du nicht nur das CSS anpassen, sondern auch das PHP und HTML deines Layouts.

Da das an dieser Stelle aber zu weit fĂŒhren wĂŒrde, verweise ich dich mal auf meinen Artikel ĂŒber Child-Themes:

Einige CSS-Tipps, um dein Bloglayout zu rocken

Jetzt ist es an der Zeit, deinen CSS-Zauberstab zu schwingen!

Du kannst beispielsweise deine BlogĂŒberschrift mit font-family stylen, die Farben deiner Links mit color Ă€ndern oder deine Sidebar mit margin und padding neu anordnen.

Die Möglichkeiten sind endlos! Aber hey, ĂŒbertreib es nicht – du willst bei deinen Bloglesern schließlich keine Augenblutungen verursachen. 😅

Verzweifle nicht, wenn etwas schiefgeht

CSS kann manchmal frustrierend sein, besonders wenn dein Blog plötzlich wie ein GemĂ€lde von Picasso aussieht. đŸ€Ș Aber keine Sorge, das ist normal!

Experimentiere, probiere herum und sei nicht entmutigt. In der CSS-Welt ist das Scheitern der Weg zum Erfolg.

Es kann nichts explodieren und im Zweifelsfall kannst du dir immer wieder dein Backup wiederherstellen.

Google ist dein Freund

Irgendetwas funktioniert nicht und du kommst partout nicht dahinter, wieso? Google es! Das Schöne am Coden ist, dass du mit allergrĂ¶ĂŸter Wahrscheinlichkeit nie der erste bist, der genau vor diesem Problem steht. Und meistens hat auch schon irgendjemand auf Stack Overflow oder Ă€hnlichen Seiten nach Hilfe gefragt und Antworten erhalten, die auch dir weiterhelfen.

Kommentier deinen Code

Es ist leicht, im CSS-Chaos verloren zu gehen. Bleib daher organisiert und kommentier deinen Code. Du wirst deinem Vergangenheits-Ich verdammt dankbar sein, wenn du Wochen spÀter versuchst herauszufinden, was in aller Welt du da versucht hast zu coden.

Kommentare in CSS schreibst du so:

/* ich bin ein Kommentar */

Copy & Paste ist super, aber mach es mit Stil

Wie gesagt, du kannst den CSS-Code jeder beliebigen fremden Webseite einsehen. Das ist megacool, weil du dadurch immer schauen kannst, wie dieses oder jenes funktioniert. So lernst du CSS!

NatĂŒrlich kannst du dir die Anweisungen dann auch rĂŒberkopieren auf deinen eigenen Blog.

Aber hey: nimm dir Zeit, um den kopierten Code zu verstehen und anzupassen. Kopier nicht einfach irgendwas, von dem du nicht weißt, was genau es eigentlich tut.

Und selbstverstĂ€ndlich solltest du die Farben & Co. an dein eigenes Layout anpassen und nicht einfach etwas klauen. Schließlich geht es ja gerade darum, deinen Blog individuell zu gestalten und nach Herzenslust anzupassen.

Der SchlĂŒssel zum Erfolg liegt darin, Spaß mit den unendlichen Möglichkeiten von CSS zu haben und deine kreative Seite zum Vorschein zu bringen. 🙂

Fazit

In der BlogosphÀre geht es darum, deine Stimme zu erheben und deine IndividualitÀt zum Ausdruck zu bringen. Mit CSS kannst du deinem Bloglayout eine persönliche Note verleihen und sicherstellen, dass er genauso einzigartig ist wie du selbst.

Also leg los und rock dein WordPress-Layout! đŸ€©

Anne Schwarz | Bloggerin auf Bloghexe

Anne Schwarz

Hey, ich bin Anne - Multipassionate, waschechtes Dorfkind, PferdemÀdchen und Bloggerin aus Leidenschaft.

Ich blogge seit beinahe 20 Jahren und liebe es einfach. Hier auf der Bloghexe teile ich mit dir meine Tipps und Erfahrungen - damit auch dein Blog zauberhaft wird!

» mehr ĂŒber mich & die Bloghexe

Hierzu gibt es bereits einen Kommentar - was denkst du?

Lies weiter:

Widget-Blöcke in WordPress
WordPress: Mail-Benachrichtigung ĂŒber aktualisierte Plugins abschalten

Bisher 1 Kommentar

Schreibe einen Kommentar

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