slicknavを実装して左側にロゴを入れ、さらにロゴにリンクを設定したい

1年以上前に書いた記事で
slicknavを実装して左側にロゴを入れたい！
というものに『ロゴにどうにかリンクを設定する方法はありませんか？』という質問がきたので
その時は時間がなくざっくり追記という形で答えたのですが、もう少し丁寧に解説しようと思います。

slicknavを実装して左側にロゴを入れる方法はbeforeを使用して作成したため、
ここに現実的にリンクを設定することは難しいです。
あくまでbefore、afterとはテキスト類のものしか設定ができません。
backgroundにすれば画像は適応できるがそれが限界でしょう。

では、どうするのか？というと、そもそもbeforeでロゴを設定せずjavascriptでソースを追加する方法で
リンクも設定していきます。

ではまずソースから

slicknaviで記載したJSの下に以下のJSコードを追記します。

$(function(){
$('.slicknav_menu').prepend('<h1><a href="URL"><img src="URL" alt="LOGO"></a></h1>');
});

これで

<div class="slicknav_menu">

というソースの直下に、上記で記載した

<h1><a href="URL"><img src="URL" alt="LOGO"></a></h1>

が追加さます。

URLの部分には、好きなリンク先を設定してください！

ご不明な点はご質問ください！皆さんもぜひ試してくださいね★

Creator Note