現象

ウィジェットでサイドバーに設置したアフィリエイト広告(ココナラ、Kindle本の広告)は、画像が左詰めとなっています。

原因

アフィリエイトタグに「センタリング」のコードが設定されていないからです。

対処

アフィリエイトタグを次のDIVタグで囲います。

実際にWordPressテーマのCocoonで対処してみます。

WordPressの管理画面を開く

アフィリエイトタグの選択

DIVタグの追加

アフィエイトタグをDIVタグで囲います。

結果

センタリングされました。

アフィリエイトタグの取得

もしもアフィリエイトで、kindle本の商品リンクを作成できます。ここでは、自分のKindle本(「業務手引き書(スタッフの退職)」)をブログのサイドバーに掲載してみます。

もしもアフィリエイトへのアクセス

ログイン

「もしもアフィリエイト」にアクセスして、「メディア会員ログイン」でログインします。

amazonバナーのクリック

画面をスクロールして、amazonバナーをクリックします。

商品リンクのクリック

「商品リンク」をクリックします。

アフィリエイトタグの取得

商品の検索

検索窓に検索キーを入力して検索します。

画像サイズの選択

大、中、小から選択できます。ここでは、中(160px×160px)を選択します。

ソースのコピー

商品の貼り付けソースをコピーします。

アフィリエイトタグの貼り付け

WordPress管理画面の起動

ここでは、WordPressテーマ:Cocoonでアフィリエイトタグの貼り付けを解説します。

アフィリエイトタグの管理

Cocoon設定から「アフィリエイトタグ」を選択して、表示された画面から「新規追加」をクリックします。

アフィリエイトタグの登録

タイトルを入力して「もしもアフィリエイト」でコピーしたソース(アフィリエイトタグ)を貼り付け入力します。

保存して一覧ページに戻ります。

ショートコードの取得

一覧ページに戻ると、登録したアフィリエイトタグのショートコードが作成されていますので、ショートコードをコピーします。

商品リンクをサイドバーに貼り付け

ウィジェットの選択

「カスタムHTML」を選択してサイドバーにウィジェットを追加します。

ショートコードの入力

コピーしたショートコードを入力します。

サイトの確認

サイドバーにウィジェットで貼り付けたKindle本が画像付きで掲載されていることが確認できます。

[ 完成形 ]

目次の設定

Cocoon設定

WordPressの管理画面からCocoon設定の「目次」を選択します。

目次の表示

「目次を表示する」にチェックを入れます。

表示ページ

目次を表示させるページを選択します。投稿ページはブログの記事ページとなりますので、必ずチェックを入れておきましょう。他は必要に応じてチェックします。

目次タイトル

「目次」や「content」等、お好みで設定してください。

目次切り替え

チェックを入れると、読者が目次の「開く/閉じる」を選択できるようになります。チェックを外すと、目次の「開く/閉じる」を選択できず、常に開いた状態になります。

表示条件

H2やH3等の見出しが、何個以上の見出しがある場合に表示するかを設定します。デフォルトのままとしています。

目次表示の深さ

H2～H6までで、どの見出しまで目次に表示させるか設定します。
※この目次表示の深さは、記事ごとに変更することはできません。

目次ナンバーの表示

目次の中央表示

チェックを入れると、目次が真ん中に表示され、外すと左寄せとなります。

目次の表示順

チェックを入れると目次の後に広告が表示され、チェックを外すと広告の後に目次が表示されます。

見出し内タグ

見出しの文字を装飾した場合などにチェックを入れると、反映されます。

例えば、見出しにピンクのアンダーバーで装飾して、見出し内タグにチェックを入れると、目次が装飾されます。チェックを外すと元に戻ります。(投稿記事には装飾されたままです。)

目次のカスタマイズ

Cocoonで目次カスタマイズの方法を紹介しているサイトからyukiさんが紹介くださっているカスタマイズを利用させて頂きました。ありがとうございます。Font Awesomeのアイコンフォントも使っておしゃれなデザインとなっています。

子テーマのstyle.cssを開く

「外観」から「テーマファイルエディター」を選択して「Cocoon Child: スタイルシート(style.css)」を開きます。

コードの挿入

スタイルシートに以下のコードをコピペします。

/************************************
****　目次
************************************/
.toc-title{
font-weight:bold;
}
.toc-title::after {
color:#337ab7;
}
.toc-list > li a {
font-weight: bold;
display:block;
margin-top:10px;
margin-left: 10px;
}
.toc-list > li a::before {
font-family: "Font Awesome 5 Free";
content : "\f144";
margin-right: 7px;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
margin-top:0;
margin-left: 2em;
}
.toc-list > li li a::before {
content: "";
width: 7px;
height: 7px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #90C31F;/*こちらで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}
@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -2em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc a:hover {
color: #333333;
text-decoration: underline;
}

小見出し(H2)の先頭につけるアイコンはFontAwesome5から選んで変更できます。

FontAwesomeでアイコンを選んだら、赤枠の「f144」をコード18行目に埋め込みます。
(※Cocoon設定でもFontAwesome5を選んでください。またFontAwesome6などの一部アイコンは使用不可です。)

FontAwesome5の使い方は、こちらを参照願います。

【WordPressテーマCocoon】ボックスメニューの設定と使い方

アイコンは、FontAwesome4、FontAwesome5より選択して入力します。また、アイコンの代わりに画像を使用することもできるので、自由にカスタマイズが楽しめます。Cocoonボックスメニューの設定と使い方を説明します。

gungii.com

2024.06.08

ファイルを更新

スタイルシートにコピペしたら、「スタイルを更新」をクリックします。

カスタマイズの完了

かっこよくなりました。

目次を追従させる方法

目次の追従設定

目次をサイドバーに表示して、ページをスクロールした時に追従（スクロールに合わせて目次が追ってくる）させることができます。

[c]目次ウィジェットの選択

目次表示の深さの指定

本文中の目次と合わて、「保存」をクリックします。

これで目次がサイドバーに表示されて、スクロールに合わせて追従してくれます

設定例

カテゴリ=「働く」or「稼ぐ」の記事でのアフィリエイト広告

「GeekJob」や「HumanAcademy」の広告を表示させています。

カテゴリ=「食べる」の記事でのアフィリエイト広告

こちらは、正月限定ですが、「有名ホテルおせち」の広告を表示させていました。

効果的でないアフィリエイト広告

現象(効果的ではないアフィリエイト広告)

トップページ

「IT大好きシニアのリタ活生活」は、高齢者を対象とした雑記ブログの為、サイドバートップに「防災セット」のアフィリエイト広告を貼っています。

各ページ

高齢者を対象としたサイトのコンセプトと一致するアフィリエイト広告が見当たらず、「防災セット」以外は、「終活ガイド」、「通信教育」関連の広告を貼っています。

原因(効果的ではないアフィリエイト広告)

記事の内容と一致しないアフィリエイト広告は、効果的ではありません。

ネットショップの記事に、「防災セット」?

「デジタルコンテンツ販売で稼ぐネットショップ4選」というタイトルの記事に対して、「防災セット」の購入を促すアフィリエイト広告、誰もここから「防災セット」を購入しようとは思いません。

ジオラマの記事に、「防災セット」?

一時期ジオラマにはまっていて、その作り方をブログで公開していました。記事の中では、ジオラマで使うジオラマ用品や、アクリル塗料などをamazonやYahooなどで広告していて、時折、購入されますが、サイドバーからのアフィリエイト広告からは全くありません。当然ですね、ジオラマの記事と全く関連がありませんので、クリックされる訳がありません。

一般的にサイドバーにウィジェットでアフィリエイト広告を貼付する場合は、どのページにも同じ広告を貼付することとなってしまいます。ウィジェットの表示・非表示を制御できる機能がない為、ウィジェットでアフィリエイト広告を表示させると、どのページにも同じ広告が表示されてしまうからです。

効果的なアフィリエイト広告

まず、良く見られている記事を確認すると、「デジタルコンテンツ関連」の記事が多い為、この記事にあったアフィリエイト広告を貼ります。次に、特定ページ以外は違和感のある「防災セット」のアフィリエイト広告は特定ページの場合のみに表示させる様にします。そして、トップページには「防災セット」のアフィリエイト広告は表示させない様にします。

対策(記事にあったアフィリエイト広告の貼付)

Cocoonのウィジェットの表示設定機能を使って、カテゴリー毎にアフィリエイト広告の表示・非表示を切り替えます。ここでは、カテゴリー「副業・副収入」に私自身が会員であるお悩み解決の「ココナラ無料会員登録」の広告を貼ります。

アフィリエイトタグの登録

Cocoonでは、アフィリエイトタグ管理の機能がありますので、「ココナラ無料会員登録」のアフィリエイトタグを登録します。アフィリエイトタグの登録が完了しましたら、ショートコードを取得しておきます。

ウィジェットの選択

ショートコードを設定しますので、カスタムHTMLを選択してサイドバーにウィジェツトを追加します。

ショートコードの設定

先ほど、アフィリエイトタグの登録時に取得しておいたショートコードを設定します。

表示設定

「表示設定」をクリックして、「チェック・入力したページで表示」に切り替えます。

次に、カスタム投稿タイプより、該当のカテゴリーをチェックします。

ウィジェットの位置調整

カテゴリー「副業・副収入」のページで、この広告はサイドバートップへ表示させたい為、ウィジェットの位置を調整します。

アフィリエイト広告の確認

「副業・副収入」以外のカテゴリーページ

変化はなく、「防災セット」のアフィリエイト広告が表示されています。

「副業・副収入」のカテゴリーページ

「副業・副収入」のカテゴリーページでは「ココナラ無料会員登録」のアフィリエイト広告が表示されるようになりました。

対策(限定の広告は、特定のページにのみ表示)

特定ページ以外は違和感のある「防災セット」のアフィリエイト広告は特定ページの場合のみに表示させる様にします。

ページ特定の為のID取得

投稿一覧から、該当の記事を選択して、「編集」にマウスをあてます。するとサイトの下部にURLが表示されますので、IDを取得します。

ウィジェットの変更

ウィジェットの選択

「防災セット」のウィジェットを選択します。

投稿IDの設定

「表示設定」から「チェック・入力したページで表示」を選択して、投稿タブをクリックして投稿IDを入力します。

これで、「防災セット」のアフィリエイト広告は、投稿ID=12794のページでのみ表示される様になります。つまり、トップページにも表示されなくなります。

アフィリエイト広告の確認

投稿ID=12794以外のページ

トップページから「防災セット」のアフィリエイト広告が消えました。

投稿ID=12794のページ

「防災セット」のアフィリエイト広告が表示されています。

カスタマイズ前

カスタマイズ後

コピぺで見出しのカスタマイズ(動画)

「コピペで見出しのカスタマイズ」の動画は、こちら

CSSセレクタの調査

CSSを変更する為には、まず、CSSセレクタを調べなくてはなりません。テーマによって異なりますので、単純にh1,h2,h3という訳にはいきませんので、調べてみます。

Chromeディベロッパーツールの起動

調べたい箇所(ここでは、「デジタルコンテンツとは」の上)で「右クリック」して「検証」を選択します。

CSSセレクタの取得

「Styles」の下に、h2のCSSセレクタが表示されます。

Cocoonの見出しのCSSセレクタをまとめたものが、こちらです。

CSSのカスタマイズ

CSSセレクタがわかれば、あとは簡単です。カスタマイズのCSSを作れば良いのですが、私自身、CSSを1からつくることはできませんので、詳しい方のCSSを参照させて頂きます。

CSSの取得

サルワカさんのサイトで、68個もの見出しのデザイン例があるので、コピペさせて頂きます。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

saruwakakun.com

ここでは、見出し2のデザインにサルワカさんのデザインを適用してみます。見出し2は、サルワカさんのデザイン例のうち、「角がぺろっと剥がれるデザイン」を適用します。

「コードを表示」をクリックすると、CSSが表示されますのでコピーして、Cocoonの子テーマのスタイルシートに貼り付けます。

CSSの貼り付け

子テーマのstyle.cssを開く

WordPressの「外観」から「テーマファイルエディター」を選択します。

CSSの貼り付け

追加しているCSSがあれば、その下に追加すればOKです。

「角がぺろっと剥がれるデザイン」をh2で使う場合は、h2のセレクタを調査した.article h2に変更します。
注意:
すべてのデザインはh1のセレクタとなっていますので、使いたい見出しに合わせて、.article h2や.article h3、.article h4等のセレクタに変更します。

変更が済みましたら、「ファイルを更新」をクリックします。

CSSのカスタマイズ完了

サイトを確認すると、見出し2(h2)のデザインが変更されています。

同様にして、見出し1(h1)から見出し5(h5)までのカスタマイズをします。カスタマイズの結果は、先頭ページに示しましたデザインとなります。

カスタマイズ時のご注意

CSSをカスタマイズする際に、CSSセレクタを単純にh1,h2,h3などでカスタマイズすると、記事の見出しだけでなく、関連記事などの文字まで変更となってしまいますので、必ず調査したセレタクでCSSのカスタマイズを行なうようにご注意下さい。

<現象>

デザインが異なり、関連記事やコメント欄のタイトル、そしてトップページの記事一覧のタイトルまで変更となってしまう。

<原因>

「角がぺろっと剥がれるデザイン」を見出し2で使う場合は、CSSセレクタは、調査した.article h2に変更しなければなりませんが、h2でカスタマイズした為です。

<対処>

CSSセレクタを.article　h2に変更する。

<結果>

サイトを確認すると、見出し2のデザインが正しく適用されています。

カルーセル

Cocoon カルーセルの設定と使い方(動画)

「Cocoon カルーセルの設定と使い方(動画)」は、こちら

Cocoon カルーセルの設定

「カルーセル」タブの選択

Cocoon設定から「カルーセル」タブを選択します。

カルーセルの設定

カルーセルの表示

表示方法を選択します。

表示内容

表示させる記事を選択します。(人気記事とカテゴリとタグで選択できます。)

カルーセルの並び替え

最大表示数

カルーセルに設定する枚数を入力します。

例えば、最大表示枚数を30にすると、パソコンの画面では6枚ずつ5回に分けてスライド表示されます。よって、基本的には6の倍数の数字で設定しておくと良いです。

枠線の表示

オートプレイ

自動でスライドさせるかを選択します。

オートプレイインターバル

オートプレイの間隔を指定します。

設定が完了しましたら、「変更をまとめて保存」をクリックします。

カルーセルの表示

カルーセルが表示されました。

Cocoon カルーセルの使い方

カルーセルの利用の選択

カルーセルを利用しない場合は、「カルーセル設定」で「カルーセルの表示」を「表示しない」と設定すれば、表示しなくなります。
注意:他の項目が設定されていても、表示されなくなりますので切替えは簡単です。

カルーセルの自動実行の選択

カルーセルは、自動でスライドさせるか否かを選択できます。6枚の記事が一気に変わりますので、落ち着かなく感じる場合は、手動でスライドさせることができます。

カルーセルの表示範囲

表示内容と、最大表示数、表示間隔(表示単位を含む)で決まります。

表示内容

表示させる記事は、カルーセルの設定で指定した表示内容となります。ここでは、カテゴリー:「楽しむ」と、「稼ぐ」を選択しています。

表示数

表示する記事の数は、カルーセルの設定で指定した最大表示数となります。ここでは、最大表示枚数を30としましたので、「稼ぐ」の記事が8、「楽しむ」の記事が20ありますので28枚の記事が、6枚ずつ5回で表示されることとなります。

表示間隔

表示する間隔は、カルーセルの設定で指定した「オートプレイインターバル」の間隔でスライドします。(※表示単位の指定はできませんが、1回で6枚すべてが対象となります。)

ここでは、5秒ごとに、6枚のスライドが全て変わります。

Cocoon カルーセルのカスタマイズ

カルーセルの表示単位のカスタマイズ

デフォルトで全ての記事がスライドするのを、1記事毎にスライドさせる方法について説明します。
注意:
Cocoonのフォーラムで「Cocoon」の制作者のわいひらさんが解説していましたので、参照してカスタマイズします。

テーマエディターの選択

「外観」から「テーマエディター」を選択します。

子テーマのfunction.phpの選択

コードの貼り付け

次のコードをコピペで貼り付けて、「ファイルを更新」をクリックします。

slidesToScroll: 6だったところを1に変更しています。

//カルーセルを1枚ずつスライドさせる
//Slickの読み込み
if ( !function_exists( 'wp_enqueue_slick' ) ):
function wp_enqueue_slick(){
  if (is_carousel_visible()) {
    wp_enqueue_style( 'slick-theme-style', get_template_directory_uri() . '/plugins/slick/slick-theme.css' );
    //Slickスクリプトの呼び出し
    wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/plugins/slick/slick.min.js', array( 'jquery' ), false, true  );
    $autoplay = null;
    if (is_carousel_autoplay_enable()) {
      $autoplay = 'autoplay: true,';
    }
    $data = minify_js('
              (function($){
                $(".carousel-content").slick({
                  dots: true,'.
                  $autoplay.
                  'autoplaySpeed: '.strval(intval(get_carousel_autoplay_interval())*1000).',
                  infinite: true,
                  slidesToShow: 6,
                  slidesToScroll: 1,
                  responsive: [
                      {
                        breakpoint: 1240,
                        settings: {
                          slidesToShow: 5,
                          slidesToScroll: 1
                        }
                      },
                      {
                        breakpoint: 1023,
                        settings: {
                          slidesToShow: 4,
                          slidesToScroll: 1
                        }
                      },
                      {
                        breakpoint: 834,
                        settings: {
                          slidesToShow: 3,
                          slidesToScroll: 1
                        }
                      },
                      {
                        breakpoint: 480,
                        settings: {
                          slidesToShow: 2,
                          slidesToScroll: 1
                        }
                      }
                    ]
                });
              })(jQuery);
            ');
    wp_add_inline_script( 'slick-js', $data, 'after' ) ;
  }

}
endif;

カスタマイズの確認

カルーセルが1記事毎にスライドするようになりました。

完成形ヘッダー下

完成形サイドバー

おすすめカードの設定と使い方(動画)

「おすすめカードの設定と使い方(動画)」は、こちら

おすすめカードの設定

メニューの作成

メニューの選択

WordPress管理画面から「外観→メニュー」を選択します。

新規メニューの作成

メニュー画面で「新しいメニューを作成しましょう」をクリックします。

「メニュー名」を入力して「メニューを作成」ボタンを押します。

メニュー項目の追加

「メニュー項目を追加」からおすすめカードを作成したいメニューを選択していきます。

全ての入力を終えたら「メニューを保存」ボタンを押します。

おすすめカードの使い方

おすすめカードの設置(ヘッダー下)

おすすめカードタブの選択

おすすめカードの設定画面の表示

おすすめカードの設定

おすすめカードの表示

表示方法を選択します。

メニュー選択

先ほど作成したメニュー「おすすめカード」を選択します。

表示スタイル

マウスカーソルを当てると、イメージが表示されますので、お好きなスタイルを選択します。

カード余白

お好みでチェックして下さい。

カードエリア左右余白

お好みでチェックして下さい。

おすすめカードの設定完了

おすすめカードの設置(サイドバー)

ウィジェットの選択

ウィジェットの設定

タイトルの入力

メニュー名

先ほど作成したメニュー「おすすめカード」を選択します。

留意:
ウィジェットの場合は、2列で表示されますので、おすすめカードのメニューを作成される場合は、偶数となる様に作成するのが良いでしょう。(ベストは4つ)

表示スタイル

余白を有効にする

全ての入力を終えたら「メニューを保存」ボタンを押します。

ウィジェットの設定完了

おすすめカードの設定時の注意

おすすめカードは、投稿記事や固定ページ、カテゴリー等を選択してメニューを作成して、そのメニューを好きな位置に挿入するのですが、投稿記事は、アイキャッチ画像を登録していると思いますが、固定ページやカテゴリーページ等には、あまり設定されていないかと思います。
おすすめカードは、画像付きのおすすめメニューを好きな位置に挿入できるという機能の為、画像が登録されていないとおすすめカードに画像表示がされませんので、ご注意下さい。

現象

メニューを作成して「おすすめカードの設定」をしたが、おすすめカードに画像が表示されない。

<ヘッダー下>

<サイドバー>

原因

カテゴリーページや固定ページにアイキャッチ画像が登録されていない

「暮らす」のカテゴリーに画像が登録されていない。

対応

カテゴリーにアイキャッチ画像を登録します。

結果

おすすめカードがキチンと表示されました。
<ヘッダー下>

<サイドバー>

Cocoonアピールエリアの表示

背景画像を設定して、アピールエリアを表示させています。

Cocoonアピールエリアの非表示

Cocoon アピールエリアの設定と使い方(動画)

「アピールエリアの設定と使い方(動画)」は、こちら

Cocoon アピールエリアの設定

「アピールエリア」タブの選択

アピールエリアの設定

アピールエリアの表示

表示方法は、以下から選択できます。

高さ

アピールエリアの縦幅を設定します。

※スマホでは、テキストエリアの幅に合わせて調整されるため、ここでの設定は無効となります。

エリア画像

アピールエリアに設置する画像を設定します。

※ここではヘッダー画像に合わせて、1900x350pxとしています。

エリア背景色

画像なしでシンプルにしたい場合は、背景色を設定します。

テキストエリア表示

チェックを入れた場合

チェックを外した場合

タイトル～ボタン色

テキストエリアの表示内容を設定します。
※「テキストエリア表示」にチェックを入れると、ここに設定した内容が表示されます。

注意:
ボタンメッセージとボタンリンク先が両方設定されていなければ、ボタンは表示されませんので、ご注意下さい。(いづれか片方が空欄だと、表示されません)

ボタンリンクの開き方

注意:
内部リンクであれば、「同じタブで開く」を選択して、外部リンクであれば、「新しいタブで開く」を選択するのがおすすめです。

ボタン色

「色を選択」をクリックして、お好きな色を設定します。

Cocoon アピールエリアの使い方

アピールエリアとして使う

記事へのリンク

アピールエリアとして、アピールしたい記事へのリンクを貼る

メッセージ通知

メッセージ通知エリアとして使う。(あえて、ボタンを表示せずに、メッセージ通知エリアとして使います。)

留意:
Cocoonは、はじめからメッセージ通知エリアの設定が用意されています。が、ここでもその様な使い方ができます。

ヘッダーとして使う

アピールエリアの設定で、テキスト表示をしなければ、背景画像はヘッダー画像として使うことができますので、ヘッダーのレイアウトとして利用できます。

[ レイアウト変更前 ]

[ レイアウト変更後 ]

①ヘッダー背景画像をクリア

②ヘッダーの高さを初期化

③「アピールエリア」のエリア画像を設定

④「アピールエリア」のテキストエリア表示のチェックを外す

スマホ対策

①現象

テキストエリア表示を非表示とすると、PCでは高さもキチンと表示されますが、スマホでは、高さが無くなってしまいます。

②原因

アピールエリアの高さの設定で、以下の様に「モバイル環境では無効になります。」と記載されています。テキストエリアの表示によって、高さを表示している為で、テキストエリアを非表示することで、無効となっているのです。

③対策

Cocoonのフォーラムに記載がありましたので、こちらを参考にCSSで高さを指定します。

プロフィールを設置するにあたり予め、「プロフィール画像(240x240px)」と「自己紹介の文章」を準備しておくと設定がスムーズに進みます。

Cocoonプロフィールの設定と使い方(動画)

「Cocoonプロフィールの設定と使い方(動画)」は、こちら

Cocoonプロフィールの設定

WordPress管理画面から「ユーザー→プロフィール」を選択します。

ニックネームの入力

ニックネームを入力し、「ブログ上の表示名」でそのニックネームを選択します。この「ブログ上の表示名」がプロフィール欄に表示される名前になります。

留意:
この設定を行わないと、デフォルトでユーザー名がブログ上の表示名になっていますので、WordPressのログインIDがプロフィールに表示されてしまいますので注意願います。

SNSアカウントを入力

URLを入力することで、対応したSNSアイコンが表示され、そのアイコンからそれぞれのSNSに飛ぶことが出来るようになります。
注意:
SNSのアカウントを持っていない場合や、ブログとは関連させたくない場合は入力する必要はありません。

注意:
リンクを全く設定しなくても、デフォルトの状態で「feedly」と「RSS」のアイコンは表示されます。

プロフィール情報の入力

プロフィール情報には、ご自身の紹介文やサイトの説明等を入力します。

プロフィール画像の設定

プロフィール画像のアップロード

Cocoonでは、プロフィール設定画面から直接プロフィール画像をアップロードして利用できるようになっています。画像のサイズは、240×240pxの正方形の画像がお勧めです。

プロフィールページURL

プロフィールページURLは、専用のページを設けた場合に設定します。

ここに詳細な自己紹介ページへのURLを記入しておくと、プロフィールのニックネームをクリックしたときにそのページにジャンプするようになります。
※詳細な自己紹介ページを作っていない場合は空欄のままで構いません。
留意:
プロフィール欄にあまり詳細な自己紹介を書くとプロフィール欄が長くなって見づらくなりますですので、詳細なプロフィールは固定ページなどで別に作成し、ここにはそのページへのURLを入力しておきます。

Cocoonプロフィールの使い方

ウィジェットで設置

外観からウィジェットをクリックして、[C]プロフィールを選択します。

サイドバーに配置

「タイトル」と「肩書ラベル」を設定します。
「タイトル」がプロフィール欄の見出しになり、「肩書ラベル」はプロフィール画像の上に表示されます。

投稿SNSボタン下に配置

プロフィール画像は円形も選択できます。

ショートコードで設置

トップページ(固定ページ)に配置

記事(投稿ページ)に配置

記事中にプロフィールを配置することは、ありませんが、ショートコードの使い方として解説します。

テーマ変更前(ルクセリタス)

テーマ変更後(Cocoon)

テーマの変更

テーマの変更理由

テーマ変更を行った理由は、最大の理由はCocoonのアフィリエイトの管理のしやすさです。

アフィリエイトタグが一元管理されている。

アフィリエイト広告を貼る場合、どの記事にどんな広告を貼ったのかをメモ等で管理しておく必要があります。例えばキャンペーンの終了やサービス・商品自体の終了等で、アフィリエイトタグを変更しなければならなくなった場合に、1つ1つ修正しなければなりません。Cocoonでは、一括管理されている為、1ヶ所のみ修正すれば良く大変楽です。

カテゴリーごとにサイドバーウィジェットでアフィリエイト広告を変えられる

また、Cocoonではサイドバーウィジェットで、カテゴリーごとの設定ができる為、カテゴリーを細かく分ければ、ページごとにサイドバーのアフィリエイト広告を変えることができます。これは、例えば「FX」のASP広告を「健康」のカテゴリーの記事等のあまり関連のない記事に貼付してもアクセスは望めません。「FX」に関連するカテゴリーの記事に貼り付けるのが適切です。つまり、カテゴリーごとに広告の制御ができないときは、サイドバーウィジェットにはすべての記事にあてはまるASP広告しか貼付できないのです。では、実際にどのようなウィジェットなのかご紹介します。

Cocoonのカテゴリ別のウィジェット制御

カテゴリ=「働く」or「稼ぐ」の記事の場合、表示されます。

カテゴリ=「食べる」の記事の場合、表示されません。

テーマの変更

Cocoonテーマのダウンロード

Cocoonのテーマサイトより親テーマ及び子テーマをダウンロードします。

親テーマのダウンロード

子テーマのダウンロード

Cocoonテーマのアップロード

ダウンロードした親テーマと子テーマをアップロードして有効化します。

「テーマのアップロード」のクリック

ファイルのアップロード

ダウンロードした親テーマと子テーマのzipファイルを選択して、アップロードします。

Cocoonテーマのインストール

アップロードできましたら、続けてインストールします。

インストール

「今すぐインストール」をクリックしてインストールします。

有効化

インストールが完了しましたら、「有効化」をクリックします。

留意:子テーマも同様にしてインストールして、有効化します。

テーマの確認

Cocoonテーマが正しくインストールされたかを確認します。

テーマ変更後の基本設定

ルクセリタスからCocoonにテーマを切り替えて、直後にサイトの表示を確認すると、以下の様な1カラムの画面が表示されました。ここから、Cocoonに合わせて、画面を設定していきます。

ルクセリタスの時のトップ画面

Cocoonにテーマ変更直後のトップ画面

サイドバーの設定

Cocoonでは、サイドーバーに1つもウィジェットがなければ1カラムとなるため、2つのウィジェットを設定しました。

ウィジェットの追加

「カスタムHTML」と「[C]人気記事」を追加しました。
注意:
ルクセリタスでは、人気記事一覧がなかったのでプラグインを入れてカスタマイズでCSS変更していましたが、Cocoonではウィジットを追加するのみです。

トップ画面の確認

2カラムになりました。

ヘッダーの設定

ヘッダーの背景画像を設定します。
注意:ヘッダー背景画像は、新たに用意しました。

メニューの設定

Cocoonでのメニューを設定します。

アドセンス設定

Cocoonにはアドセンスの広告コードを設定できる箇所がありますので設定します。

おすすめカードの設定

ルクセリタスではメニューの下に、カルーセルスタイダーを設定していましたので、Cocoonではおすすめカードを設定します。

ルクセリタスのカルーセルスライダー

Cocoonのおすすめカード

テーマ変更後の個別設定

ブロックの変換

HTMLとして保持

ルクセリタスのブロックで作成したものは、Cocoonのブロックとは異なりますので対応が必要です。

現象

「ルクセリタスのブロックはサボートされていません」と表示されています。

対策

「HTMLとして保持」をクリックします。

[ 対策後の確認 ]

ベストはCocoonのブロックで作成し直すことなのですが、HTMLに変換しました。時間のゆるす時に、Cocoonブロックで作成しおそうと思います。

ブログカードの変換

ルクセリタスのブログカードとCocoonのブログカードは異なりますので、Cocoonのブログカードに設定します。

Cocoonブログカードの設定

現象

ブログカードの設定箇所が空白となってます。

対策

Cocoonのブログカードで設定し直します
(ブログカードの設定はURLを入力するだけなので簡単です。)

[ 対策後の確認 ]

アフィリエイトの管理

アフィリエイトの設定

ルクセリタスでは、アフィリエイトタグを一元管理できる機能がなかった為、毎回ASPから広告コードを取得して、HTMLで記事に貼れ付けていましたが、Cocoonではアフィリエイトタグを一元管理できる機能がある為、1度登録したアフィリエイトタグは、ショートコードで呼び出すことができるので、簡単に広告を貼り付けることができます。

アフィリエイトタグの登録方法

「新規追加」のクリック

Cocoon設定からアフィリエイトタグを選択して、「新規追加」をクリックします。

タイトルと内容の入力

タイトルと、ASPから取得したアフィリエイトタグを内容欄に入力します。

アフィリエイトタグの登録完了

登録が完了すると、一覧ページが表示され、ショートコードが作成されます。

アフィリエイトタグの貼り付け方法

ウィジェットでサイドバーにアフィリエイト広告を貼り付けます。

「カスタムHTML」の選択

「カスタムHTML」ウィジェットを選択して、サイドバーに追加します。

ショートコードの入力

先ほどアフィリエイトタグを登録して作成されたショートコードを入力して保存します。

アフィリエイト広告の確認

サイドバーに広告が貼られたかを確認します。

アフィリエイトタグの登録

ルクセリタスで記事直接に貼り付けたアフィリエイトタグやウィジェットで貼り付けたアフィリエイトタグは、全てCocoonのアフィリエイトタグとして登録します

ルクセリタスの広告の確認

プラグインの整理

テーマの変更に伴い、不要となったプラグインを整理し、必要となったプラグインをインストールします。例えば、ルクセリタスでは「人気記事一覧」のウィジェットがなかったので、プラグインをインストールして使っていました。(「WordPressPopularPosts」)が、Cocoonではウィジェットとして用意されていますので、プラグインは不要となりますので削除します。

Cocoon サイト型トップページのレイアウト

トップページをサイト型にするためには、どのようなレイアウトとするかを予め考えておくことが必要です。ここでは、次のようなサイト型のレイアウトを考えてみました。

1段目に「サイトの紹介」欄を設置してサイトの紹介、キャッチコピー等を記載、2段目に「更新情報」を配置し、3段目に新着記事と人気記事を2列で配置、4段目にカテゴリー別記事を3列で配置して、5段目にプロフィールを配置します。そして6段目としてサイドバーに「おすすめ記事」をナビカードで配置します。

①では、サイトの紹介、キャッチコピー等
②では、更新情報を配置します。(私は、投稿日ではなく、更新日を表示します。)
③では、2カラムで新着情報と人気記事を配置します。
④では、3カラムで主要なカテゴリーを配置しました。
⑤では、プロフィールを配置しました。
そして⑥にナビカードウィジェットで帯付きのおすすめ記事を配置します。

完成したCocoon サイト型トップページ

完成したサイト型のトップページがこちらです。
※グローバルメニューの下にCocoon機能の「アピールエリア」を設定しています。

Cocoonトップページをサイト型に変更する方法(動画)

「Cocoonトップページをサイト型に変更する方法(動画)」は、こちら

STEP1:固定ページの作成

新着記事、人気記事、トップページの3つの固定ページを作成します。
新着記事はタイトルのみで、人気記事にはショードコードを記入して、トップページにそれぞれの記事を2列で配置して、「もっと見る」ボタンでそれぞれの固定ページに飛ばします。

新着記事の作成

「新規追加」をクリックして、固定ページを作成します。

タイトルは、わかりやすく「新着記事」として、URLスラッグはnewpostとします。他には何も入力せず、「公開」します。

人気記事の作成

同様に「新規追加」をクリックして、固定ページを作成します。

タイトルは、「人気記事」として、URLスラッグはpoppostとします。人気記事には、次のショートコードを入力します。

ショートコードは、こちら

[popular_list days="all" rank="1" pv="0" count="20" type="default" cats="all"]

入力が終われば、「公開」します。

トップページの作成

「新規追加」をクリックして、固定ページを作成します。

タイトルは、「トップページ」として、URLスラッグはtoppageとします。この後、トップページに「新着記事」や「人気記事」などを配置していきますが、一旦は公開しておきます。

ショートコードは、こちらを参照させて頂きました。

403 Forbidden

web.monogusa-note.com

STEP2:トップページの編集

「新着記事」、「人気記事」の配置

トップページに「新着記事」、「人気記事」を2カラムで横2列で配置します。

2カラムブロックの作成

h3見出しの作成

それぞれ「見出し」ブロックを選択して、h3で見出しを入力します。

新着記事の設定

ショートコードの入力

ショートコードのクリック

編集メニューが表示されますので、ショートコード[/]をクリックします。
注意:
編集メニューが表示されない場合は、1文字入力すると表示されます(ここではaと入力)。後で忘れず削除しておいて下さい。

新着記事一覧の選択

リストボックスから新着記事一覧を選択します。

ショートコードの挿入

ショートコードが挿入されます。

※先頭のaの文字は削除します。

「もっと見る」ボタンの作成

ブロックの追加

「ボタン」ブロックの選択

中央揃えの選択

ボタンの名称を「新着記事をもっと見る」に変更して、ボタンの配置を中央揃えとします。

背景色、文字色の変更

左側の設定で背景色、文字色を変更します。

文字サイズ等の設定

ボタンサイズを大中小から選択します。
※ボタンの角を円形にしたり、ボタンを光らせたりすることもできます。

URLの記入

固定ページとして作成した「新着記事」のURLを記入します。

人気記事の設定

新着記事同様に設定します。

ショートコードの入力

編集メニューからショートコード[/]を選択したリストボックスから人気記事一覧を選択します。

注意:
ここでは、rank=”1″、pv=”1″に変更します。(rankはランキング、pvはPV数の表示有無です。)

「もっと見る」ボタンの作成

新着記事と同様に設定します。URLは、固定ページとして作成した「人気記事」のURLを記入します。

カテゴリー別記事の配置

カテゴリー別記事を横3列で配置します。

3カラムブロックの作成

h3見出しの作成

それぞれ「見出し」ブロックを選択して、h3で見出しを入力します。
ここでは、見出しはカテゴリー名として「WordPress」、「人事・労務」、「介護・福祉」とします。

ショートコードの入力

次のように入力します。

注意:
カテゴリー=WordPressのcats=”16″、人事・労務のcats=”21″、そして介護・福祉のcats=”31″となります。catsの番号は、カテゴリーIDとなり、以下のように調べます。
カテゴリーにマウスを当てると、表示されます。

※タイトルが「福祉・介護」となっていますが、後で「介護・福祉」に変更しています。

「もっと見る」ボタンの作成

新着記事と同様に、ボタンを作成して、リンクURLを記入します。

注意:
リンクURLは、次の様にして調べます。
カテゴリー一覧から該当のカテゴリーの表示にカーソルを位置づけて右クリックすると、ドロップダウンリストが表示されますので、「リンクのアドレスをコピー」を選択します。
※表示をクリックするのではなく、カーソルを位置づけて右クリックします。

「サイトの紹介」、「更新情報」、「プロフィール」の配置

トップページの編集の最後として「サイトの紹介」と「更新情報」、そして「プロフィール」を配置します。

「サイトの紹介」の作成

「白抜きボックス」ブロックの追加

紹介文の入力

「更新情報」の作成

「更新情報」は、Cocoonに機能はありませんので、プラグイン(What’s New Generator)をインストールして設置します。
プラグイン「What’s New Generator」のインストールについては、以下の記事を参照願います。

【WordPress】新着情報を表示するプラグイン「What's New Generator」

What's New Generatorは、投稿、固定ページやウィジェットにNEW!マークを付して新着情報を表示させることのできるプラグインです。What's New Generatorの設定と使い方について、ご紹介します。

gungii.com

2024.06.08

ショートコードブロックの追加

ショートコードの入力

プラグインが指定するショートコードを入力します。

「プロフィール」の作成

「白抜きボックス」ブロックの追加

段落にそのままショートコードを入力しても構いませんが、枠で囲みたい為に、「白抜きボックス」を追加しています。

ショートコードの入力

次のように、ショートコードを入力します。

注意:
このショートコードを使うためには、WordPressのプロフィール欄が設定されていなければなりません。

トップページ全体の編集内容

これでSTEP2のトップページの編集は完了です。編集の全体を確認して下さい。

※カスタムCSSについては、この後で説明しています。

STEP3:サイドバーの編集

ナビカードメニューの作成

WordPress管理画面からメニューを選択して、「おすすめ記事」のメニューを作成します。

注意:ナビカードの設定と使い方については、以下の記事を参照願います。

【WordPressテーマCocoon】ナビカードの設定と使い方

WordPressテーマ「Cocoon」には、テーマが並び順で自動生成される「新着記事」や「人気記事」ウィジェットとは異なり、「自分の表示させたいリンク」をカード形式で本文中やサイドバー等に表示できるナビカードショートコードが用意されています。

gungii.com

2024.06.08

ナビカードウィジェットの追加

サイドバーに「おすすめ記事」を配置します。

STEP4:CSSの追加

目次を非表示とする。

トップページに目次が表示されていると不自然です。目次表示しないようにします。
※ここでは、広告も表示しないようにします。

タイトルを非表示とする。

トップページのタイトルや公開日、更新日、作者情報などを非表示とします。

こちらを参考にしました。

トップページを固定ページにした際にタイトル、シェア・フォローボタン、投稿日、更新日、投稿者名の表示を切り替えるCSS例

フロント固定ページで、「非表示にしたいGOが需要が高そうなHTML要素」をCSSで見えなくする方法です。

wp-cocoon.com

ボタンのづれを修正する

アイキャッチ画像のサイズや縦横比が記事ごとで異なると、ボタン位置がズレてしまいます。ズレが気になる方は、カスタムCSSに以下のコードを追加して下さい。

固定ページの「カスタムCSS」、または「外観」→「テーマエディター」→「スタイルシート(style.css)」から下記のコードを入力してください。

/*トップページのカテゴリ別最新記事の幅固定*/
 .widget-entry-cards .widget-entry-card-content{
 padding-top:0.5em;
 height:100px; 
 }

STEP5:表示設定の変更

トップページをブログ型からサイト型に変更する為に、最後に「ホームページの表示」を「最新の投稿」から「固定ページ」に変更します。

「ホームページの表示」の変更

ブログ型の場合は「ホームページの表示」が「最新の投稿」にチェックがついてますので、「固定ページ」にチェックを入れます。そして、ホームページは「トップページ」、投稿ページは「新着情報」を選択します。

サイトの確認

これでトップページがブログ型からサイト型に変わりました。
注意:
ここでは、グローバルメニューの下にCocoon機能の「アピールエリア」を設定しています。サイト型とは関係ありません。

[ 完成形 ]
ナビカードを利用して、投稿記事内からショートコードで呼び出すことができます。

Cocoonナビカードの設定と使い方(動画)

「Cocoonナビカードの設定と使い方(動画)」は、こちら

ナビカードの設定

WordPressメニューの作成

メニューの選択

WordPress管理画面から「外観→メニュー」を選択します。

新規メニューの作成

メニュー画面で「新しいメニューを作成しましょう」をクリックします。

「メニュー名」を入力して「メニューを作成」ボタンを押します。

表示オプションの設定

メニューを作成したら「表示オプション」から「CSSクラス」と「説明」を有効にしておきます。

メニュー項目の追加

メニュー項目を追加」からナビカードを作成したいメニューを選択していきます。
注意:対応できるのは「投稿」と「固定ページ」と「カテゴリー」と「タグ」ページとなります。

各メニュー項目の詳細設定

選択した各メニュー項目の詳細を設定します。

タイトルと説明の入力

基本的な使用方法としては、「ナビゲーションラベル」にタイトルを、「説明」に説明文を入力します。

オプション(リボン)の設定

「CSSオプション」にはナビカードにタスキがけするリボンを選択します。

留意:リボンは、1=おすすめ、2=新着、3=注目、4=必見、5=お得となります。

[ リボンの表示例 ]

メニューの保存

全ての入力を終えたら「メニューを保存」ボタンを押します。

ナビカードの使い方

では、投稿記事の中でナビカードを呼び出してみます。ショートコードの呼び出し方は、次の通りです。

例えば、先ほど作成した「デジタルコンテンツの販売の仕方」メニューであれば、次の通りです。

ナビカードをショートコードで呼び出す

ここでは既にある記事にナビカードを追加してみます。

2カラムブロックの追加

ここでは、2つのナビカードを追加しますので、2カラムブロックを選択します。

ショートコードの追記

H2見出しブロックで、それぞれにタイトルを設定した後、ショートコードを記述します。

ナビカードの確認

「更新」して、プレビューで確認します。

ショートコードオプション

count

countには、アイテムの表示数を設定します。入力例：count=10、デフォルト値：5

type

typeには、以下のうちいずれかの値を指定します。デフォルト値：default

• defailt:通常のリスト
• border_partition(or1):カードの上下に区切り線を入れる
• border_square(or2):カードに枠線を表示する
• large_thumb:大きなサムネイル表示
• large_thumb_on:大きなサムネイルにタイトルを重ねる

bold

boldオプションは、記事タイトルを太字にするかどうかです。
入力例：bold=1（太字にする）、デフォルト値：0（太字にしない）

arrow

arrowオプションは、カードに矢印を表示するかどうかです。
入力例：arrow=1（矢印を表示する）、デフォルト値：0（矢印を表示しない）

class

classオプションには、リストのラップ要素に独自のclass属性を指定したい時に記入します。
入力例：class=”ex-class”、
入力例：class=”ex-class1 ex-class2″（複数指定する場合はスペースで区切る）
デフォルト値：（空欄）

cats

catsには、表示するカテゴリをカンマ区切りで指定します。入力例：cats=3,16,23
留意:カテゴリIDは、カテゴリ設定画面のURL（tag_ID）から取得してください。

children

childrenは、子カテゴリの内容を含めて表示するかを指定します。
入力例：children=1、デフォルト値：0（子カテゴリーは含めない）

tags

tagsには、表示するタグをカンマ区切りで指定します。（v1.5.7～）
入力例：tags=2,19,213、デフォルト値：（空欄）（デフォルトではタグ抽出しない）

modified

modifiedオプションは、更新日順に並び替えます。（v1.7.6.9～）
入力例：modified=1（更新日順）、デフォルト値：0（投稿日順）

order

orderオプションは、表示順を切り替えます。（v1.5.9～）
最初から読んで欲しいコンテンツ出力に向いています。
入力例：order=”asc”（昇順）、デフォルト値：desc（降順）

sticky

stickyオプションは、「固定表示」設定がされている記事の表示を切り替えます。（v1.5.7～）
入力例：sticky=0（表示しない）、入力例：sticky=0（表示しない）

snippet

snippetオプションは、説明文を表示するかどうかを切り替えます。（v2.1.5～）
入力例：snippet=1（表示）、デフォルト値：0（表示しない）

post_type

post_typeは、表示する投稿タイプを選択します。（v0.7.2～）デフォルト値：post（投稿のみ表示）

• 投稿と固定ページを表示、入力例：post_type=“post,page”
• 固定ページのみ表示、入力例：post_type=“page”
• 投稿・固定ページとカスタム投稿表示、
  入力例：post_type=“post,page,カスタム投稿名1,カスタム投稿名2”

その他

taxonomy、authorについては、ここでは説明を省略しています。

ショートコードについては、こちらを参照下さい。

403 Forbidden

web.monogusa-note.com

「ブログに一体どうやって貼ったらいいの？」

初心者にとってアフィリエイト広告の貼り方は、以外とつまづきやすいポイントです。

今回は、CocoonでASP(a8.netやもしも等)のアフィリエイト広告の貼り方についてお伝えします。Cocoonはアフィリエイト広告が、とてもあつかいやすいテーマです。

A8.netのアフィリエイトリンクから次に示すようなバナー広告、テキスト広告、広告ボタンの貼り付け方を具体的に解説します。

バナー広告

テキスト広告

広告ボタン

広告の装飾

Cocoonアフィリエイト広告の貼り方(動画)

「Cocoonアフィリエイトリンクの設定と使い方(動画)」は、こちら

Cocoon バナー広告の貼り付け方

アフィリエイトリンクの取得

ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。

バナー広告の選択

参加中プログラムの中から「レンタルサーバー[エックスサーバー]」のアフィリエイトリンク(バナーリンク)を取得します。

「素材をコピーする」をクリック

Cocoonのブログの投稿画面に移動します。

アフィリエイトリンクの貼り付け

ブロックの追加

バナー広告を貼りたい場所で「+」ボタンをクリックします。

「カスタムHTML」ブロックの選択

バナー広告の貼り付け

取得したアフィリエイトリンクを貼り付けます。

バナー広告の確認

「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。

バナー広告が表示されました。

Cocoon テキスト広告の貼り付け方

アフィリエイトリンクの取得

ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。

テキスト広告の選択

参加中プログラムの中から「レンタルサーバー[エックスサーバー]」のアフィリエイトリンク(テキストリンク)を取得します。

「素材をコピーする」をクリック

Cocoonのブログの投稿画面に移動します。

アフィリエイトリンクの貼り付け

ブロックの追加

テキスト広告を貼りたい場所で「+」ボタンをクリックします。

「カスタムHTML」ブロックの選択

テキスト広告の貼り付け

テキスト広告の確認

「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。

テキスト広告が表示されました。

Cocoon アフィリエイト広告ボタンの貼り方

アフィリエイトリンクの取得

ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。

テキスト広告の選択

参加中プログラムの中から「レンタルサーバー[エックスサーバー]」のアフィリエイトリンク(テキストリンク)を取得します。

「素材をコピーする」をクリック

Cocoonのブログの投稿画面に移動します。

アフィリエイトリンクの貼り付け

ブロックの追加

バナー広告を貼りたい場所で「+」ボタンをクリックします。

「囲みボタン」ブロックの選択

アフィリエイトリンクの貼り付け

右側に「囲みボタン」の設定画面が表示されますので、「リンクタグ・ショートコード」にアフィリエイトリンクを貼り付けます。

ボタンの調整

ボタンの大きさや色を調整します。

サイズを「中」、背景色を紺にします。

円形にして、光らせます。

配置を中央にします。

囲みボタンの確認

「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。

Cocoonのアフィリエイトタグとテンプレート

Cocoonには、任意の内容をショートコードとして貼り付ける機能(アフィリエイトタグ、テンプレートの管理機能)があります。

[ アフィリエイトタグとテンプレートのデメリット ]

テーマを変更すると、ショートコードがそのまま表示される。
Cocoonにかぎったことではなく、ショートコードそのものがテーマが変更されると、そのまま表示されてしまいます。
例えば、テーマを「cocoon」から「Twenty Twenty-One」に変更すると

<変更前>

<変更後>

[ 対応策 ]

テーマを変更する場合は、ショートコード対応があるテーマを選ぶことがお薦めです。
但し、その場合でもショートコード自体([ affi id=2 ])が異なりますので、文字列置換のプラグイン(SeachRegex等)で、ショートコードの文字列置換が必要です。

Cocoon アフィリエイトタグの使い方

アフィリエイトリンクの取得

ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。

広告の選択

バナー広告又は、テキスト広告のアフィリエイトリンクを取得します。

「素材をコピーする」をクリック

Cocoonのブログの投稿画面に移動します。

アフィリエイトタグの作成

「アフィリエイトタグ」をクリック

Cocoon設定から、アフィリエイトタグをクリックします。

新規追加をクリック

アフィリエイトタグを新規作成します。

アフィリエイトリンクの貼り付け

タイトルを入力して、アフィリエイトリンクを貼り付けて。「保存」をクリックします。

アフィリエイトタグの作成完了

アフィリエイト広告の貼付

ブロックの追加

バナー広告を貼りたい場所で「+」ボタンをクリックします。

「ショートコード」ブロックの選択

アフィリエイトリンクの貼り付け

バナーの確認

「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。

バナー広告が表示されました。

Cocoon テンプレートの使い方

アフィリエイトリンクの取得

ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。

バナー広告の選択

バナー広告又は、テキスト広告のアフィリエイトリンクを取得します。

「素材をコピーする」をクリック

Cocoonのブログの投稿画面に移動します。

テンプレートの作成

「テンプレート」をクリック

Cocoon設定から、テンプレートをクリックします。

新規追加をクリック

テンプレートを新規作成します。

テンプレートの装飾

タイトルを入力して、PR文などを入力して装飾します。

アフィリエイトリンクの貼り付け

テキストモードへ切り替え

アフィリエイトリンクをテキストモードから貼り付けます。

ビジュアルモードへ切り替え

ビジュアルモードに戻して、「保存」をクリックします。

テンプレートの作成完了

アフィリエイト広告の貼付

ブロックの追加

バナー広告を貼りたい場所で「+」ボタンをクリックします。

「ショートコード」ブロックの選択

アフィリエイトリンクの貼り付け

バナーの確認

「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。

テンプレートが表示されました。

Cocoonボックスメニューの設定と使い方(動画)

「Cocoonボックスメニューの設定と使い方(動画)」は、こちら

Cocoonボックスメニューの作成

アイコンのフォント設定

Cocoonでは、 Font Awesome4、Font Awesome5のアイコンフォントをどちらにするかを設定できます。アイコンを使用する時には設定を確認しておきましょう。

「全体」タブの選択

サイトアイコンフォントの選択

画面をスクロールして、サイトアイコンフォントの項目を探して、アイコンフォントを選択します。FontAwesome5がお薦めです。

選択後は、「変更をまとめて保存」をクリックします。

新規メニューの作成

ボックスメニューを使用するには、WordPressでメニューを作成して、ウィジェットのボックスメニューをサイドバー等に挿入して使用します。

メニューの選択

WordPressの管理画面の外観からメニューを選択して、新しくメニューを作成します。

メニュー名の入力

ここでは、わかりやすく「ボックスメニュー」としました。

表示オプションの設定

メニューを作成したら「表示オプション」から「CSSクラス」と「説明」を有効にしておきます。

メニュー項目の追加

「メニュー項目を追加」から作成したいメニューを選択していきます。

個別メニューの設定

個々のメニューに対して「タイトル(ナビゲーションラベル)」,「アイコン(CSS class)」,「サブキャプション（説明）」を入力します。
ここでは、「ホーム」メニューの設定について説明しますので、「WordPress」～「サーバー」メニューについては、同様に設定してください。

• ナビゲーションラベル
  ナビゲーションラベルはメニュータイトルになります。
• CSS class(オプション)
  Font Awesome4、Font Awesome5より選択したアイコンのクラスを入力します。
• 説明
  サブキャプションです。

CSS class(オプション)の検索

Font Awesome5でアイコンを設定する場合は、アイコンページからアイコンを選択します。

スクロールして、アイコンを選択します。

アイコンのクラス名のコピー

アイコンを選択すると、個別ページが表示されますので、アイコンのクラス名をコピーします。

CSS class(オプション)に張り付けると<i class=”fas fa-home”>と貼られるのでクラス名のみ(fas fa-home)で、不要な箇所は削除します。

メニューの保存

個別メニューの設定が全て終わりましたら、「メニューの保存」をクリックします。

Cocoonボックスメニューの設置

サイドバーに追加

ウィジェットの追加

「ボックスメニュー」の選択

メニューで設定した「ボックスメニュー」を選択します。

サイドバーの確認

サイドバーに設置されました。

月額990円(税込)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

Cocoonボックスメニューのカスタマイズ

アイコンの色の変更

変更CSSの確認

Cocoon フォーラムで「わいひら」さんが、アイコンや、ホバー枠の色を変更するcssを記述されているのでそちらを使用して変更します。

注意:
ボックスメニューのアイコンの色は、「キーカラーを変更すると、色が反映される」とCocoonのボックスメニューの解説で記載されていますが、キーカラーを変更すると、サイト全体の色も変更となりますので、CSSで変更します。

子テーマのCSSの変更

CSSの表示

CSSの変更

留意:
ボックスメニューも複数作成できますので、それぞれのボックスメニューでアイコンの色を変える場合は、メニュー作成時のアイコンフォントのクラス名を入力した箇所に、任意のクラス名を追加して、そのクラス名で子テーマCSSで色を指定します。

<メニューにクラス名を追加>

<CSSの追記>
子テーマのcssへ追記して任意のclass名で色を記述します。

内部ブログカード:ホーム

<編集画面>

<表示画面>

内部ブログカード:記事

<編集画面>

<表示画面>

外部ブログカード:記事

<編集画面>

<表示画面>

Cocoonブログカードの設定と使い方(動画)

「Cocoonブログカードの設定と使い方(動画)」は、こちら

Cocoonブログカードの設定

「ブログカード」タブの選択

WordPress管理画面のCocoon設定より、「ブログカード」タブを選択します。

Cocoonブログカード表示のチェック

ここにチェックを入れておかないと、ブログカードが表示されません。

※「内部ブログカード設定」と、「外部ブログカード設定」のいづれにもチェックを入れておきます。

Cocoonブログカードの使い方

Cocoonブログカードの設置

では、実際にブロックエディターの編集画面でどのように使うのかを説明します。

「ブロックを追加」をクリック

ブロックエディターで、「ブログカード」を追加したい場所を選択して、+マークをクリックしてブロックを追加します。

Cocoonブロックを選択

Cocoonブロックの中の「ブログカード」をクリックします。

リンクするURLの入力

以下のようなブロックが表示されますので、ここにURLを入力します。

このURＬは外部ブログカードとなりますが、内部ブログカードも使い方は同じです。

Cocoonブログカードの確認

更新して、プレビューで確認します。

ブログカードが表示されていれば完了です。

画像の差し替え

差し替え画像の準備

デフォルトでは、ブログカードに表示される画像は、cocoonのテーマ画像となりますので、これを差し替えます。
(https：//gungii.com/xxxxx/ではなく、https：//gungii.com/のブログカード)

<編集画面>

<表示画面>

画像サイズの確認

デフォルトでは、親テーマに格納されている「screenshot.jpg」が使用され、画像サイズは、880x660pxです。

差し替え画像のリサイズ

ブログのヘッダー画像として使用した画像をリサイズしました。特に、サイズをデフォルト画像に合わす必要はありませんが、画像が大きくリサイズが必要な為、テーマの作者が使用しているサイズに合わせました。

画像の圧縮

tinyjpgで画像を圧縮します。

276 KＢが83.6KBに圧縮されました。

画像の差し替え

ODPタグの選択

WordPress管理画面のCocoon設定から「OGP」タグをクリックします。

画像の差し替え

準備しておいた画像に差し替えます。

選択から画像を変更すれば、何度でも変更できます。

差し替えの確認

ブログカードの画像が差し替わりました。

説明文の設定

ホームのブログカードに説明文が入っていませんので、説明文を入れます。
注意:
各記事のブログカードでは、メタディスクリプションが自動的に表示されますが、ホームのメタディスクリプションは設定しなければ表示されません。

「タイトル」タグの選択

WordPress管理画面のCocoon設定から「タイトル」タグをクリックします。

「サイトの説明」欄の入力

「サイトの説明」欄に説明文を入力します。

ブログカードの確認

「サイトの説明」欄に入力した内容が表示されています。

ラベルの設定とカスタマイズ

ブログカードの表示

ラベル無し

<表示画面>

<編集画面>

ラベル有り

<表示画面>

<編集画面>

ラベル有りの設定

ラベルの選択

記事の編集画面で、ラベルを選択します。

ブログカードの確認

ラベルが付きました。

留意:
黒の背景に白抜き文字です。色を変えるにはCSSを変更するしかありません。Cocoonテーマの制作者わいひらさんがフォーラムで話されていました。

ラベルのカスタマイズ

CSSの変更

外観からテーマエディターを選択して、子テーマのＣＳＳに追記します。

ブログカードの確認

背景色がオレンジ(#ff8c00)となりました。

留意:
背景色をラベルの種類ごとに変更する場合は、.blogcard-typeのところを各々のラベルのCSSセレクタを指定します。

[ 完成イメージ ]

404 NOT FOUND | IT大好きシニアのリタ活生活

IT大好きシニアがリタイア後のライフスタイルを提案します。

gungii.site

固定ページの作成

固定ページの新規作成

「新規追加」をクリック

タイトルの入力

タイトルを入力して、下書き保存します。

表示の確認

当然ですが、タイトルやパンくずリスト、ヘッダー、フッター、サイドバーが表示されています。これらを非表示にしていきます。

CSSの変更

固定ページの編集

固定ページのサイドバーを非表示とする。

固定ページの追加ヘッダーに以下のCSSを記述します。

サイトの確認

保存して、プレビューすると、以下のように表示されます。

1カラムとなり、サイドーバーが表示されなくなりました。

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

ヘッダー画像、タイトル、パンくずリスト、メニューバーを非表示とします。但し、フッターについては、ここでは削除できませんので、テンプレートファイルを作成することで対応します。

サイトの確認

ヘッダー画像、タイトル、パンくずリスト、メニューバーが非表示となりました。

テンプレートの適用

テンプレートファイルの作成

WordPress の公式オンラインマニュアル(Codex)に記載ある通り固定ページの表示順番は、カスタムテンプレートの後にpage.phpが読み込まれますので、カスタムテンプレートを作成して、カスタムテンプレートでフッターを非表示とします。

page.phpのダウンロード

カスタムテンプレートファイルは、page.phpを変更して作成しますので、ダウンロードします。

ファイル名の変更

ここでは、「page.php」を「1column.php」に変更します。

1column.phpの変更

まず、テンプレートとして認識させる為に、テンプレート変更します。ここでは、Template Nameを「1カラム」とします。
注意:エディターは、VSC(ビジュアルスタジオコード)を使用しています。

つぎに、サイドバーとフッターを呼び込んでいる箇所をコメントアウトします。

サーバーへUPLOAD

内容を変更した1column.phpをサーバーにUPLOADします。
※ダウンロードしたpage.phpと同じ階層へアップロードします。

固定ページの編集

パーマリンクの変更

日本語は、英数字に変えておきます。
注意:これは、LPの作成方法とは何らの関係もありませんので、変更しなくとも良いてす。

テンプレートの選択

1column.phpで、「Template Name: 1カラム」と記述したテンプレートを選択します。

追加ヘッダーの修正

サイドバーの非表示は、「1column.php」で、読み込まない様にした為、追加ヘッダーに記載したCSSは、サイドバーの箇所は削除します。

最終的には、追加ヘッダーの設定は以下の通りです。

サイトの確認

サイトを確認すると、LP用の何もないページとなりました。完成です。

完成したDEMOサイトは、こちらです。

テーマのインストール

ASTRAのインストール

「新規追加」をクリック

外観のテーマから、新規追加をクリックします。

テーマのインストール

ASTRAを選択

ASTRAの有効化完了

ページビルダーのインストール

Elementorのインストール

「新規追加」をクリック

プラグインの「新規追加」をクリックします。

Elementor Website Builderの選択

検索窓からElementorと入力して検索します。

Elementorのインストール

Elementorをインストールして、有効化します。

テンプレートの取得

ASTRAデモデータの取得

Astraにはテンプレート(デモデータ)を取り入れることができます。デモデータを使ってサイトを構築していきます。

「Starter Templates」をクリック

赤丸で囲っているものは有償となりますので、無料のものを選択します。

テンプレートの選択

ここでは、「Roofing Services」を選択します。

テンプレートのダウンロード

「Import Complete Site」をクリック

サイトの目的、名前、email等の入力

ASTRAデモデータの確認

テンプレートの表示

ViewSiteをクリックするとテンプレートが表示されます。

固定ページの確認

テンプレートがダウンロードされましたので、どのようなデモデータが作成されているか?を確認します。

WordPressのダッシュボードに戻る

固定ページの確認

HOMEの編集

ヘッダー文章の編集

「編集」をクリック

「Elementorで編集」をクリック

タイトルの変更

ペンマークをクリック

コンテンツの編集

変更の確認

テキストの変更

テキストのカラムのペンマークをクリックして、コンテンツの変更をします。

ボタンの編集

フォント、サイズの変更

お勧めは、「Note Serif JP」です。サイズはバーで調整します。

書式のコピー

テキストも同様にフォントを変えますので、書式をコピーします。HappyCareにカーソルを位置づけて右クリックからコピー

そして、スローガンにカーソルを位置づけて右クリックから、スタイル貼り付けをクリック

サイズの変更

文字サイズもコピーされますので、サイズを変更します。

スペースの調整

お問い合わせとSNSの間にスペーサーを入れます。

パディングの変更

セクションの編集をクリックして、調整します。

ヘッダー画像の差し換え

「セクションの編集」をクリック

「スタイル」をクリック

「画像の選択」をクリック

画像の差し換え

画像が取り込めました。が、背景の画像が明るすぎて、文字がみえませんので、背景画像を暗くします。

背景オーバーレイに画像挿入

背景オーバーレイの選択

背景オーバーレイのスタイルから、背景タイプの「クラッシック」をクリック

画像の挿入

オーバーレイに同じ画像を挿入します。

背景画像の削除

オーバーレイに同じ画像を挿入し、背景と重なっていますので、背景から画像を削除します。

背景オーバーレイの調整

不透明度の調整

背景オーバーレイの画像がすこし暗すぎるので、少し不透明度を高めます。

サイズの調整

サイズは、「カバー」を選択します。

SNSの設定

ペンマークをクリック

「ソーシャルアイコンを編集」をクリックして、コンテンツで調整します。不要なアイコンは削除して、URLを設定します。

サービスの編集

4カラムを3カラムにして、そこにサービス内容を記述します。

画像の差し換え

スタイルの選択

こちらの本体の画像は、カラムに入っているので、ノートマークをクリックして、スタイルを選択します。

画像の差し換え

サイズはカバー、不透明度を調整します。

画像の差し換え完了

同様に他のカラムの画像も差し替えます。

リンクの設定

注意:文章も差し替えを行っていますが、ここでは省略しています。

お問い合わせの設置

WPFormの設定

デフォルトの状態でWPFormが入っていますので、WPFormを使います。

フォームの編集

WPFormから、Contact fromの「編集」をクリックします。

Nameの枠内(破線)をクリックします。

項目の編集

ラベルの変更

プレースホルダーの設定

「Advanced」タグを選択して、プレースホルダーを入力します。

保存

ショートコードの取得

お問い合わせの編集

固定ページで「お問い合わせ」というページを新規作成します。そして、「ショートコード」ウィジェットを挿入して、ショートコードを記述します。

メニューの作成

メニューの追加

メニューの編集は、Elementorではなく、ASTRAとなるので、外観からカスタマイズをクリックします。

ページの追加

新しいページの追加

ページを追加して、メニューに挿入します。

追加の確認

固定ページにも追加されています。

メニュー項目名の変更

メニューの表示

HOMEの選択

メニュー項目名をHOMEから、ホームへ変更します。

フォントの変更

ベースタイポグラフィの選択

本文フォントファミリーの変更

Noto Self JPとしました。サイズは16

メニューの編集

メニューの背景、色の変更

右と左の2カラムで構成されていますので、両方の調整が必要です。

左カラム

背景を黒とします。

右カラム

右カラムも同様、背景を変更します。

こちらは、テキストもありますので、テキストの色、ホバー時の色も設定します。

フッターの編集

フッターのカラム構成

フッターウィジェットの設定

よくある質問の設置

「よくある質問」ページの作成

新規ページの作成

固定ページで、「よくある質問」として新規ページを作成します。

画像の挿入

注意:ウィジェットは、「アコーディオン」ではなく、「切り替え」を使いました。

レイアウト(セクション)

コンテンツの幅:ボックス、高さ:最小の高さ

スタイル

タイトルの挿入

コンテンツ(カラム)

スタイル

スマホの調整

現象

特定のページのみ画像の高さの調整が効かない。「注文の流れ」ページは、最小の高さのバーは、何も入力せずとも画像は正しく表示されるが、会社案内では画像が伸びている。

正しい

誤り

但し、「画面幅に合わせる」を選択すると、正しく表示される。

原因

不明。スマホを「画面幅に合わせる」と設定すると、PC側が「画面幅に合わせる」に変わってしまうので、この対処はできない。

対応

最小の高さのバーの箇所に0を入力すると、正しく表示される。

アイキャッチ画像の準備

アイキャッチ画像の選択

アイキャッチ画像として使用する画像は、主に「Pixabay」や「写真AC」のサイトからダウンロードしています。

画像の検索

今回は、Pixabayから画像を取得します。

画像の選択

画像のダウンロード

画像のサイズを選択して、ダウンロードします。

アイキャッチ画像のリサイズ

アイキャッチ画像を800x533pxにリサイズします。Cocoonの場合は最低でも800x800px以上(推奨は1280x1280px)となっていますが、記事の先頭に表示するアイキャッチ画像が正方形というのがあまり好きではなく、pxもなるべく少なくしなければ画像の読み込みが遅くなりますので、幅を最低の800pxとして、その比率で高さを533pxとしています。無料画像のダウンロードサイトとして良く利用しています「写真AC」や「Pixabay」ではダウンロードのサイズが、1920x1280pxが多く、これをそのままダウンロードして、幅を800pxに変更すると比率で高さが533pxとなる為、トリミングすることなく簡単にリサイズできますので、そのまま使用しています。

画像のリサイズ

photoshopCS3で、幅を800pxと入力してリサイズします。

リサイズの結果

800x533pxにリサイズされました。

アイキャッチ画像の圧縮

リサイズされた画像をTINYJPGで、アイキャッチ画像を圧縮します。

画像をドラッグ&ドロップ

圧縮の結果

232KBから50.6KBに圧縮されました。

ファイル名の変更

ブログ記事のアイキャッチ画像として投稿する為、ファイル名をwebp2-ec.jpgとします。

アイキャッチ画像の投稿

記事の投稿

準備した画像(webp2-ec.jpg)をアップロードして、記事の中でアイキャッチ画像として投稿します。

投稿画像の確認

投稿記事のアイキャッチ画像として格納した画像(webp2-ec.jpg)から、どのようなサイズの画像が自動生成されているかを確認します。

メディアライブラリで確認

WordPressの管理画面では、元画像のみ確認できます。(自動生成された画像は、ここでは見れません)
注意:
メディアライブラリーには、Webp2-ec.jpgが、プラグインEWWW Image Optimizerで、WebPに変換されて50.6KBだったファイルサイズはさらに圧縮されて17.7KBとなっています。

FTP(WinSCP)で確認

次に、WinSCPで画像の格納されているuploadsフォルダの中を見て見ます。「EWWW Image Optimizer」でアップしたJPEGやPNGといった他フォーマットの画像を自動的にWebP画像形式のフォーマットで別途保存してくれます。が、その際のファイル名は元の拡張子の後ろに”webp”の拡張子を追加するものとなります。
例:sample.jpg → sample.jpg.webp
注意:
webpに対応していればwebpとして読み込み、対応していなければjpgとして読み込む様に制御されている様です。

[ webpで配信されているかを確認 ]

Ccoonの記事ページで表示されている画像を右クリックして、「名前を付けて画像を保存」をクリックします。保存ファイルの拡張子が「webp」となっていればOKです。

自動生成画像の説明

画像をアップロードした際に、Cocoonが自動生成している画像は、今回の場合は6種類となります。元画像(Webp2-ec.jpg)から、以下の6種類のjpgが生成されています。但し、それぞれの画像に、拡張子webpの画像がEWWW Image Optimizerによって生成されていますので、12種類(元画像を含むと14種類)となります。
※CocoonのRetina対応オプションは無効としています。

Webp2-ec.jpg(800x533px)・・・アップロードした元画像

①WebP2-ec-768×512.jpg

WordPressV4.4から追加された機能で、メディア設定では制御できませんので、自動生成されます。

サイズ固定の自動生成画像

②WebP2-ec-100×100.jpg・・・管理画面記事リスト一覧のサムネイル

③WebP2-ec-150×150.jpg・・・ページ送りナビ、Facebookバルーン

横幅が固定で高さが可変の自動生成画像

④WebP2-ec-120×68.jpg・・・人気記事、ナビゲーション

⑤WebP2-ec-160×90.jpg・・・関連記事デフォルト・関連記事4列

⑥WebP2-ec-320×180.jpg・・・デフォルトサムネイル・関連記事3列

注意:
カードタイプで、以下の4つのカードのいづれかを設定していれば、対応する画像が生成されますが、今回は選択していない為、生成されていません。

※themes/cocoon-master/lib/settings.phpの中で、設定されています。

アイキャッチ画像の構成

投稿記事にアイキャッチ画像をアップして、元画像の他に、様々なサイズの画像が自動生成されていますので、それぞれにどのようなところで使用されているかを確認します。が、その前にWordPress、Cocoonの設定内容を確認しておきます。

Cocoonの設定確認

画像の自動生成は、「WordPressによる自動生成(ユーザー設定)」、「テーマによる自動生成(cocoon)」の大きく分類して2種類あります。ここでは、「WordPressによる自動生成(ユーザ設定)」のみ自動生成しないように設定しています。

WordPressによる自動生成(ユーザー設定)

テーマによる自動生成(cocoon)

メインカラム設定

コンテンツ幅=800px、コンテンツ余白幅=29x、コンテンツ枠線幅=1pxとしています。

サイトバー設定

サイドバー幅=450px、サイドバー余白幅=19px、サイドバー枠線幅=1pxとしています。

全体画像設定

youtubeに合わせて、9:16(デフォルト)としています。

Cocoonページの画像構成

Cocoonの各ページで、どのようなアイキャッチ画像が使われているかを確認しておきます。

トップ画面

トップ画面では、「おすすめカード」、「ブログカード」、サイドの人気記事等に使われています。

コンテンツ幅

コンテンツ余白幅(29)+コンテンツ罫線幅(1)=30

カラム間の幅

サイドバー幅

サイドバー余白幅(19)+サイドバー罫線幅(1)=20

投稿記事

投稿記事では、記事トップの画像、関連記事画像、ページ送りナビ等に使われています。

アイキャッチ画像の用途・サイズ

各画像の用途とサイズ

では、自動生成された画像のサイズを確認しながら、具体的に個々の画像を1つずつ確認してみます。

320x180pxの画像(ブログカード)

120x68pxの画像(人気記事)

160x90pxの画像

関連記事

ページ送りナビ

おすすめカードの画像

おすすめカードの画像は、いくつの画像かによって幅が計算されます。320×180サイズの画像が読み込まれて、比率で計算されます。
例1:5つのカードの時は、260x146pxの画像

例2:6つのカードの時は、213x120pxの画像

投稿記事(元画像)

<完成形>

LPとは?

LP(ランディングページ:LandingPage)とは、検索結果や広告などを経由して訪問者が最初に着地するページのことです。広義では、ユーザーが最初に訪れるページは全てLPとなりますが、Webでは、その中でも購入や問い合わせ等のユーザーのアクションを誘導することに特化した商品・サービスの紹介ページのことを「LP」と呼んでいます。ランディングページの役割は、コンバージョン(conversion)を得ることです。コンバージョンとは、問合せ・資料請求・注文のことを言います。

従って、ランディングページ(LP)は集客から問い合わせ、注文等のアクション誘導までを単独でおこなえるように設計されていて、コンバージョンに直結するページ以外へのリンクを極力排除しています。その為、通常のホームページというよりセールスレターやチラシに近いレイアウトになっています。

①縦長のレイアウト、②他のページへのリンクがない、③派手なデザインでインパクトがある。のが特徴です。ランディングページ(LP)ではページの出口をコンバージョンにつながるページに限定していますので、コンバージョン率も当然上昇します。が、反面、他の関連ページなどに訪問者が回遊できないので、直帰率(ホームページを離脱する割合)が極めて高くなってしまいます。

Cocoon lp 作り方(固定ページをLP仕様にする。)

固定ページの新規作成

「新規追加」をクリック

タイトルの入力

タイトルを入力して、下書き保存します。

表示の確認

当然ですが、タイトルや日付、ヘッダー、フッター、サイドバーが表示されています。これらを非表示にしていきます。

固定ページの編集

固定ページのサイドバーを非表示とする。

固定ページの編集画面で、ページ設定からページタイプを変更します。

※「読む時間を表示しない」と「目次を表示しない」にもチェックを入れます。

1カラムとなり、サイドーバーが表示されなくなりました。

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

ヘッダー画像、タイトル、日付表示、メニューバー、SNSボタン、投稿者名、スポンサーリンク等を非表示とします。

以下のCSSの設定を、記事下のカスタムcss欄に貼り付けます。

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

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

/*———————————
固定ページの日付を非表示にする
——————————–*/
.post-10776 .date-tags {
display: none;
}
/*———————————
メニューバーを非表示にする
——————————–*/
#navi{
display:none;
}

/*———————————
投稿者の表示を非表示にする
——————————–*/
.article-footer{
display: none;
}
/*---------------------------
フッターを非表示にする
---------------------------*/
.page-id-10776 .footer{
   display:none;
}

留意:
.post-10776及び、.page-id-10776の数値は、LPを作成する固定ページの数値を指定します。
以下の例では、LPの固定ページ「CocconLP(有給休暇管理表)」にカーソルをあてた際に表示されるpost=10776という番号です。

SNSボタンの非表示

トップシェア、ボトムシェアから固定ページの表示チェックを外します。

SNSフォローから固定ページの表示チェックを外します。

固定ページの確認

ホームボタンはホームに戻れるので残しておきます。

注意:ホームボタンを消したい場合は、以下をカスタムCSSに追加して下さい。

/*----パンくずリストを非表示にする。----*/
.breadcrumb {
display:none;
}

固定ページのLP仕様が完成です。

では、完成したLPを見てみます。

CocoonLP(有給休暇管理表) | gungiiのなるほどHack&Tips

「なるほど」と納得できる経験(実例)と知識(手順)を提供します。

gungii.com