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

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

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

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

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

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

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

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

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

画像キャプションをアイコンで超可愛くする【HTML/CSS】
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でコードを入れないとせっかくの画像キャプションが入らないぞ☆

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

タイトルとURLをコピーしました