CocoonでワンカラムのLPを作成する方法[初心者・シニア]その1:いらないパーツを非表示にする

2021年4月28日

この記事ではCocoonを使ってワンカラムのLP(ランディングページ)を作成する方法を初心者向けに紹介しています。

LP(エルピー)とはLanding pageランディングページ)の略で、主には商品紹介のセールスページ等にみられる細長い1枚のWebページの総称です。大きく分類するとセールスページ(自分のコンテンツを紹介するページ)とレビューページ(アフィリエイトなどで他の人のコンテンツを紹介するページ)があります。(*細かくいうともっといろいろな定義がありますがまずはざっくり、詳細はググってください(^▽^))

LPを作成する場合、一般的には「Colorful(カラフル)」や「ペライチ」といった有料のテーマやサービスを利用することが多いです。用意されているパーツが豊富で、とても簡単な操作で見栄えのよいLPが作成できるのでお勧めです。でもこれらを使用すると「みんな同じようなLPになってしまう」「ちょっと自分のサイトにはデザイン的にしっくりこない(^^)」等で二の足を踏んでいたり、また有料なのは、、、と躊躇している方のために、無料テーマのCocoonを使ってオリジナルなLPを作成する方法をご紹介します。

ちょっと、専門的なcssコードもありますが、コピペして貼り付けるだけで設定できるように案内していますので、是非トライしてみてください。

ではでは、始めましょう。

 

Cocoonで固定ページを作る

まず、今回ご紹介する方法はCocoonの固定ページを使用します。
 固定ページにそのページ独自のCSSを設定をして、そのページだけヘッダーやサイドバーを非表示にしたり、見出しを独自のデザインにしたりできます。同じブログの他の固定ページや投稿ページには影響がありません。
つまり、あたかも別のブログを作って別のテーマを使っているような感覚で、運営しているブログ内でオリジナルなLPが作成できます。

 さらに、固定ページごとにCSS設定ができるので、LPごとにレイアウトやパーツのデザインを変えることもできます。

まずは基本の1パターンを作ってみて、ものにしたらバリエーションを広げて色々挑戦してみてください(^^)。

作成Go! です。

 

固定ページの新規作成

まず、新規で固定ページを作成します。

WordPressのダッシュボードで、[固定ページ]≫[新規追加]をクリックします。

キャプチャー、固定ページの作成

 

タイトルを入力して、下書き保存します。(タイトルは非表示にするので自分がなんのLPかがわかるタイトルがよいです:WordPressの固定ページ一覧で見分けるためです)

キャプチャー、タイトル入力

 

プレビューで確認

この時点でプレビューで確認してみます。

画面右上の[プレビュー]をクリックし、表示されたメニューで[新しいタブでプレビュー]をクリックします。
*上部はパソコンで操作している場合はデスクトップにチェックが入っていればOKです。
キャプチャー、プレビューで確認

 

プレビュー画面が表示されます。

まだ中身はなにも入力していませんがこのように、ヘッダーやサイドバー、その他のリンクボタン等が表示されています。
LPには、これらの余分な情報は表示させないのが原則です。

 

キャプチャー、作成した固定ページの表示

ということで、まずこれらの表示を消す作業をします。

 

LPの原則=関係ない情報は見せない、他のページに移動させない。
*なのでLPの内容以外は目に触れさせないことが大事です。

そのために
・ヘッダーやサイドバーの非表示
・その他リンクボタンやリンクを非表示(リンクは申し込みボタンのみ)

 

固定ページのサイドバーを非表示にしてワンカラムにする

まず、サイドバーを消します。稀にサイドバー付きのLPもありますが、基本ワンカラム(左右ともサイドバーがなく、ひとつの枠で構成される状態)です。
*特に今回は既存のサイト(自分が運営しているブログ)を利用するので、そのサイトのサイドバーの情報が表示されるのはお勧めしません。

固定ページの編集画面の右サイドバーで、[文書]が選ばれていることを確認します。

キャプチャー、文章

 

[ページ設定]の欄を探し、「▼」をクリックして「▲」状態にします。
*ページ設定の欄が右サイドバーに無い場合は、記事下の領域を探してください。

キャプチャー、ページ設定

ページタイプの設定画面が表示されます。
デフォルト」の文字の右にある「」をクリックして、ページタイプを「1カラム(広い)」をクリックします。

キャプチャー、ワンカラム

続いて、

読む時間を表示しない
目次を表示しない
の両方にチェックをいれます。

キャプチャー、その他のチェック

 

これで、ワンカラムになります。

もう一度プレビューしてみます。サイドバーが消えました(^▽^)/

キャプチャー、サイドバーの消えた状態

 

固定ページから不要な表示を消す

次に、ヘッダー、タイトル、日付、さらに、メニュー、SNSのボタン、投稿者名を消します。
これらの表示を消すためには、cssの修正が必要です。
*設定はこのページのみにおこなうので、このページ専用に働くcss欄で設定をします。

消す項目は以下です。

ヘッダー画像
タイトル
日付表示

メニューバー
SNSのボタン
投稿者名

 

ヘッダータイトル日付の非表示

まず、「ヘッダー」、「タイトル」、「日付」を消します。
以下のCSSの設定をコピーして、記事下のカスタムcss欄に貼り付けます。
*ここではCSSの解説は割愛します、知りたい方はググって調べてください(^^)

これを全てコピー
↓↓↓↓↓↓↓↓

/*———————————
固定ページのヘッダーを非表示にする
——————————–*/
#header{
display:none;

/*———————————
固定ページのタイトルを非表示にする
——————————–*/
h1.entry-title{
display:none;
}

/*———————————
固定ページの日付を非表示にする
——————————–*/
.post-1078 .date-tags {
display: none;
}

*上記の赤字の数字は、以下を参照にご自身の設定ページのコード番号に置き換えてください。

 

日付の非表示を有効にするには、該当するページの「.post-1078」番号を入れる必要があります。

[.post-1078 ]の調べ方

固定ページ一覧で、該当の記事の件名にマウスを当てると、画面下にページのURL情報が表示されます。[.post*** ]の部分が該当のコード(数字)です。
キャプチャー、コードの確認方法

 

上記のコードを張り付ける場所は以下です。

固定ページの編集画面の下に、「カスタムcss」と表記された欄があります。「▼」をクリックして「▲」状態にします。
表示された枠の中に、コピーした内容を張り付けます。

 

「下書き保存」して「プレビュー」を確認してみましょう。
ヘッダー、タイトル、日付が消えました。

 

続いて、「メニューバー」、「SNSのボタン」、「投稿者表示」を消します。

キャプチャー、タイトルや日付を消した状態

 

メニューバー、カテゴリーメニュー、投稿者の非表示

メニューと、投稿者はは上記と同じようにCSSで消します。
*今回サンプルにしているブログでは、カテゴリーを表示させるためのボタンを設置しているのでこれもけします。(設置していない場合はこの部分は省いてかまいません。

これをコピー
↓↓↓↓↓↓↓↓

/*———————————
メニューバーを非表示にする
——————————–*/
#navi{
display:none;
}

/*———————————
投稿者の表示を非表示にする
——————————–*/
.article-footer{
display: none;
}

/*———————————
3つのカテゴリーメニューを非表示にする
——————————–*/
.twice-notice{
display: none;
}

 

カスタムcss」の欄の続きに貼り付けます。

キャプチャー、CSS追加

 

SNSボタンの非表示

SNSボタンの非表示もCSSで可能ですが、今回は全ての固定ページで表示させないように設定するので、Cocoon設定を使います。

WordPressのダッシュボードで、[Cocoon設定]≫[Cocoon設定]とクリックします。
キャプチャー、コクーン設定

 

Cocoon設定の画面が開きます。
[SNSシェア]のタブをクリックします。

キャプチャー、SNSシェア

トップシェアボタンの設定で、表示ページの[固定ページ]のチェックを外します。

キャプチャー、トップシェアボタン

続いて

ボトムシェアボタンの設定で、表示ページの[固定ページ]のチェックを外します。

キャプチャー、ボトムシェアボタン

 

これで、シェアボタンの表示が消えます。

キャプチャー、シェアボタンが非表示になる

 

次に、[SNSフォロー]のタブをクリックします。

キャプチャー、SNSフォロー

表示ページの欄で[固定ページ]のチェックを外します。

キャプチャー、表示ページ

 

「下書き保存」して「プレビュー」を確認してみましょう。
これで全ての表示が消えました。

*ホームボタンはホームに帰れるので残しておきます
*フッターメニューは「プライバシーポリシー」「特定商取引法に基づく表示」ともに表示が必要なので残しておきます。

キャプチャー、非表示の完成

 

これで、基本的な準備は完成です。

差し支えなければ[公開]して、表示を確認してください。
(LPができあがってから公開してもかまいません)

 

では、いよいよLPを作成していきましょう。
↓↓↓↓↓↓↓(次に読む記事)

CocoonでワンカラムのLPを作成する方法[初心者・シニア]その2:LPのパーツを作る

 

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市というところで、非常勤のデザイン講師をしながら、ブログやメルマガを利用したネットビジネスをご紹介しています。

このブログと連携して「ゆとりのシニアライフを実現させる」をテーマにメルマガを配信、シニア&初心者向けにネットビジネスの魅力と取り組み方をお伝えしています。噛み砕いた解説がわかりやすいと好評です(^^)
経済的にも心にも「ゆとり」をもたらす収入をゲットしませんか!
イラスト、葉っぱ付きりんごを持ったおじさんとおばさん ブログを作ったけどアクセスが無い!、アフィリエイトの成果が出ない!
そんなあなたは必見ですよ
SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ノ゙
↓↓↓↓↓↓↓↓↓↓ バナー、りんごメルマガ登録用 *詳細ページが表示されます、すぐにメルマガ申し込みはされません

よろしければ、この記事やブログに関する 感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です(^^)
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは お問合せ

お願い記事内の不具合や間違い等をお知らせください。 (キャプチャーの違い、古くなった情報、誤字脱字等些細なことでもかまいません)
↓↓↓↓↓↓↓↓
バナー、不具合問い合わせフォーム *お知らせいただいた方にはりんごからささやかなお礼を送らせていただきます。