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

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.

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

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

<div class="weihnacht"><a href="http://www.bunte-blogwelt.de"><img src="http://www.extern.bunte-blogwelt.de/images/weihnachtsmuetze.png" alt="Weihnachtsmütze" title="Frohe Weihnachten!" border="0" width="140" height="95" style="float:left;margin:-49px 0px 212px 10px" />	</a></div>

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

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

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

.weihnacht{position:absolute;margin-top:10px;z-index:9999;-moz-transform:rotate(-30deg);-webkit-transform:rotate(-20deg);-o-transform:rotate(-20deg);-ms-transform:rotate(-20deg);transform:rotate(-20deg);}

Ich wünsche Euch eine wunderschöne Vorweihnachtszeit! :-)