PardotでランディングページにCSSを当てました。
Pardotでランディングページを作る時にCSSを知ってるとちょっとしたことが出来て楽しいです。ランディングページコンテンツというページで普段はビジュアルエディターを使ってデザインを進めるのですが、ややざっくりとした作りにはなるかと思います。
ここでツールの右端のボタンを押すとHTMLモードに画面が切り替わって、HTMLやCSSを書けるようになってより細かく要素をコントロールできます。
とはいえ、最初は何から手を付けたら良いのかとなりますが、ちょうど弊社のディレクターが新人マーケタに教えていたコードが分かりやすかったのでこちらで紹介しますね。
内容は２つの箱（HTMLタグは基本的にみんな四角い箱です）にそれぞれ違う色をつけて、ヘッダー上部にウインドウ幅いっぱいに広げるというものです。
.blue{
background: #2359af;
width: 100%;
height:7px;
margin: 0;
}
たとえば、CSSでこのように記述するとclass = "blue"と命名された<p>タグに対して・・
四角の背景色が#2359af色
幅がウインドウ幅に100%
高さが7ピクセル
四角同士の間隔はゼロ
という指示をします。
こちらが実装例となります。
コードを全文貼っておきますので、cssのプロパティをいろいろ試して感覚を掴んで頂けると幸いです。
<head>
<!--------- ここからCSS ------------>
<style type="text/css"> body{ margin: 0; padding: 0;}
.wrap{ position: absolute; left: 0px; top: 0px; }
.blue{ background: #2359af; width: 100%; height:7px; margin: 0; }
.yellow{ background: #f0cf46; width: 100vw; height:7px; margin: 0; }
</style>
<!--------- ここまでCSS ------------>
</head>
<body><div class="wrap"><p class="blue"></p><p class="yellow"></p></div>
</body>
この記事が気に入ったらサポートをしてみませんか？