現象

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

原因

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

対処

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

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

WordPressの管理画面を開く

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

DIVタグの追加

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

結果

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

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

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

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

ログイン

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

amazonバナーのクリック

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

商品リンクのクリック

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

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

商品の検索

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

画像サイズの選択

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

ソースのコピー

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

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

WordPress管理画面の起動

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

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

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

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

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

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

ショートコードの取得

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

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

ウィジェットの選択

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

ショートコードの入力

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

サイトの確認

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

recaptcha__ja.jsが消えて通信量は5.57sだったものが、1.25sと激減しました。

現象

GoogleSearchConsoleの「ウェブに関する主な指標」(モバイル)で、「改善が必要」と指摘されました。(CLSに関する問題:0.1超モバイル)

原因

pagespeedinsightで確認すると、原因の1つとして、「使用していないJavascriptの削減」が指摘されています。(「お問い合わせ」(contact form7)画面だけでなく、全ページにrecaptchaの「JavaScript」が読み込まれています。)

対処

「お問い合わせ」ページにだけ「reCAPTCHA」を設置し、使用していない他のページには「JavaScript」を読み込ませないようにします。

• 「Invisible reCaptcha」の無効化(停止)
• 「reCaptcha」と「ContactForm7」の再連携
• 「functions.php」の編集(コードを追加)

「Invisible reCaptcha」の無効化

初めに、「Invisible reCaptcha」のプラグインを無効化(停止）します。

無効化のまえに、サイトキーと秘密キーを控えておきます。

「reCaptcha」と「Contact Form7」の再連携

「お問い合わせ」から「インテグレーション」を選択して、reCAPTCHAの「インテグレーションのセットアップ」をクリックします。

functions.phpの編集

追記するコードは以下のとおりで、
こちらの記事(Google reCAPTCHA V3 を任意ページのみに表示する方法）を参考にさせて頂きました。

子テーマのfunctions.phpに次のように記載します。

function load_recaptcha_js() {
　if ( ! is_page ( 'contct' ) ) {
　　wp_deregister_script ( 'google-recpatcha' );
　}
}
add_action ( 'wp_enqueue_scripts' , 'load_recaptcha_js' , 100 );

フックの優先度を「100」にします。初期値(10)のままだと機能しない様です。
※私は固定ページのスラッグをバンチミスでcontactのところをcontctと入力しています。

後でわかったこと

reCAPTCHA のバッチを問い合わせページ以外で消すのは、Invisible reCaptchaが有名でしたが、このプラグインはあくまでバッジを見えなくする(インビジブル)だけで、JavaScript を有効にしたり無効としたりする制御を行うことはできませんでした。さらに、長い間更新されておらずPHP8.x にも対応してなかった為、次のようなエラーも発生していました。

現象

Invisible reCaptchaの設定を行う際にタブの全てが「設定」になってしまい、設定項目が正しく表示されない不具合に遭遇しました。

原因

Invisible reCaptchaに今回の不具合が発生する条件は、WordPressが動作しているサーバのPHPバージョンが8.0以上の場合です。PHP8.0の1つ前のバージョンPHP7.4に戻せば、発生しなくなります。が、PHP7.4はセキュリティサポートが2022年11月28日に終了しています。Invisible reCaptchaの代わりのプラグイン (reCaptcha by bestWebSoft)を見つけましたが、タイミングが悪く、公開停止となっていました。

対処

結果、invisible recaptchaを削除して、「reCaptcha」と「Contact Form7」の再連携後、functions.phpを編集してjavascriptを制御する方法で対処することが出来ました。

現象

お問い合わせフォームとして利用しているContactForm7は、お問い合わせフォームだけでなく、トップページや投稿ページにも使用しないContactForm7のcssやJavascriptが読み込まれている為に、速度低下にも繋がっています。

原因

「お問い合わせ」ページではないトップページにもContactForm7のcssやjavascriptが読み込まれています。

対処

「お問い合わせ」ページにだけ読み込ませるようにします。

functions.phpの編集

以下のコードを使用している子テーマのfunctions.phpに追記すればOKです。記述するコードは、以下の通りです。(「’contact’」は、自サイトの固定ページのスラッグに合わせて入力します。)

add_action('wp',function() {
　if ( is_page ('contact' )) return;
　add_filter ('wpcf7_load_js','__return_false' );
　add_filter ('wpcf7_load_css','__return_false' );
});

こちらの記事「ページ全体で読み込まれるJSとCSSを固定ページのみで読み込ませる方法。」を参考にさせて頂きました。

[ コードの解説 ]

• 定数wpcf7_load_jsの値がfalseの場合(デフォルト値はtrue)、Contact Form7はJavaScript のロードを行いません。同様に、cssスタイルシートのロードはwpcf7_load_cssで制御できますので、次の様に数行のコードをテーマのfunctions.phpファイルに追加することでJavaScriptとCSSのロードを無効化することができます。
  「add_filter( ‘wpcf7_load_js’, ‘__return_false’ );」
  「add_filter( ‘wpcf7_load_css’, ‘__return_false’ );」
• 次に、必要とする問い合わせの画面以外の時のみ無効化するという条件を付します。
  「add_action(‘wp’,function(){
  　if(is_page(‘contct’)) return;
  　　　　　・
  ｝）：」

注意:
固定ページのスラッグは、固定ページを確認します。

私は固定ページのスラッグをバンチミスでcontactのところをcontctと入力しています。

結果

コードの追加と保存が終わったら、念のためトップページや記事ページでContactForm7のJavaScriptとCSSスタイルシートが読み込まれていないことを確認しておきます。

トップページには読み込まれていません。

「お問い合わせ」ページには読み込まれています。

決済システム「Stripe」のアカウント作成と使い方

Stripeは、シンプルでプログラムやコードなどの専門知識がない初心者でも扱いやすいオンラインの決済システムです。本記事ではStripeのアカウント登録から決済フォームの作成まで、基本的な使い方を画像入りで紹介します。

gungii.com

2024.06.08

プラグイン(WP Simple Pay Lite)の導入

プラグインのインストール

プラグイン検索

検索窓より、「wp simple pay」と入力して検索します。

スクロールすると見つかります。

stripeとの連携

初めてインストールするとウィザードが表示されますので、ウィザードに沿って設定します。

stripeと提携します。

「stripeと提携しています。」と表示されていますので、wp simple payに戻ります。

WP Simple Payメニューの表示

WP Simple Payメニューの表示が表示されました。

固定ページの編集

wp simple payをインストールすると、自動的に固定ページが追加されていますので、ページタイトルや内容を日本語に書き直しておきます。
注意:
「Payment Confirmation」と「Payment Failed」という固定ページが作成されています。「Payment Confirmation」は、いわゆるサンクスページとなりますので、タイトルは「ご購入ありがとうございます。」に変更します。「Payment Failed」は、支払いエラーやキャンセルの場合となりますので、タイトルは「支払いができませんでした。」に変更します。

Payment Confirmationページの編集

タイトルを「ご購入ありがとうごさいます。」と書き換えます。タイトルの変更の他、ショートコードしかありませんので、簡単な文言を追加します。

Payment Failedページの編集

タイトルを「支払いができませんでした。」と書き換えます。こちらは、ショートコードがありませんので、英語を日本語に置き換えるのみです。

一般設定

「Currency(通貨)」の選択

Currency Positionとは$や\マークの表示位置です。

「Payment Mode(接続モード)」の確認

stripe側で「テストモード」となっていれば自動的に「テストモード」となっています。
注意:
stripe側で「本番モード」となっている場合は、こちらで「テストモード」or「本番モード」に切り替えることができます。が、stripe側が「テストモード」の場合は、「本番モード」に切り替えるにはstripe側で切り替えて再接続の必要があります。

「Payment Confirmation(支払い確認)」

先ほど変更した固定ページが表示されています。

• Payment Success Pageの欄では支払いが完了したあとに表示するページを指定します。
• Payment Failure Pageの欄では支払いが失敗したあとに表示するページを指定します。
• Payment Cancelled Pageの欄では支払いがキャンセルされたあとに表示するページを指定します。

※カスタマイズする場合は、いづれも固定ページを作成してここでそのページを指定します。

支払い確認メッセージ

「設定(settings)」→「Payment Confirmations」→「One Time Payment」を開きます。決済後に表示されるメッセージです。デフォルトは英語で記載されていますので、記載されているスマートタグを使って日本語に書き直します。

設定した「支払い確認メッセージ」は、次のように表示されます。

サンクスページ(ダウンロードページ)の作成

決済だけをしてもらって、後から別途連絡する（有料講座など）の場合は、基本機能で表示されるサンクスページでも構いませんが、動画やPDF商材などをダウンロードしてもらう場合は、支払いが完了したらすぐにダウンロードページに遷移した方が顧客にとってわかりやすいですね。
ここでは商品として「有給休暇管理表V3.0」というexcelのテンプレートをダウンロード販売します。支払いが完了したあとに、商品のダウンロードURLの記載されたページに飛ぶようにして、そのURLをクリックすることで決済後、すぐに商品をダウンロードできるようにします。商品(「有給休暇管理表V3.0」)は後程、設定するとしてまず、商品のzipファイルをアップロードして、そのURLを専用サンクスページに記載します。

ダウンロード商品のアップロード

商品である「有給休暇管理表V3.0」のファイル(zip)をアップロードします。アップロード先のURLをコピーしておきます。

サンクスページ(ダウンロードページ)の作成

固定ページの作成

新しく固定ページ(サンクスページ)を追加して、そのページにダウンロードURLを記載します。商品は、複数ありますので、初期設定で作成されているページではなく新たに商品毎にページを追加します。ここでは、「有給休暇管理表V3.0」のzipファイルのダウンロードURLを記載したサンクスページとして「テンプレートのご購入ありがとうございます。」というページを追加します。つまり、支払いリンクをクリックして決済が完了すると、こちらのページに飛んで、商品(テンプレート)をダウンロードできるという流れとなります。

固定ページの編集

コピーしたダウンロードURLを貼り付けます。
注意:
ショートコードは初期設定で追加されている固定ページのショートコードをそのまま貼り付けています。(支払い確認メッセージのショートコード)

「更新」をクリック

編集が完了しましたら「更新」をクリックします。

支払いフォームの作成と設置

商品支払いフォームの作成

「Add New」をクリック

日本語に翻訳して確認します。色々な支払いフォームが用意されています。

ここでは、基本的なフォームを選択します。「すべての・・・アクセスします」以下は、有料のプロ仕様にアップグレードする必要があります。

商品名の入力

「General」タブを選択して、商品情報(商品名、商品説明)を入力します。ここでは、「有給休暇管理表V3.0」というexcelのテンプレートをダウンロード販売します。
注意:
商品(「有給休暇管理表V3.0」)は、zipファイルとしてアップロードして、そのURLをダウンロードページに記載しています。

価格の設定

「Payment(支払い)」タブをクリックして、価格等を入力します。

「Payment mode(支払いモード)」を「グローバル設定」にします。グローバル設定にすると一般設定で指定されている値が使用されます。

「支払いボタン」の編集

「Form Field(フォームフィールド)」タブをクリックして、「支払いボタン」を編集します。初期設定のままだと、「Pay now」のままなので、ボタンのテキストを変更します。

できたボタンが、以下の様になります。

支払いフォームの設定

「Confirmation Page(支払いフォーム)」タグをクリックして、「Payment Success Page(支払い成功ページ)」で決済後の飛び先を指定します。Gloval Setting(グローバル設定)にするとSetting(一般設定)で指定されたページが使用されます。ここで、用意したダウンロードページを指定しますので「Custom Page(特定のページ)」を✔して、追加した「テンプレートのご購入ありがとうございます。」という固定ページを選択します。

「公開」をクリック

「商品ページ」に貼り付ける為、ショートコードをコピーした後、「公開」をクリックします。

商品の確認

「Payment Forms」をクリックすると、商品一覧が表示されますので、登録されたことが確認できます。

ショートコードを、商品ページに貼り付ければ完成です！

商品支払いフォームの設置

ここでは、gungii.comのブログのLP(ランディングページ)に作成した支払いフォームを設置します。

プレビューすると、

支払い(決済)のテスト

設定が完了しましたので、実際に商品(「有給休暇管理表V3.0」)を購入してみます。

「購入する。(クレカ決済)」をクリック

商品(「有給休暇管理表V3.0)」の販売ページから「購入ボタン」をクリックして、商品を購入します。

クレジット決済

決済画面の表示

必要事項の入力

メールアドレス、カード情報、カード保有者の名前を入力して「支払う」をクリックします。

• メールアドレス
  テストの場合はメールは送信されませんので何でも良いです
• カード情報
  テストの場合は、テスト用のカード番号(ここでは、 4242 4242 4242 4242) を入力し、有効期限とCVCは何でも大丈夫です。
• 所有者名
  テストの時は何でもOK

決済

支払いが正常に終わると「テンプレートのご購入ありがとうございます」のページに移り、テンプレートのダウンロードができます。

商品のダウンロード

商品(「有給休暇管理表V3.0」)のzipファイルがダウンロードできました。

留意:
←戻るをクリックすると、「支払いができませんでした。」のページに飛びます。

「Payment Mode(接続モード)」を「Live Mode(本番モード)」にすることで、本番環境に移行しますので実際に商品が購入できるようになります。

サンクスページの流入対策

クレジットカードで決済しなければ商品をダウンロードできない仕組みを作っても、例えば、「ダウンロード」や「決済」などのキーでダウンロードページを検索して見つけられると、購入せずに商品をダウンロードされてしまいますので、そのような未購入者の流入を防ぐ必要があります。

URLからの流入をブロック

現象

ダウンロードページのURLを見つけられてURLを直接入力されることを防ぐ為、URLを複雑なものに変更します。

原因と対処

単純なURLだと見つけられますので、パスワード生成ツールを使ってパスワードを生成して、それをパーマリンクとします。(https：//www.luft.co.jp/cgi/randam.php)
パスワード生成サイトにアクセスしたら、↓画像の様に設定します。

生成ボタンをクリックすると、文字の羅列が10個ほど生成されるので、この中から好きなものをコピーして、パーマリンクとして設定します。

文字列をコピーしたら、ワードプレス上で作成した「支払い成功ページ」のパーマリンクに貼り付けます。

検索エンジンからの流入をブロック

現象

googleによってインデックスされて、検索される。

原因と対処

googleに検索されない様に、ダウンロードページは「noindex」とします。WordPressテーマ:Cocoonの場合は簡単です。「テンプレートのご購入ありがとうございます。」のページのサイトを下にスクロールして「インデックスしない（noindex)」にチェックをいれ、保存します。

ブログ内検索からの流入をブロック

現象

例えば、「ダウンロード」と入力してブログ内検索すると、「テンプレートのご購入ありがとうございます。」のページが検索されてしまいます。

原因と対処

ダウンロードURLやパスワード等の文字が記事に中にある為、検索されてしまいます。そこで、「Search Exclude」というプラグインを使って検索されない様にします。

インストールして有効化します。設定は何もありません。該当のページの下部にある「Exclude from Search Results」に✔をいれるだけです。

再度、検索するとそのページのみ検索されません。

サンクスページのレイアウト調整

最後に、LP(ランディングページ)には、サンクスページ(支払い成功ページ)や支払い不能ページには、ヘッダーやサイドバーなどは不要なので非表示とします。

「有給休暇管理表のサンクスページ」

変更前

変更後

「戻る」ボタンで、トップページに戻ります。

変更方法

変更方法については、以下を参照下さい。

【WordPressテーマCocoon】1カラムのLPを作る方法

WordPressのテーマcocoonで、LPを作る方法を解説します。ブログでcocoonを使っていますので、cocoonでLPを作ってみることとしました。LPを固定ページで作成すると、ヘッダーやサイドバー等を非表示とする必要があります。

gungii.com

2024.07.24

「支払い不能ページ」

変更前

変更後

「OK」ボタンで、トップページに戻ります。

「支払いボタン」のセンタリング

変更前

変更後

変更方法

テキストのセンタリング

支払いボタンのセンタリング

.simpay-form-control {
　text-align: center;
}
.simpay-test-mode-badge-container {
　text-align: center;
}

商品の追加方法

「労働者名簿V2.0」というExcelのテンプレートをダウンロード販売しますので、商品登録します。今度は、LPではなく、投稿ページで支払いボタンを設置してみます。

商品支払いフォームの作成

「Add New」をクリック

「WP Simple Pay」から「Add New」を選択して、「basic form」をクリックします。

商品名の入力

「General」タブを選択して、商品情報(商品名、商品説明)を入力します。
注意:
商品(「労働者名簿V2.0」)は、zipファイルとしてアップロードして、そのURLをサンクスページ(ダウンロードページ)に記載します。

価格の設定

「Payment(支払い)」タブをクリックして、価格等を入力します。

「Payment mode(支払いモード)」を「グローバル設定」にします。グローバル設定にすると一般設定で指定されている値が使用されます。

下書き保存

ここで一旦、下書き保存をします。
「労働者名簿V2.0」のExcelテンプレートをzipファイルとしてメディアにアップロードして、そのURLを取得して、固定ページに「サンクスページ」を作成して、そのURLを記載します。

サンクスページ(ダウンロードページ)の作成

ダウンロード商品のアップロード

商品である「労働者名簿V2.0」のファイル(zip)をアップロードします。アップロード先のURLをコピーしておきます。

サンクスページ(ダウンロードページ)の作成

固定ページの作成

新しく固定ページ(サンクスページ)を追加して、そのページにダウンロードURLを記載します。商品は、複数ありますので、初期設定で作成されているページではなく新たに商品毎にページを追加します。ここでは、「労働者名簿V2.0」のzipファイルのダウンロードURLを記載したサンクスページとして「労働者名簿V2.0のご購入ありがとうございます。」というページを追加します。つまり、支払いリンクをクリックして決済が完了すると、こちらのページに飛んで、商品(テンプレート)をダウンロードできるという流れとなります。

固定ページの編集

コピーしたダウンロードURLを貼り付けます。
注意:
ショートコードは初期設定で追加されている固定ページのショートコードをそのまま貼り付けています。(支払い確認メッセージのショートコード)

「更新」をクリック

編集が完了しましたら「更新」をクリックします。

サンクスページのレイアウト調整

今回は、LP(ランデングページ)ではなく投稿ページをサンクスページとしていますので、ヘッダーやサイドバーなどはそのまま表示します。従って、グローバルメニューも表示していますので「戻る」ボタンは設置していません。

但し、支払い不能ページは、共通のページを使用していますので、以下のようなレイアウトとなっています。

「支払いボタン」の編集

「Form Field(フォームフィールド)」タブのクリック

下書き保存していた「WP Simple Pay」を開いて、「Form Field(フォームフィールド)」タブをクリックして、「支払いボタン」を編集します。初期設定のままだと、「Pay now」のままなので、ボタンのテキストを変更します。

できたボタンが、以下の様になります。

支払いフォームの設定

「Confirmation Page(支払いフォーム)」タグをクリックして、「Payment Success Page(支払い成功ページ)」で決済後の飛び先を指定します。Gloval Setting(グローバル設定)にするとSetting(一般設定)で指定されたページが使用されます。ここで、用意したダウンロードページを指定しますので「Custom Page(特定のページ)」を✔して、追加した「労働者名簿V2.0のご購入ありがとうございます。」という固定ページを選択します。

「公開」をクリック

「商品ページ」に貼り付ける為、ショートコードをコピーした後、「公開」をクリックします。

商品の確認

「Payment Forms」をクリックすると、商品一覧が表示されますので、登録されたことが確認できます。

ショートコードを、商品ページに貼り付ければ完成です！

商品支払いフォームの設置

ここでは、gungii.comのブログ(商品ページ)に作成した支払いフォームを設置します。

プレビューすると、

[ 完成形 ]

目次の設定

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]目次ウィジェットの選択

目次表示の深さの指定

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

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

[ 改定履歴 ]

2022.11.23
2次不具合が発生した為、インストールしていたプラグインを削除して、元の状態に戻しました。
(但し、サイトステータスは「永続オブジェクトキャッシュ」のメッセージは非表示としました)

2022.11.08
プラグイン(Redis Object Cache)をインストールして、解決しました。

現象

WordPress V6.1にバージョンアップして、サイトヘルスステータスに勧告が表示されていたので確認すると、「停止中のテーマを削除してください」と「永続オブジェクトキャッシュを使用してください」の2つのおすすめ改善項目となっていました。

前者は、バージョンアップするといつも表示されます(テーマはcocoonを使っています)ので、使っていないテーマを削除するだけですが、後者の方は初めて見る勧告です。

原因

エラーではないので、「原因」という表現は正しくありません。「改善」というのが正しい表現となりますが、永続オブジェクトキャッシュは、サイトのデータベースの効率を上げ、その結果、WordPress がサイトのコンテンツや設定を迅速に取得できるようになるため、読み込み時間を短縮できるということです。

そして、レンタルサーバーの会社へ、永続オブジェクトキャッシュのインストール等を依頼すればプラグインをすすめてくれるはずとの事です。

対処

記載されているRedis Object Cacheというプラグインをインストールします。

Redis Object Cacheのインストール

プラグインの選択

インストール

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

設定

設定画面が表示されますので、「Enable Object Cache」をクリックします。

文字が反転して、「Disable Object Cache」となれば完了です。

結果

サイトヘルスのステータスが消えました。

その後(二次不具合発生)

現象

Redis Object Cacheのインストールして、サイトステータスは消えて「すばらしい」と表示されていたのですが、1日から2日位経って以降は、いつまで経っても「まだ情報がありません」と表示されたままの状態が直りません。

サイトヘルス画面にアクセスすると、常に「予約したイベントの実行に失敗しました」と表示されます。

どうもRedis Object Cacheのステータスが「Not connected」のまま変わらないことに原因があるようです。

原因

WordPressにプラグインとしてRedis Object Cacheをインストールしましたが、Redis Object CacheのStatusは「Not connected」のままとなっていると思います。これはWordPressをインストールしているサーバ(今回はXserver)でRedisが起動されていないことが原因です。つまり、XserverへRedisをインストールして起動することが必要なのです。

では、インストールすれば良いのですが、これがとても難しいことなのです。
通常、レンタルサーバーではユーザーにroot権限はありませんので、簡単にはインストールできません。ソースコードからインストールしてコンパイルするという方法をとらなければならず、とても知識のない者にはできません。

結果、インストールしたRedis Object Cacheは、削除することとしました。

対策

Redis Object Cacheのインストールして、「永続オブジェクトキャッシュ」の表示はなくなったものの、新たな現象が発生するのではあまり意味はありません。ならば、プラグインはインストールせずに、「永続オブジェクトキャッシュ」が表示されたままの方が良いように思います。

Redis Object Cacheを削除(止める)すると

Cocoonのフォーラムで、「永続オブジェクトキャッシュ」に関する記事があがっていて、プラグインをインストールしても違うエラーが発生したという事例や、xserverに問い合わせをするも「サポート対象外」との回答だったという対策の事例が掲載されていました。
その中で、「永続オブジェクトキャッシュを使用してください」という表示自体を停止する方法が記載されていましたので、これを実施することとしました。
つまり、プラグインを削除すると、元の「永続オブジェクトキャッシュを使用してください」というメッセージ勧告が表示されますので、このメッセージ表示を止めるのです。

cocoonフォーラムで、表示を消す方法を公開して頂きましたAkiraさん、ありがとうございました。また、cocoonフォーラムの皆さん、わいひらさん、ありがとうございました。

add_filter( 'site_status_should_suggest_persistent_object_cache', '__return_false' );

Cocoonフォーラム

私は、以下のようにfunction.phpに追記しました。

//--------------------------------------------------
//オブジェクトキャッシュのチェックを無効にする。
//--------------------------------------------------
function disable_object_cache_check( $tests ) {
    unset( $tests['direct']['persistent_object_cache'] );
    return $tests;
}
add_filter( 'site_status_tests', 'disable_object_cache_check' );
//--------------------------------------------------
//ページキャッシュのチェックを無効にする。2022.12.27
//--------------------------------------------------
function disable_full_page_cache_check( $tests ) {
    unset( $tests['async']['page_cache'] );
    return $tests;
}
add_filter( 'site_status_tests', 'disable_full_page_cache_check' );

結果

メッセージは消えて、二次不具合も解消しました。

設定例

カテゴリ=「働く」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

プラグインのインストール

「What’ New Generator」のインストール

プラグインの検索

WordPressの管理画面にログインした状態で、左側メニューにある「プラグイン」の「新規追加」をクリックします。

インストール

右上にある検索窓に「What’s New Generator」と入力して、検索されたらインストールして有効化します。

インストールの完了

インストールして有効化すると、プラグイン一覧に表示されます。

プラグインの設定

「What’s New Generator」の設定

「What’s New設定」をクリック

WordPress管理画面の設定から、「What’s New設定」をクリックします。

設定

プラグインの使い方

ショートコードの貼り付け

固定ページや投稿でショートコードを貼り付ければ完成です。

ショートコードの取得

「What’s New Generator設定」画面の上部のショートコードをコピーします。

ショートコードの貼り付け

表示の確認

プレビュー表示すると、新着情報が表示されました。

WordPressでは「noindex設定」という検索エンジンに表示させない設定ができます。
今回は、WordPressで作成したサイトを検索エンジンに表示させない様にする設定(noindex設定)のやり方をご紹介します。

今回、DEMO用として作成した工務店向けのホームページ(URL=https：//gungii.site/demo1/)を「検索エンジンに表示させない」様に設定します。

noindex設定の効果

noindexとは

「noindexタグ」とはサイト内のページを検索エンジンにインデックスさせないために使うメタタグの1つです。検索エンジンは、クローラー(Webサイトを巡回するロボット)が世界中のWebサイトから収集した情報をデータベースに格納(インデックス)し、それをもとにWebサイトを評価して検索順位をつけます。ユーザーがキーワード検索をすると、この検索順位をもとに検索結果が表示されるわけです。

noindexのタグがついたWEBページはクローラーに対して、インデックスしないように指示をするため、インデックスされません。インデックスされていないページは、検索結果に表示されません。つまり、noindexが設定されているURLは、原則としてどのようなキーワードで検索しても検索結果に表示されることはなくなるわけです。

noindexの限界

サイトの検索順位が決まるプロセスは、「①クロール→②インデックス→③ランキング」の３つのステップがあり、noindex はこのうち、２番目のインデックスで止めるということになりますので、サイト自体はクローラーに認識されます。つまり、ブロック対象のURLが、Web上の他の場所からリンクされている場合、そのURLを検出してインデックスに登録する可能性があります。
検索結果に表示したくない情報がある場合、そのファイルをパスワードで保護するのが一番確実な方法です。検索エンジンに表示されないだけでなく、外部から中身を見られることもありません。パスワードで保護する場合に使われるのが、「.htaccess」というファイルを作成し、アップロードする方法で「Basic認証」と言います。noindexはインデックスをブロックし、BASIC認証はクロールをブロックします。
Googleのヘルプページの記述を紹介します。

Google では、robots.txt ファイルでブロックされているコンテンツをクロールしたりインデックスに登録したりすることはありませんが、ブロック対象の URL がウェブ上の他の場所からリンクされている場合、その URL を検出してインデックスに登録する可能性はあります。そのため、該当の URL アドレスや、場合によってはその他の公開情報（該当ページへのリンクのアンカー テキストなど）が、Google 検索結果に表示されることもあります。特定の URL が Google 検索結果に表示されるのを確実に防ぐには、サーバー上のファイルをパスワードで保護するか、noindex メタタグまたはレスポンス ヘッダーを使用する、もしくは該当ページを完全に削除する必要があります。

robots.txt の概要

noindexの設定と確認方法

noindexの設定方法

WordPress管理画面の起動

WordPress管理画面の「設定」から「表示設定」をクリックします。

「検索エンジンでの表示」のチェック

「検索エンジンがサイトをインデックスしないようにする」にチェックを入れます。

注意:

WordPressで「検索エンジンがサイトをインデックスしないようにする」にチェックを入れると、ページにnoindexが追記されます。

meta name=’robots’ content=’noindex,nofollow’ /

noindexの確認方法

「site:ドメイン」で検索する方法と、google search consoleで確認する方法がありますので、それぞれご紹介します。

「site:ドメイン」で検索する方法

「site:ドメイン名」で検索すると、インデックスされていれば、そのサイトの記事の一覧が表示されます

インデックスされていない時

インデックスされている時

google search consoleで確認する方法

google search consoleで「URL検査ツール」を開き、URLを入力するだけで、インデックスに登録されているかを確認することができます。

インデックスされていない時

インデックスされている時

検索結果に表示されるのを確実に防ぐ方法

特定のURLがgoogle検索結果に表示されるのを確実に防ぐには、noindexの設定では完全にはブロックできない為、次の方法をお薦めします。

ローカル環境でWordPressを構築する。

「XAMPP」、「Local by Flywheel」等で、ローカル環境にWordPressを構築します。

「Local」で、自分のPCにWordPressのローカル環境を作る。

WordPressのローカル環境構築ツールとして「Local」のWindows版のご紹介です。XAMPPよりも簡単にWordPressの動作環境と本体、そしてWebサーバー、データベース、PHPのインストールを一気にやってくれるツールです。

gungii.com

2024.06.08

XAMPPで自分のPCに、WordPressのローカル環境を作る。

WordPress専用のローカル環境構築ツールとしては、「Local」がありますが、Webサーバー、データベース、PHPを意識しながらWordPressの環境を構築させたい為、ここではXamppを使ってWordPressのローカル環境を構築します。

gungii.com

2024.06.08

Basic認証でクロールをブロックする。

Basic認証でクロールをブロックすれば検索エンジンにインデックスされることはありません。

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

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

今回は、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セレクタを指定します。

Udemy(ユーデミィ)社は「Improve Lives Through Learning(学びを通して人生をより豊かに)」を事業コンセプトとして掲げ2010年に米国で設立された教育業界のユニコーンと目される企業です。
ベネッセコーポレーションは、「人生100年時代」での「大人の学び」を見据え、2015年に米Udemy社と提携し、Udemyの国内展開を開始しました。Udemyは、教えたい人(講師)と学びたい人(受講生)をオンラインでつなぐ世界最大規模のCtoC型(コンシューマーtoコンシューマー)オンライン学習プラットフォーム(動画学習)です。190か国、5,000万人以上の受講生が日々Udemyで学んでいます。AI 開発に使用される Pythonなどのプログラミング言語をはじめ、Excelやプレゼンテーション等のビジネススキルなど、近年多様化した受講ニーズを満たす実践的な講座が18万以上公開されています。「明日から使えるスキルをオンラインで学べる」ことが最大の特徴となっており、コロナ禍において、おうち時間が長くなったことで学習者の成長がさらに加速しています。

Udemyで学ぶ

Udemyで学ぶ動画サイト

Udemyの受講方法

Udemyの優れた特徴

月に2～3回ほど最大95%を超えるセールが行われていますので、1講座は1,200円から2,500円で受けることができます。

講座でわからなかった箇所を講師にオンラインで質問できますので、躓いて先に進めない場合、サポートを受けることができますので安心です。

受講した後も視聴できます。特にオンラインの動画講座では、通信教育のようなテキストがあるわけではないので、視聴期限なしというのは必須です。
赤枠の口座は、令和2年1月に受講した講座です。現在でも見直しをしていますので100%完了となっていません。

UdemyのWordPressお薦め講座(初心者向け)

【2022年】はじめてのWordPress入門講座【基礎知識・使い方・管理保守・トラブル対応】

ワードプレスでお困りの方も必見！トラブル対応もわかる！WordPressの基礎知識、使い方など「WordPressを使うときに知っておくべきこと」を網羅しています！

初心者OK！プログラミング不要！WordPressウェブサイト制作入門講座

未経験でも、動画のとおりに作業するだけで、WordPressでのウェブサイト制作ができます。時間がない人でも１日１０分ずつの作業でOK！

【iroha】理屈は抜き！パソコンが苦手な超初心者さん向け WordPressブログの作り方

初めてエックスサーバーを借りてドメインを取ってWordPress（ワードプレス）をインストールする方向け、最小構成のWordPress構築コースです。無料ブログや無料ホームページサービスを卒業したい方におすすめのコースです。

WordPressを使ってほぼ無料でホームページを作成する方法

WordPress自体の運営費は毎月かかりますが、それ以外の費用を全くかけずに、ホームページを作成する方法をご紹介していくコースです。費用をかけないからと言ってダサくなるわけではありません。かっこいいサイトを作成することができます。

UdemyのWordPressお薦め講座(中級者向け)

ちゃんと学ぶ、WordPress テーマ開発講座

WordPressで既存テーマのカスタマイズではない、オリジナルのウェブサイトを作ろう

注意:講座を新しく改定していますので、講座名が変更されています。

ちゃんと学ぶ、PHP+MySQL（MariaDB）入門講座

本格的なWebシステム開発に欠かせない、サーバーサイドプログラミングをPHP+MySQLで学ぼう。

注意:講座を新しく改定していますので、講座名が変更されています。

ちゃんと学ぶ、HTML/CSS + JavaScript

Webの仕事に関わる人なら誰でも必要な「HTML/CSS」とプログラミング言語「JavaScript」の知識をこれ一本で。基礎の基礎から、jQuery/Vue.jsまで学びます。

注意:講座を新しく改定していますので、講座名が変更されています。

[ 完成イメージ ]

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を入力すると、正しく表示される。