ぶっちゃけもう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出来る人はチャレンジしてみてください^^

 

4 Comments

  • by
    橋本
    Posted 2016年10月4日 12:50 AM 0Likes

    非常に参考になりました、これならハミングバードのLPも見違えますね! ただこれって、投稿ページや固定ページのアイキャッチも全て消えてしまうようなんですが・・・LP部分にだけ効果が出るような形には出来ないものでしょうか? もしそのような方法があったら、教えていただけると助かりますm(__)m

  • by
    あおい
    Posted 2017年4月9日 3:19 PM 0Likes

    この方法で実践するとLPページ以外のすべてにCSSが機能するようになってしまうようです。
    非常にわかりやすい記事でしたができればLPのみに反映される設定方法を教えていただけると嬉しいです!

    よろしくお願いします。

    • by
      与那嶺 隆之
      Posted 2017年4月11日 5:40 PM 0Likes

      お!まじすか
      ちょっと確認しますね

    • by
      与那嶺 隆之
      Posted 2017年4月11日 5:41 PM 0Likes

      たぶんクラス名に「lp」って名前がついているやつを指定すれば行けると思いますね〜
      いま僕が書いてるやつだとそれ以外のページ(wrapなど)も摘要されるようになっちゃってるかもです

Leave a comment