いろんな方のブログを見ているとたまに「ほしいものリスト」を貼っている方を見かけますよね。
私もはてなブログで運営している日記ブログにほしいものリストを貼っています。
この記事では、ほしいものリストをオリジナルのバナーにしてはてなブログのスマホ版やPC版に貼る方法をご紹介したいと思います。今回参考にさせていただいたのはこちらの記事になります。
MINIMAL GREENさんはてなブログのサイドバーに画像を貼り付ける方法
実装図
実際に私が運営しているちぴちぴなるままに貼ってあるほしいものリストはこんな感じです。
PC版
スマホ版
こんな感じで自分のオリジナルの画像にリンクをつけておしゃれにアレンジできちゃいます！
おしゃれなほしいものリストの貼り方
工程１：オリジナル画像の用意
まず、画像作成ソフトで貼りたい画像を作っておいてくださいね！
ちなみに、私はcanvaを使って作りました。（参考記事：キャンバの使い方）
キャンバを使えばスマホで簡単におしゃれな画像が作れます。
工程２：はてなフォトライフに画像をアップロード
次に、作成した画像をはてなフォトライフにアップします。
アップロードからファイルを選択して画像をアップロードします。パソコンからでもスマホからでもできます。
そして、画像の上にカーソルを載せて右クリックして、画像のアドレスを取得しておきます。
工程３：ソースの作成
さてここが重要な部分になります。
以下のコードに画像のURLを入れます。
<a href="欲しいものリストのURL"><img src="画像のアドレス" alt="ほしいものリストの画像" /></a>
ほしいものリストのURLのところに自分のアマゾンのほしいものリストURLを入れます。画像のアドレスのところにさきほどはてなフォトライフで取得したURLを入れます。
ちなみにアマゾンのほしいものリストのURLの取り方は以下になります。
アマゾンの自分のほしいものリストのページでシェアするボタンをクリックします。
固定リンクのアドレスがあなたのほしいものリストのアドレスになります。
工程４：ソースをサイトの好きな部分に貼る
上のソースコードをはてなブログの好きな箇所に貼ります。ちなみに私のブログでは、レスポンシブデザインにしてPCのサイドバーに貼っています。
まとめ
以上でおしゃれなほしいものリストの画像が貼れました。簡単ですね！
今回紹介した方法は、ほしいものリストだけでなく、いろんなバナーを貼るのに使えます。
自分だけのオリジナルバナーを作ってご自身のブログに貼ってみて下さい！
ちなみに、私のほしいものリストは、こちらです。この記事が役に立ったという方はぜひ・・・！（よだれ）
では、今回もお読みいただきありがとうございました！
