より美しいHTMLをシェアしよう ShareHtmlを、もっと綺麗にしたメーカー うまく動かなかったら、こちらどうぞ→解説リンク # プレビュー 【簡単】StripeとGAを連携して、コンバージョン測定する方法 StripeとGoogleアナリティクスを連携しつつ、コンバージョン計測する方法を解説しました。これを実行すると「Stripeの売上は、どこから発生したのか？」が明確になります。コンバージョンの発生元（＝リファラー）が明確なら、PDCAを回しやすいですよね。ぜひ参考にどうぞ。 # HTMLコード <a href="https://manablog.org/" style="text-decoration: none;"><div class="link-box"><div class="img-box"><div style="background-image: url('https://manablog.org/wp-content/themes/manabu/images/ogp.png');"></div></div><div class="text-box"><p class="title">【簡単】StripeとGAを連携して、コンバージョン測定する方法</p><p class="description">StripeとGoogleアナリティクスを連携しつつ、コンバージョン計測する方法を解説しました。これを実行すると「Stripeの売上は、どこから発生したのか？」が明確になります。コンバージョンの発生元（＝リファラー）が明確なら、PDCAを回しやすいですよね。ぜひ参考にどうぞ。</p></div></div></a> # CSSコード .link-box{border:1px solid #e1e1e1;padding:10px;display:flex;margin:30px}.link-box:hover{background-color:#f3f3f3;-webkit-transition:background-color .35s;transition:background-color .35s}.img-box{width:25%;float:left}.img-box div{min-height:170px;background-size:cover;background-position:center center}.text-box{width:75%;float:left;padding-left:20px;line-height:1.7;margin:0}.text-box .title{font-size:18px;font-weight:600;color:#428bca;padding:0;margin:0}.text-box .description{font-size:15px;color:#333;padding:0}@media only screen and (max-width:479px){.img-box div{min-height:80px}.text-box{margin-left:10px;line-height:1.5}.text-box .title{font-size:13px;margin:0}.text-box .description{font-size:11px;margin-top:5px}}