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

2021年5月3日

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

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

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

 

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

 

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

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

 

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

画像パーツを挿入する

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

 

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

 

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

 

 

画像の挿入方法

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

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

ブロックの追加の[+]マークをクリックします。
キャプチャー、ブロックの追加

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

キャプチャー、画像の追加

[アップロード]をクリックします。
キャプチャー、アップロード

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

キャプチャー、画像を開く

画像が挿入されます。

キャプチャー、画像挿入

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

キャプチャー、画像位置中央

 

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

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

キャプチャー、画像の大きさ調整

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

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

画像の入例
キャプチャー、三角画像の挿入例

 

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

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

▼緑の三角画像

 

カラム分割のレイアウト

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

3分割(3カラム)のレイアウト

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

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

キャプチャー、全てを表示

デザインの欄で、[カラム]を選択します。
キャプチャー、レイアウトブロックを追加

開始時のパターン選択の画面が表示されます。[3カラム:均等割]を選択します。
キャプチャー、3等分カラムの選択

 

枠が3個表示されました。一番左の枠内にある[+]をクリックします。
キャプチャー、カラムの挿入

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

白抜きボックスが挿入されます。
キャプチャー、白抜きボックスの挿入

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

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

キャプチャー、カラム内のブロック追加

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

キャプチャー、画像の挿入

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

キャプチャー、ブロックの追加

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

以上で完成です(^^)

画像の入例
キャプチャー、3カラムのレイアウト

 

その他の例

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

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

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

キャプチャー、Cocoonのカラム

 

 

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

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

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

 

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

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

まず、準備です。

 

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

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

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

 

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

 

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

キャプチャー、全体設定

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

キャプチャー、バージョン5の選択

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

キャプチャー、保存

これで完了です。

 

 

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

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

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

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

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

以下のコードを、カスタムCSSにコピペするだけです!
*H2は残しています(既存のテーマの見出しのままです)、変更する場合はここでいっしょにリセットしておきます。
*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の貼り付け
記事の[更新]ボタンをクリックします。
キャプチャー、記事の更新
リセットされた状態の見出しです。

エディター(記事作成用の管理画面)では、既存の設定のままの表示です。
*設定したCSSが反映されないためキャプチャー、エディターでの見出し表示

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

キャプチャー、見出しリセット後

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

見出し設定用の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の雰囲気をつくったり、情報にインパクトを与えたりと使い方も色々です。「その2:https://applired.net/cocoon-lp02/#toc_id_7」で、WordPressやCocoonに標準搭載されているBox機能についてご紹介しましたが、他のブログやLPをみてこんなんが使いたいと思った時に導入する方法です。是非挑戦してみてください。

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

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

キャプチャー、コンテンツ幅いっぱいの矢印付き囲み枠

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

HTMLコードを本文に貼る

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

キャプチャー、全てを表示

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

キャプチャー、カスタムHTML

 

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

キャプチャー、HTMLの領域

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

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

 

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

キャプチャー、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;
}

 

 

貼り付けた状態です。
キャプチャー、CSSコードの挿入

記事の[更新]をクリックします。
キャプチャー、更新

 

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

キャプチャー、表示の確認

 

 

次にもうひとつのパターン、三角の吹き出し部分が枠全体に広がる形の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の領域

この枠の中に、上記で表示されたのコードをコピーして貼り付けます。キャプチャー、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コード

■コピー用の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;
}

 

色コードを調べる

まず、色を設定するためにはHTMLで使われる色のコードを設定する必要があります。色のコードを決めるには以下のようなサイトを利用すると便利です。

 

WEB色見本 原色大辞典 – HTMLカラーコード

WEB色見本 原色大辞典
https://www.colordic.org/

キャプチャー、カラーコード見本

 

HTML Color Codes

HTMLカラーコード
https://html-color-codes.info/japanese/以下の2種類の画面「カラーチャート」「カラーピッカー」から色を選びます。キャプチャー、カラーチャート

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

 

キャプチャー、カラーピッカー

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

 

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

 

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

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

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

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

 

「;」「{」忘れ

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

キャプチャー、{忘れの表示

 

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

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

キャプチャー、半角スペース

キャプチャー、半角スペース

 

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

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コードを入力するのではなく、ネット上にあるサンプル(コピーして使用することが許可されているもの)を利用する方法です。上記でご紹介したHTMLCSSのコードも以下でご紹介するサイトからコピーさせていただきました(一部変更している部分もあります)。

検索サイトで、「見出しデザイン」「見出し 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

キャプチャー、CSSコピー

 

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

見出しのサンプル

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でLPを作る方法」についてその1その3までご案内してきましたがいかがでしたか?
作成編については以上です、お疲れさまでした。

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

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

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

 

 

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

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

 

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

 

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

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

りんごからのお知らせ

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

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

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

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

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