Wie füge ich eine verlinkte Grafik im Headerbereich ein?

Geschätzte Lesezeit: 1 Minute

Weihnachten steht bevor und ich verspürte das Bedürfnis, meine Blogs zur Adventszeit durch eine Grafik ein wenig aufzupeppen. Auf meiner bunten Blogwelt sollte es eine Weihnachtsmütze sein. Zuerst hatte ich sie über dem „S“ des Blognamens platziert.
Das Problem war allerdings, da mein Header-Board mit dem Zitat auf den Folgeseiten nicht anzeigt wird, schob sich die Mütze nach unten und verdeckte das „S“ fast komplett.

Nun gut, dann lasse ich sie eben über der Navigationsleiste anzeigen. Mit ein bisschen CSS ist das ja leicht umsetzbar. Problem bei dieser Anzeige war allerdings, der Link zur Startseite (Home) war nicht mehr erreichbar, da die Grafik diesen Menülink überlagert.

Bei der Recherche darüber, wie eine Grafik am einfachsten im Headerbereich verlinkt werden kann, stieß ich auf viele Gleichgesinnte, die sich mit dieser Frage beschäftigten. Eines funktioniert schon einmal nicht: Die Verlinkung per CSS. Ebenso erfolglos war die Variante, die für das ausschließliche Einfügen per html vorgeschlagen wurde. Die Grafik wurde damit schlichtweg nicht so dargestellt, wie ich es mir wünschte.

Nachdem ich nicht wirklich eine funktionierende Lösung im Internet fand, probierte ich selber eine Lösung mittels CSS und html. Mit ihr wird die Weihnachtsmütze, sowohl auf der Startseite als auch Folge- und Beitragsseite einwandfrei platziert und verlinkt.

  • Grafik im Header auf StartseiteGrafik im Header auf Startseite
  • Grafik im Header auf FolgeseitenGrafik im Header auf Folgeseiten

 

Html-Code für die Verlinkung und Festlegen der Grafikgröße

Diesen füge ich in die header.php meines Themes „Orangy“ ein.

Ich denke, ich muss nicht groß erklären, dass ihr die vorgenannten Pfade gegen den Eures WordPress-Themes und Eurer Grafik austauscht. smilie

CSS-Code für die Platzierung und Rotation der Grafik

Dieser gehört in die style.css meines Themes.

Ich wünsche Euch eine wunderschöne Vorweihnachtszeit! smilie


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".

2 Kommentare

Kommentare hinzufügen
    • Hallo Marc,

      ach das freut mich aber jetzt – zumal ich mir für die Zukunft fest vorgenommen habe, Dokumentationen auch für Newbies leicht verständlich zu formulieren.

      Danke für Dein nettes Feedback.

      Lieben Gruß aus dem Sauerland,
      Sylvi

Schreibe einen Kommentar

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

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

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

%d Bloggern gefällt das: