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

ぜひ参考にして下さい。

2colum-lp-custom2

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

CSSで見出しを消す

hummingbird-lp-custom2

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

 

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

#content.lp-wrap .hentry header {
 display: none;
}

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

 

 

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

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

hummingbird-lp-custom3

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

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

 

hummingbird-lp-custom4

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

 

本文部分をdivで囲う

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

<div class="lp-magazine">
</div>

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

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

 

CSSでレイアウトを調整

/*=============================================
                LPフルヘッダー画像custom
===============================================*/
header.article-header {
	display: none;
}

@media only screen and (min-width: 768px) {
	#content.lp-wrap .entry-content {
    padding: 0;
}
	#content .wrap {
		width: 100%;
	}

	#content.lp-wrap {
		margin-top: 0 !important;
	}

	#container .lp-containar {
    max-width: 100% !important;
}

	.lp-magazine {
		padding: 0 10em;
	}
}


@media only screen and (max-width: 768px) {
  .entry-content .lp-magazine {
    padding: 0 !important;
}

	div#content.lp-wrap {
		margin: 0;
	}

	#content .wrap {
		width: 100%;
	}
}

 

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

hummingbird-lp-custom5

 

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

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