ハミングバードのLPページをフルヘッダー画像にするカスタマイズ方法【保存版】

office-581131_1280

ぶっちゃけもうLPテンプレートは要らない。
そんくらいのカスタムを公開してしまいます!

ぜひ参考にして下さい。

スポンサーリンク

2colum-lp-custom2

このページをフルヘッダー画像を入れていきますね。

CSSで見出しを消す

hummingbird-lp-custom2

まずはページタイトル。これ別になくてもいいので消しちゃいます。
(ヘッダー画像の下に入れる方法もありますが今回は割愛。)

 

CSSに以下のコードを追加して下さい。

これでタイトル部分が消えるはずです。

 

 

ヘッダー画像を本文に貼り付け

次にヘッダー画像を普通に本文の一番上の部分に貼ります。

hummingbird-lp-custom3

こんな感じ。記事の編集画面で普通に貼り付けます。

※「バズ部っぽいLPを作る方法」で2カラムにしてる人は
「<div class=”main-lp”>」の下に画像を入れないように。

 

hummingbird-lp-custom4

こんな感じになります。このままでも悪くはないですけどね。どうせならフルワイドにしましょう。

 

本文部分をdivで囲う

ヘッダー画像を貼ったHTMLソースの直後に

と本文部分を囲ってみてください。

ヘッダー画像はフルサイズで、
このdiv囲った本文部分の横幅を狭くして調整します。
この調整をしないと本文部分もフルワイドになって
ちょっと文章が読みづらくなっちゃうので。

 

CSSでレイアウトを調整

 

これでカスタムは以上です。

hummingbird-lp-custom5

 

こんな感じで出来ました。
完全にフルヘッダーではないですが、
あとは微調整で出来ます。

CSS出来る人はチャレンジしてみてください^^

 

office-581131_1280

参考になったらぜひシェアしてね!

コメントを残す

メールアドレスが公開されることはありません。