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

2021年5月3日2021年7月12日

この記事ではCocoonを使ってワンカラムのＬP（ランディングページ）を作成する方法を初心者向けに紹介しています。LPには様々なパーツが必要ですが、導入には「CSS」等の操作が不可欠で素人的には難しく思えます。そこでなるべく簡単に初心者の方でも無理なく利用できる方法でご案内しています。是非チャレンジして魅力的なLP作成にお役だてください。

この記事は以下の記事の続編（その3）です。最初からお読みいただくとより一層よくわかります。一応これで最終章になります（^^）。

まず、準備編で固定ページをワンカラムにし、不要なパーツを非表示にする方法を解説しました。
↓↓↓↓↓↓↓
■CocoonでワンカラムのLPを作成する方法[初心者・シニア]その１：いらないパーツを非表示にする

さらに基本的な操作で設置できる、LPでよく利用されるパーツの作成方法ごご紹介しました。
↓↓↓↓↓↓↓
■CocoonでワンカラムのLPを作成する方法[初心者・シニア]その2：LPのパーツを作る

この最終編では、Cocoonで用意されている基本的なパーツではなく、独自のデザインをプラスして作成するLPのパーツをご紹介します。（^^）
少しとっつきにくいと感じる「CSS」「HTML」の入力が必要ですが、一度クリアできると十分使いこなせます。

是非この機会にチャレンジしてください。
そして、ワンランクアップしたLP(ランディングページ）の作成に役立てていただければ嬉しいです。

では、パーツごとに解説していきます。

Contents

1. 画像パーツを挿入する
- 1.1. 画像の挿入方法
2. カラム分割のレイアウト
- 2.1. ３分割（３カラム）のレイアウト
- 2.2. その他の例
3. 下矢印付・アイコン付・リボン付の見出しを挿入する
4. Bok（かこみ枠）の挿入
- 4.1. コンテンツ幅の矢印付きBoxを挿入する
- 4.2. コンテンツ幅いっぱいの矢印付きBoxを挿入する
5. ラベルのついたおしゃれBoxの挿入
- 5.1. コードの取得
6. CSSあれこれ
7. 好みのデザインを探す
- 7.1. お勧めのサイト
8. お勧め！　売れるLPテンプレートをゲットしよう!！

画像パーツを挿入する

まずは、あらかじめ作成した画像パーツを挿入する方法です。画像の挿入は「パート２」でご案内した通りなので、特別な新しい操作を覚える必要はありません。
また、利用するパーツは同じく「パート２」でご紹介した「CANVA」で、簡単に作成できます。

＊CANBAの使い方を網羅したりんごのお勧めマニュアルが発売されました！
CANBAの全てがここにあると言ってもいいくらいなマニュアルです！！初めての方お勧め！！！

Canvaマスター講座
↓↓↓↓↓↓↓
https://link.lifesketchs.com/lp/canvamaster/?wpam_id=15
画像をクリックして詳細を確認！そして是非この機会に購入！！

画像の挿入方法

画像の準備ができたなら、

画像の設置方法です。WordPressの画像挿入機能を使います。
まず、画像をデスクトップ等のわかりやすいところに置いてください。

ブロックの追加の[+]マークをクリックします。

画像の追加アイコンをクリックします。

[アップロード]をクリックします。

画像のある場所で、画像ファイルを選択して、[開く]をクリックします。

画像が挿入されます。

画像の位置を調整します。
画面上部のツールバーで、画像の位置[中央揃え]をクリックします。

次に画像の大きさを調整します。
画像が選択されている状態（画像に青い●が表示され青枠で囲まれている状態）で画像下部の青いラインを上にドラッグすると、画像が小さくなります。

また下にドラッグすると画像が大きくなります。

適当な大きさをきめて、画像の外でクリックすると、画像の選択が解除され位置や大きさが確定します。

これで完成です。簡単な手法で、ちょっとしたインパクトや画面に流れが出るので是非色々なLPを参考にして挑戦してみてください。

■画像の挿入例

三角画像プレゼント
↓↓↓↓↓↓↓

上記の三角画像をプレゼントします。
以下の画像の上で右クリックし「名前をつけて画像を保存」を選択し、ご自身のパソコン内に保存してください
▼赤い三角画像

▼緑の三角画像

カラム分割のレイアウト

LPの基本はワンカラム（１枠）での構成ですが、パーツを横に並べたりして表示する場合に便利なのが、一部のみをカラム分割して、図形や文字を配置する方法です。Cocoonはレスポンシブにも対応しているので、カラムで分割したレイアウトは、スマホ等の画面では自動的に縦並びに表示してくれるのもありがたいです。

３分割（３カラム）のレイアウト

分割のカラムには色々なレイアウトが用意されています。よく利用されるのは[3カラム:均等割]または[２カラム：等分]です。ここでは3カラム均等割で解説します。

ブロック追加[+]をクリックして、[すべて表示]の黒いバーをクリックします。

デザインの欄で、[カラム]を選択します。

開始時のパターン選択の画面が表示されます。[3カラム：均等割]を選択します。

枠が３個表示されました。一番左の枠内にある[+]をクリックします。

ブロック追加の画面が表示されるので、[COCOONブロック]の欄から[白抜きボックス]を選択します。

白抜きボックスが挿入されます。

画面右枠の設定ボタン[歯車マーク]をクリックして、設定画面を表示させます。
ブロックの白抜きボックスになっていることを確認します。
ボーダー色（枠線の色）や背景色、文字色が設定できます。

挿入した白抜きボックス内にある[+]をクリックします。

ここではCANBAで作成した画像を挿入します。
①[画像]ブロックをクリックして、②該当の画像ファイルを選択し、③[開く]をクリックします。

画像が挿入されます。
さらに[+]をクリックして、必要なパーツを追加していきます。

[段落]ブロック、[区切り]ブロック、[段落]ブロックの順で追加してみました。
同様の操作を、中央の枠と右端の枠で実施します。

以上で完成です（^^）

■画像の挿入例

その他の例

分割レイアウトは、レイアウトをくずさず分割できるのでとても便利です。また今回は白抜き枠を挿入しましたが、枠を挿入せず直接中身を入力すれば隙間のないレイアウトも作れます（＊隙間をなくすにはCSSの設定が必要になる場合もあります）。

またCocoon独自の[COCOONレイアウト]で、[２カラム] [3カラム]を利用すると、最初から色わけされた分割枠が作成されます。

色付きのカラムが挿入される。
■３カラム　と　■２カラム

下矢印付・アイコン付・リボン付の見出しを挿入する

LPでは欠かせない以下のような見出し表示です。「見出し」のブロックを選ぶだけで、簡単に設定できる方法です（^^）。

例）
■下矢印がついて、角が丸い見出し
■中央に矢印がある見出し
■見出しの先頭にアイコンを入れた見出し
■リボン型の見出し

では、早速挿入方法です。

ここでご紹介するのは、既存の「見出し」設定をそのまま使う！というとっても簡単に挿入できる方法です。
設定した固定ページのみ、見出しのデザインが上記の▼つき見出し等になるということです。（他の固定ページや投稿ページには影響しません）
＊つかいこなせば、固定ページごとに（LP毎に）色々な見出しパーツが設定できるということです（^^）

まず、準備です。

Cocoon設定でFont Awesome5 のバージョンを選択する

今回ご紹介するH5の見出しには、「Font Awesome」のアイコンを使用しています。Font Awesomeにはバージョン4とバージョン５があり、現在はほとんどバーション５で利用することが多いと思われます。この記事でご紹介しているCSS設定もバーション５で設定しています。

なので、あらかじめ以下の設定をお願いします。
＊構築されているブログで、バージョン4　の設定が必要な場合は変更せず、H5のコードをバージョン４用に書き換えてください。

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

Cocoon設定の画面が開きます。
[全体]のタブをクリックします。

サイトアイコンフォントの欄で[Font Awesome5]を選択します。

ページ下の[変更をまとめて保存]をクリックします。

これで完了です。

既存の見出しデザインをリセットする

すでに、ブログ記事を書くためにテーマ等で見出しデザインが設定されています。まずその設定を一旦リセットしいます。

リセットとは、既存の設定を一度白紙にする設定「CSS」を記載することです。

リセットをしなくても設定は可能ですが、不要な設定が残ってしまうと。
・意図しないデザインが表示される
・見出しのデザイン設定ができない

等のトラブルの原因となります。
リセットコードを入れるだけなので、是非やっておきましょう。

以下のコードを、カスタムCSSにコピペするだけです！
＊H２は残しています（既存のテーマの見出しのままです）、変更する場合はここでいっしょにリセットしておきます。
＊H3〜H6のコードをリセットしています

/*H3 */　/*　と */に挟まれた文字は説明です、設定に影響ない文字として処理されます　
.article h3{　　設定は必ず{}で囲みます　＊クラスarticle内の見出しに設定されます
border:none;　線を無しにする設定
background:none;　背景色を無しにする設定
padding: 0;　文字と線の間隔を無しにする設定
margin:0; 見出しの上下の間隔を無しにする設定
}

実際にコピーするCSSコードは以下です

＊2021/5/23更新：borderのリセットを全てに変更、 padding: 0 margin:0を追加

/*———————————
見出しのカスタマイズ
——————————–*/

/* 見出しのデザインリセット */

/* H3 */
.article h3{
border:none;
background:none;
padding: 0;
margin:0;
}

/* H4 */
.article h4{
border:none;
background:none;
padding: 0;
margin:0;
}

/* H5 */
.article h5{
border:none;
background:none;
padding: 0;
margin:0;
}

/* H6 */
.article h6{
border:none;
background:none;
padding: 0;
margin:0;
}

上記のコピー内容を、[記事下のカスタムCSS] 欄に貼り付けます。

記事の[更新]ボタンをクリックします。

リセットされた状態の見出しです。

エディター（記事作成用の管理画面）では、既存の設定のままの表示です。
＊設定したCSSが反映されないため

公開して、該当の固定ページを表示させると、見出しの設定はリセットされています。こんな感じ
＊H２はあえて残しています。

では、いよいよ、設定です。といっても簡単です（^^）

見出し設定用のCSSコピペ

上記と同じ操作方法です、以下のコードをコピーして、コピー内容をさっき貼り付けた[記事下のカスタムCSS] 欄に貼り付けます。リセットコードの続きでOKです。

＊かならずリセットコードの後に貼りましょう（CSSは後から設定したものが有効になります）

実際にコピーするCSSコードは以下です。

*2021/5/23更新：クラス設定を.entry-content→.articleに変更、padding，margin設定を追加

/* 見出しの設定 */

/* 下▼付き見出し角丸H3 */

.article h3 {
position: relative;
padding:20px;
margin:10px 0px 30px ;
color: #ffffff;
border-radius: 10px;
background: #37c0b8;
}

.article h3:after {
position: absolute;
bottom: -19px;
left: 1em;
width: 0;
height: 0;
content: ";
border-width: 20px 20px 0 20px;
border-style: solid;
border-color: #37c0b8 transparent transparent transparent;
}

/* 下▼付き見出しH4 */
.article h4{
position: relative;
color: #000000;/* 文字の色 */
padding:20px;
margin:10px 0px 30px ;
background: #ffa500;/* 背景色 */
}

.article h4:after {
position: absolute;
content: ";
top: 100%;
left: 50%;/* ▼の位置 */
border: 20px solid transparent;/* ▼の大きさ */
border-top: 20px solid #ffa500;/* ▼の大きさ　実線　色 */
width: 0;
height: 0;
}

/*左側にアイコン付き見出しH5 */
.article h5 {
position: relative;
background: #FACC2E;
padding:20px;
margin:10px 0px 30px ;
border-left: solid 3.0em #37c0b8;
}

.article h5:before {
font-family: “Font Awesome 5 Free";
content: “\f06b";
position: absolute;
padding: 0em;
color: white;
font-size: 1.5em;
font-weight: 900;
left: -1.45em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

/*リボン風見出しH6*/
.article h6{
display: block;
position: relative;
height: 50px;
line-height: 50px;
vertical-align: middle;
text-align: center;
padding: 0 30px;
margin:10px 0px 30px ;
font-size: 18px;
background: #f25787;
color: #fff;
box-sizing: border-box;
}

.article h6:before, .article h6:after{
position: absolute;
content: ";
width: 0px;
height: 0px;
z-index: 1;
}

.article h6:before{
top: 0;
left: 0;
border-width: 25px 0px 25px 15px;
border-color: transparent transparent transparent #fff;
border-style: solid;
}

.article h6:after{
top: 0;
right: 0;
border-width: 25px 15px 25px 0px;
border-color: transparent #fff transparent transparent;
border-style: solid;
}

貼り付けた状態がこちら、

ブロックの追加ボタン[+]をクリックして、[見出し]アイコンをクリックします。

挿入された見出しを選択した状態で、画面上部のツールバーにて、見出しの種類（H3〜H6）を選択します。

見出しの内容（中身）を入力します。

記事の[更新]ボタンをクリックします。

リセット時と同じく、エディター画面では既存の見出し設定のままですが（CSSが反映されないため）、更新後記事を確認すると、見出し設定が反映されています。

＊見出しの設定色の変更については、後述しています。是非挑戦してください！

Bok（かこみ枠）の挿入

囲み枠（かこみ枠）はいろいろオシャレなデザインがたくさんあります。ターゲット用にLPの雰囲気をつくったり、情報にインパクトを与えたりと使い方も色々です。「その２：https://applired.net/cocoon-lp02/#toc_id_7」で、WordPressやCocoonに標準搭載されているBox機能についてご紹介しましたが、他のブログやLPをみてこんなんが使いたいと思った時に導入する方法です。是非挑戦してみてください。

コンテンツ幅の矢印付きBoxを挿入する

■コンテンツ幅いっぱいの矢印付きBox

上記の見出しでも同じ形がつくれますが、枠の中に入れる文章や文字が自由に変えられます。
＊枠の中の文章はHTMLの構文で入力する必要があります。

HTMLコードを本文に貼る

ブロック追加[+]をクリックして、[すべて表示]の黒いバーをクリックします。

ウィジェットの欄のなかから[カスタムHTL]をクリックします。

「HTML　を入力」と入った枠が挿入されます。

この枠の中に、以下のコードをコピーして貼り付けます。
■本文のコピペ用（太字以外のところを書き換えてください）

<div class="balloon1″>
<p>＊＊ここは自由にHTML形式の文章をいれます＊＊<br>
＊＊＊</p>
</div>

HTMLのコードを挿入した状態です。

CSSコードの記載

つづいて、CSSのコードを記事下のカスタムCSS欄に貼り付けます、貼り付け位置は現在記載されているコードの下でかまいません。

記事下にあるカスタムCSS欄に、以下のコードをコピーして貼り付けます。
■コピー用のCSS

/* 三角の吹き出しが下についたBox */
/* 吹き出し本体 – 左右の中心 */
.balloon1{
position: relative;
padding: 20px ;

background-color: #fff3ad;
}

/* 三角アイコン – 左右の中心 */
.balloon1::before{
content: ";
position: absolute;
display: block;
width: 0;
height: 0;
left: 0;
right: 0;
bottom: -40px;
margin: 0 auto ;
border-top: 40px solid #fff3ad;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
}

貼り付けた状態です。

記事の[更新]をクリックします。

記事の表示を確認します。枠はコンテンツ幅いっぱいになるように調整されます（レスポンシブ対応です）

次にもうひとつのパターン、三角の吹き出し部分が枠全体に広がる形のBoxです。
挿入方法は上記と同じです。

コンテンツ幅いっぱいの矢印付きBoxを挿入する

HTMLコードを本文に貼る

上記のBoxと同様、[カスタムHTML]を使用します。
HTMLの枠の中に、以下のコードをコピーして貼り付けます。

■本文のコピペ用（太字以外のところを書き換えてください）

<div class="boxbd">
<p><span style="color: #DF013A;">売れるセールレターの書き方セミナー</span></p>
<p style="text-align:center">
<img src="https://applired.net/support/wp-content/uploads/2021/05/ozawa011.jpg" width="50%" alt="小澤さんの写真"/></p>
<p style="text-align:center"><a href="****">セールスレターへジャンプするリンク</a></p>
<div class="a">
</div>
<div class="b">
</div>
</div>

CSSコードの記載

つづいて、CSSのコードを記事下のカスタムCSS欄に貼り付けます、貼り付け位置は記載されているコードの下です。

記事下にあるカスタムCSS欄に、以下のコードをコピーして貼り付けます。
■コピー用のCSS

/*　コンテンツ幅いっぱいの▼ */

.boxbd{
background:#afeeee;
width:100%;
}
.boxbd .a{
height:50px;
background:#afeeee;
border:2px solid #afeeee;
border-bottom:none;
position:relative;
}
.boxbd .a:before{
content:"";
width:calc(100% + 4px);
height:50px;
position:absolute;
bottom:-50px;
left:-2px;
background:linear-gradient(to top right, transparent 50%,#afeeee 50%, #afeeee calc(50% + 2px)) top left/ 50% 100% no-repeat,
linear-gradient(to top left, transparent 50%,#afeeee 50%, #afeeee calc(50% + 2px)) top right / 50% 100% no-repeat;
}
.boxbd .b{
height:50px;
background:#fff;
border:2px solid #fff;
border-top:none;
}

記事の更新後、表示を確認します。

どうですか、色々を使えそうです（^^）

ラベルのついたおしゃれBoxの挿入

さて、いよいよ最後のパーツ、おしゃれ囲みBoxの紹介です。
ネットを「囲み枠」「ボックスデザイン」等で検索すると、「使ってください」とたくさん紹介されています（^^）

ここで紹介する、ボックスデザインも以下のサイトで紹介されています。
りんごの一目惚れしたデザインです。もちろん自分のLPに使わせていただいていますm(_ _ )m。
↓↓↓↓↓↓↓
■【CSS】シンプルな囲み枠（ボックス）コピペですぐ使える
https://love-wave.com/css-waku/

コードの取得

では、早速設定方法です。まず、コードの取得です。
コードには、HTML(本体に設定）とCSS(記事下のCSS設定枠に入れる）があります。

ご紹介するサイトでは、[コードを表示]というボタンをクリックすると、表示されます。

HTMLコードを本文に貼る

ブロック追加[+]をクリックして、[すべて表示]の黒いバーをクリックします。

[カスタムHTML]をクリックします。

「HTML　を入力」と入った枠が挿入されます。

この枠の中に、上記で表示されたのコードをコピーして貼り付けます。

「タイトル」部分に、透明ラベルに記載するタイトルを入力します。
「テキスト」部分に、本文を入力します。（入力はHTMLの構文で入力する必要があります）
＊HTMLの構文については、ここでは記載しませんので、ググってください（^^）

入力の例）

■コピペ用（太字以外のところを書き換えてください）

<div class="kakomi-tape4″><span class="title-tape4″>32才男性Mさん</span>
<p><font size="5″>売りたいばかりでユーザーのことは考えていませんでした</font></p>
<p><span style="color:#DF013A;">[購入前のこと]</span><br>
LPを作り始めたころ、私はとにかく商品をアピールすることしか考えていませんでした。<br>
商品の性能や、他社製品と比べてどれくらい秀でているかの説明ばかりしていました。<br>
こんなに良い製品なので売れて当たり前、商品の良さをアピールすれば必ず手にとってもらえるはず。<br>
<br></p></div>

CSSコードの記載

つづいて、CSSのコードを記事下のカスタムCSS欄に貼り付けます、貼り付け位置は現在記載されているコードの下でかまいません。

■コピー用のCSS

/*　テープ　枠　4 */
.kakomi-tape4 {
position:relative;
padding: 35px 20px 20px;
margin: 2.5em auto;
width: 90%;
color: #555555; /* 文字色 */
background-color: #e0ebaf; /*BOX背景色*/
box-shadow: 0 2px 5px #999;
}
.title-tape4 {
position: absolute;
top: -15px;
left: 30px;
padding: 4px 20px;
color: #555555; /*タイトル色*/
font-weight: bold;
background-color: rgba(255,255,255,.1);
border-left: 2px dotted rgba(0,0,0,.1);
border-right: 2px dotted rgba(0,0,0,.1);
box-shadow: 0 0 5px rgba(0,0,0,0.2);
transform: rotate(-3deg);
}

記事の[更新]をクリックします。

記事の表示を確認します。

ばっちりです（^^）

CSSあれこれ

アルファベットや記号の羅列するCSSコード、一見とっつきにくいですがコツをつかんで必要なところだけ修正すれば色々便利にカスタマイズできます。恐れず挑戦してみましょう。
＊修正前にはかならずコピーしてバックアップをとっておきましょう（^^）

色の変更

サンプルの色がちょっと自分のブログには合わない、と思った時は変更しましょう。

コードを触るのは、色々危険ですが、慎重にやれば大丈夫です。
色が変えられるだけでも随分自分好みにできると思うので、是非挑戦してください。

見出しの色や形等の変更は貼り付けるCSSで設定します。せめて色は変えてみましょう。

変更箇所の説明です！色付きの部分を変更してみましょう（^^）

/* 見出しの設定 */

/* 下▼付き見出し角丸H3 */

.entry-content h3 {
position: relative;
padding: 0.8em;
color: #ffffff;　/* 文字の色 */
border-radius: 10px;
background: #37c0b8;　/* 背景の色 */
}

.entry-content h3:after {
position: absolute;
bottom: -19px;
left: 1em;
width: 0;
height: 0;
content: ";
border-width: 20px 20px 0 20px;
border-style: solid;
border-color: #37c0b8 transparent transparent transparent;　/* ▼の色 */
}

/* 下▼付き見出しH4 */
.entry-content h4{
position: relative;
color: #000000;/* 文字の色 */
padding: 0.6em;
background: #ffa500;/* 背景色 */
}

.entry-content h4:after {
position: absolute;
content: ";
top: 100%;
left: 50%;/* ▼の位置 */
border: 20px solid transparent;/* ▼の大きさ */
border-top: 20px solid #ffa500;/* ▼の大きさ　実線　色 */
width: 0;
height: 0;
}

/*左側にアイコン付き見出しH5 */
.entry-content h5 {
position: relative;
background: #FACC2E;/* 背景色 */
padding: 0.8em 1.0em;
border-left: solid 3.0em #37c0b8;　/* アイコン部分の背景色 */
}

.entry-content h5:before {
font-family: “Font Awesome 5 Free";
content: “\f06b";
position: absolute;
padding: 0em;
color: white;
font-size: 1.5em;
font-weight: 900;
left: -1.45em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

/*リボン風見出しH6*/
.entry-content h6{
display: block;
position: relative;
height: 50px;
line-height: 50px;
vertical-align: middle;
text-align: center;
padding: 0 30px;
font-size: 18px;
background: #f25787;/* 背景の色 */
color: #ffffff;/* 文字の色 */
box-sizing: border-box;
}

.entry-content h6:before, .entry-content h6:after{
position: absolute;
content: ";
width: 0px;
height: 0px;
z-index: 1;
}

.entry-content h6:before{
top: 0;
left: 0;
border-width: 25px 0px 25px 15px;
border-color: transparent transparent transparent #ffffff;
border-style: solid;
}

.entry-content h6:after{
top: 0;
right: 0;
border-width: 25px 15px 25px 0px;
border-color: transparent #ffffff transparent transparent;
border-style: solid;
}

①チャーの一覧から気に入った色をクリックします
②下のカラーコードの欄にコードが表示されます
③コードをコピーします。

①色相を選びます
②好きな色を選びます
③コードをコピーします。

コード内を触るのはちょっと緊張しますが、恐れずチャレンジしてください。

よくあるエラーの例（コードの不具合と対処）

よくありがちな、CSS設定のエラーと対処方法を上げてみました。
コードを張り付けたけど、反映されない場合は確認してみてください。

変更前は必ずバックアップを！

コードを変更する前に、現状のコードは必ずコピーを取って保存しておきましょう。
もし、変更して設定がくずれたら、悪あがきをせずに保存しているコピーを使って元にもどして、最初からやり直しするほうが無難です(o^―^o)

「；」「{」忘れ

CSSのコードはすべて必要です、「；」「{」がないと、それ以降の設定がすべて反映されなくなります。

余分なスペースが入っている

全角や、半角のスペース（空白）が入ることでコードが認識されなくなることがあります。

エラーをみつけるポイント

cssなどのコードは通常、要素によって色分けされて表示されていることが多いです（テーマ等によって異なる場合があります）。すべてのコードが同じ色になってしまっているときは、何らかの原因でコードが正常に認識されていません。原因をさがしましょう（色分けされなくなった地点が怪しいです）

コードのちょっと知識

補足で、cssコードのちょっと知識です。
色コード以外の部分で思うような表示にならないときに確認しみてください。

設定内容の基本です

■padding:文字と枠線との間隔を指定します
　・padding-top（文字の上部）
　・padding-left（文字の左部）
　・padding-right（文字の右部）
　・padding-bottom（文字の下部）

■border:線の形状や太さ、色などを指定します
　・border-top（文字の上部）
　・border-left（文字の左部）
　・border-right（文字の右部）
　・border-bottom（文字の下部）

線の設定は以下のように、一度に記載する場合が多いです。

border-left: solid 7px #0431B4; /* 左側に実線・太さ・色*/

■線を引く箇所
border-○○：○○部分が線を引く箇所を指定します
＊-○○が記載されていない場合は、上下左右全てに線が引かれます

■線の種類
・solid：実線
・dotted：点線
・dashed：破線
・double：二重線
＊このほかにもまだいろいろな種類の線があります。

■線の太さ
線の太さは1px〜3pxとピクセルで指定します。

好みのデザインを探す

今回ご紹介したパーツデザインは、インターネット上で無料で入手することができます。素敵なデザインがたくさんあります。

この記事のご案内は自分でCSSコードを入力するのではなく、ネット上にあるサンプル（コピーして使用することが許可されているもの）を利用する方法です。上記でご紹介したHTMLやCSSのコードも以下でご紹介するサイトからコピーさせていただきました（一部変更している部分もあります）。

検索サイトで、「見出しデザイン」「見出し　CSS」「囲み枠　デザイン」などの語句で検索すると、デザインのサンプルサイトが多数みつかります。是非ご自身でも探してあなたの作りたいLPのイメージにあうデザインを見つけてください。

お勧めのサイト

■CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選（さるわかさんのサイト）
https://saruwakakun.com/html-css/reference/h-design

お気に入りを見つけたら、
コードをコピーします。

■シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
https://www.nxworld.net/tips/50-css-heading-styling.html

そのほかにも色々なサイトがあります、探してみてください。

見出しのサンプル

https://saruwakakun.com/html-css/reference/h-design
https://miyu-info.com/midashi/

囲み枠のサンプル

https://saruwakakun.com/html-css/reference/box
https://maipyon.net/box-design/
https://love-wave.com/css-waku/https://www.granfairs.com/blog/staff/use-triangle-with-css

「CocoonでＬPを作る方法」についてその１～その３までご案内してきましたがいかがでしたか？
作成編については以上です、お疲れさまでした。

実は、続きの番外編があります！
Cocoonはスマホへの対応はほぼ完ぺき（レスポンシブ）なデザインですが。それでもちょっと修正したほうがよい部分は出てきます。番外編ではその修正方法です。

＊現在Webの閲覧の8割もがスマホで見られているという事実があります、スマホへの最適化は必須です！
↓↓↓↓↓↓↓(次に読む記事）
＜以下は作成中です、今しばらくお待ちください＞

■CocoonでワンカラムのLPを作成する方法[初心者・シニア]番外編：スマホ最適化

お勧め！　売れるLPテンプレートをゲットしよう!！

いくら、LPの作成方法を取得しても、
肝心のLPの中身（文章）の書き方がわからなければ、売れる（成果のでる）LPは作れません。

売れる（成果の出るLP）には
==========================
知るべき型と学ぶべきノウハウがあります。
==========================
是非この機会に売れるテンプレート（型）と売れるための書き方のノウハウを習得しましょう
↓↓↓↓↓↓↓
お勧めのコンテンツ
６月２１日販売されました！
【セールスレターの書き方セミナー】
このセミナーがコンテンツになって販売されました
↓↓↓↓↓↓↓ヾ(*^o^*)/画像をクリック

内容の詳細を知りたい方は、お気軽にお問い合わせください
↓↓↓↓↓↓↓
yoko_takano@appli.red

メルマガ登録いただくと、随時お得な情報をお届けします
↓↓↓↓↓↓↓（ボタンをクリックして登録へ）

りんごからのお知らせ

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

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

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ﾉﾞ
↓↓↓↓↓↓↓↓↓↓ ＊詳細ページが表示されます、すぐにメルマガ申し込みはされません

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

CocoonCocoon,LP

Posted by りんご

CocoonでワンカラムのLPを作成する方法[初心者・シニア]その4：スマホ画面対応編

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

コメント一覧

ゆうより:
2021年5月6日 5:51 PM
ランキングからきました。
LPは作ったことがないですが、
作りたくなりました。ありがとうございました。
返信
- りんごより:
  2021年5月6日 7:44 PM
  ゆうさん、ありがとうございます！、この記事はまだ未完成なのですが（汗、
  反響が思いのほかすごくてびっくりしています。
  できるだけ初心者の方がLPを楽（らく）に楽（たの）しく作れるような記事にしますので
  もう少しお待ちください（その２まででも十分作れますのでまずはそこから挑戦してみてください〜）
  返信
tackmemoより:
2021年5月4日 11:42 AM
りんごさん、作成中とは知らずすみません。また後ほど拝見させていただきますね。ご返信ありがとうございます。
返信
- りんごより:
  2021年5月4日 12:20 PM
  いえいえ、こちらこそ失礼しました。公開直後のコメントだったので驚きましたが励みになります。頑張って作ります（^^）
  是非、また訪問くださいm(_ _ )m。
  返信
tackmemoより:
2021年5月4日 11:15 AM
こんにちは。ブロックエディタ―対応のためにテーマをCOCOONにしようと考えているので、使い方を解説してくれているサイトはありがたいです。参考にさせていただきました。
返信
- りんごより:
  2021年5月4日 11:25 AM
  コメントありがとうございます、りんごです。
  すみませんこの記事は今作成途中です（汗
  表示確認のため公開しましたが、すでに見つけていただき嬉しい限りです。
  ２、３日中には完成させる予定で、いま頑張っています。
  （初心者さんでも可能な方法を試行錯誤中です）
  もし、ご意見やご要望あれば、是非おねがいします。
  また、記事中の不具合もお知らせいただければ大変たすかります。
  返信

コメントをどうぞコメントをキャンセル

この記事のトラックバックURL

プロフィール

訪問いただきありがとうございます。
運営者のりんごです。岡山県真庭市在住、【夢を追いかけ夢を叶える】をテーマにシニアライフをばく進中。旦那さんとミニ四駆のお店を運営＆非常勤のデザイン講師のかたわらネットビジネスを副業として収入を得ています。主な活動は、アフィリエイト・コンテンツ販売・各種添削・自動収益システム構築をサポートするコミュニティ運営です（^^）

このブログは、ネットビジネスの始め方を噛み砕いて解説、内容を実践できるメルマガを配信。パソコンインストラクターや、コールセンターでのサポート経験を活かし、初心者のスキルやシニアのスピードに合わせたサポートを心がけています。

年金受給率におびえない、想定外の災害にもあわてない、そんなゆとりあるシニアライフを目指すあなたを応援します。子育てを卒業！自分のために時間とお金を使える!!でも「夢見るシニアじゃいられない（現実は厳しい）」と感じているあなたに伝えたい情報です。

「ブログやアフィリエイトって、聞いたことあるけど若者（わかもの）や強者（つわもの）しか手を出してはいけない気がして」と思っていませんか？
「頑張ってみたけど、若い人の勢いについていけず挫折し諦めた」そんな経験がありますか？
それでも大丈夫！ちょっと勇気を出して扉をあけてみてください。お手伝いできれば嬉しいです。

➡︎詳しいプロフィール

「ゆとりのシニアライフ」を覗いてみたいあなた
↓↓↓メルマガ登録がおすすめです

メルマガをがっつりサポート

■メルマガアフィリエイトの手引き
はじめてメルマガアフィリエイトに取り組むための作業マニュアルとサポートです。
＊誰でもできるを目指して(*^o^*)/
＊必要な情報を凝縮（^^）
詳細はこちら↓↓↓↓↓↓↓（画像をクリック）

紹介動画♪↓↓↓↓↓↓↓

■メルマガを始めたいあなたのためのメルマガ

▶︎メルマガを始める人用

■メルマガ構築に必須のメルマガシステム

▶︎MyASPの契約と初期設定をサポート

りんごの一歩づつサポート

「ブログ＆メルマガを利用したネットビジネス」に取り組む【ディスカバリーアカデミー】をりんごのサポート付きで提供します

■ディスカバリーアカデミー
アフィリエイトを学び、稼ぎ続けるための学校

「ブログ」や「メルマガ」を利用した「アフィリエイト」で稼ぐためのマインド、ノウハウ、実際の作業がギュッと詰まっています。
初心者が「安心して取り組める」カリキュラム。アフィリエイトの仕組みが学べて作れます。りんごも学びました！