【ブログカスタム】めっちゃ可愛くした画像キャプションをバナーリンクにする

グルメブログ「うまいものブログ」をぺ（@umaimonoblog）です

今回はぽんひろさん（@ponhiroo）のこの記事を参考に画像キャプション付きで可愛く装飾したんだけれども
もっと活用したい！！と欲が湧いた”男の汗と涙の結晶”の記事です（嘘です）

HTMLとCSSで画像のキャプションを可愛いくします！ただそれだけ！目立つので読者の印象に残るのではないでしょうか。画像サイズ問わず使えるようになっていますが位置やサイズの調整は必須になっています。他にもカスタマイズをやってるのでよかったら...

めっちゃ簡単に画像が可愛いバナーになります

※”可愛い”は人によって感性が異なります

【おさらい】CSSには共通が追加でコードが書いてある
【おさらい】画像右上に表示させるためのCSSとHTML
実際に可愛くなった画像キャプションにタグを加える

をぺ

名古屋のデート向けの隠れたグルメをご案内する"をぺ"です。
飲食店専門Webマーケティング・コンサルティングの営業職が本業。
飲食店の表も裏も知っている私が、美味しい飲食店を食べ歩きしてプチ贅沢なデートにオススメのおすすめな本当に美味しいお店をご紹介します。
ランチやディナーでぜひお楽しみいただければと思います！
いま、気になっていることはM字ハゲ。

【おさらい】CSSには共通が追加でコードが書いてある

画像キャプションをアイコンで超可愛くする【HTML/CSS】

【おさらい】画像右上に表示させるためのCSSとHTML

画像キャプションをアイコンで超可愛くする【HTML/CSS】

ここまでいれたらほぼ終わりです（丸パクリです）

あとはバナーリンクにしたいのでHTMLでリンクをつけるタグ（<a href=）で画像を指定して囲うだけ

実際に可愛くなった画像キャプションにタグを加える

<div class="figure-caption-icon-wrap figure-caption-icon-1">
<figure>
<a href="リンク先"><img src="画像.jpg" alt="画像代替テキスト"></a><figcaption class="img-caption"><span class="img-caption-text">キャプション</span></figcaption></figure>
</div>

この、<a href= > </a>で画像を囲ってあげるだけであら不思議！

画像が可愛くデコレーションされつつ画像自体にリンクが貼られます
可愛すぎるのでおすすめです

※カスタムHTMLでコードを入れないとせっかくの画像キャプションが入らないぞ☆

何かの参考になれば幸いです