サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2023年10月2日 14:26
わいひら様
初めまして、na2factoryと申します。
いつもCocoonをありがたく使用させていただいております。
このたび、grayish（グレイッシュ）というスキンを作成したので報告させていただきます。
以下にスキンの紹介＆マニュアルサイトを作っており、スキンデータのDownloadが可能となっております。
https://cocoon-grayish.na2-factory.com/
このスキンの一番の特徴は、トップページのメインビジュアルを画面いっぱいに表示する、という点になります。
このような使用方法を望んでいる方がいらっしゃるか分かりませんが・・・
※Cocoonのver2.6.6.1で動作確認をしております。Githubの最新版ではまだ確認しておりません。
ステマ規制の機能追加等でお忙しい中のご連絡で申し訳ありません。
お時間がある際に上記サイトをご覧になっていただけたら幸いです。
2023年10月2日 16:07
●感想
私もスキン作りましたが、よくできていると思います。
●提案
２点あります。
- 入力項目をスキン制御で自動化しており、スキン選択の際、表示設定も「最新の投稿」に自動設定してみては？
- モバイルフッターメニュー背景色の不透明度調整などchoicesにしている。
選択させるのに意図がありますか？
number＋min/maxの方が自由度が高くありませんか？
●バグ
CSSに以下の問題がります。
現象
ボタン全般、例：pagination-nextをhoverの時、ページ全体がゆらぐ。
原因
hoverの時、border:noneとしている為、全体の高さ36.55px→34.55pxとなってしまう。
わいひら and na2factory reacted
トピックスターター 2023年10月2日 17:35
早速ご確認いただき、感想もありがとうございます。
まずはCSSのボタンhover部分について、ご指摘ありがとうございます。
こちら、トップページの確認・注意事項の一覧へ、のボタンについて取り急ぎ修正してみました。
スキンデータの修正もでき次第アップするようにします。
ご提案の１つ目について
>1.入力項目をスキン制御で自動化しており、スキン選択の際、表示設定も「最新の投稿」に自動設定してみては？
について、Cocoon設定のインデックスのフロントページタイプの選択のことでしょうか？
こちらをスキン制御で「カテゴリーごと」にしてみては？ということで、合ってますでしょうか？
合っている場合、ほぼスキン制御でユーザーが選べる場所が少ないので、ここぐらいは選べたほうがいいのかなと思ってデフォルトのままにしております。
ご提案の２つ目について
>2.モバイルフッターメニュー背景色の不透明度調整などchoicesにしている。
選択させるのに意図がありますか？
number＋min/maxの方が自由度が高くありませんか？
こちら、テーマカスタマイザーで変更できるようにカスタマイズするのが自身初だったので、
至らない点が多々あると思います。
改善のご要望が多数あるようでしたら、今後対応を検討させていただきたいと思います。
2023年10月2日 17:48
1ですが、[設定]→[表示設定]→ホームページの表示「最新の投稿」の自動設定を示します。
私は以下のようにしています。
スキンのfunctions内で、pre_option_show_on_frontにフックし
スキンが設定されたら自動設定するようにしています。
そこまで行う必要があるか分かりませんが。
わいひら reacted
2023年10月2日 19:27
試しに当サイトでテストできるようにして表示させてみました。
https://wp-cocoon.com/?theme-switch=grayish-topfull
ほとんどのブログパーツに細かくスタイルが当てられていてすごいですね。
na2factory reacted
2023年10月2日 20:23
素敵スキンありがとうございます！
動作確認してみました。
.skin-grayishで文字間が広めに設定されていますが、その影響でページネーションの数字部分が若干左に寄っているのが気になりました。
(同様の理由で他にも左に寄っている部分がある気もしますが、気になったのはページネーションでした)
.skin-grayish .pagination .page-numbers {
text-indent: 0.16rem;
}
または
.skin-grayish .pagination .page-numbers {
letter-spacing: 0;
}
のようにするのはいかがでしょうか。
両者の違いは2桁以上の数字の時に文字間を空けるかどうかです。
またCocoonのサイトのレイアウト見本ページを見ていて気付いたのですが、アーカイブページでなく記事内に登場するページネーション(.pager-links)にもスキンのスタイルを適用した方が良いのだろうかと思いました。
意図したデザインであれば問題ありません。
https://wp-cocoon.com/layout/?theme-switch=grayish-topfull
na2factory reacted
トピックスターター 2023年10月2日 22:17
トピックスターター 2023年10月2日 22:24
ご確認ありがとうございます！
ご指摘もありがとうございます。ページネーションが二桁になる場合の確認ができておりませんでした。
文字間の対策について参考にさせていただきたいと思います！
また、ページ内にページネーションが登場するケースは全く考慮できていませんでした。
スタイルが当たるように修正させていただきたいと思います。
ありがとうございました！
2023年10月2日 23:32
●現象
Gutenbergを開くと、エラーになる。
●原因
wp_add_inline_styleの使い方を誤っている。
インラインCSSを<style>タグで囲っている為。
わいひら and na2factory reacted
トピックスターター 2023年10月3日 15:54
こんにちは
昨日、ご指摘いただきましたページネーションの部分を修正しました。
左寄せになってる箇所を@haruinoue 様の以下を使用させていただきました。
letter-spacing: 0;
また、記事内にぺージャーがある場合もスタイルを当てました。
以下は固定ページでのデモページになります。
※記事内のページャーは一覧ページに出る物と違い、あるだけ数字が並ぶ仕様のようなので
ずらっと並んでます・・・
https://cocoon-grayish.na2-factory.com/pager-testpage/
この修正内容でいかがでしょうか？
何かお気付きの点がありましたら、よろしくお願いいたします。
トピックスターター 2023年10月3日 16:04
色々とご指摘ありがとうございます。
ボタンのhoverバグ、wp_add_inline_style使用ミスのブロックエディタを開く際のエラー（これはデバッグモードで見えるエラーでよろしいですか？）について修正しました。
スキンの紹介サイトで修正版ver1.0.1をダウンロードできるようにしておりますので、
もしお時間ありましたらご確認をよろしくお願いいたします。
https://cocoon-grayish.na2-factory.com/
Cocoonのver2.6.7について、これから動作確認させていただきます。
わいひら reacted
2023年10月3日 18:33
Ver1.0.1
●現象
2点バグがあり。
Gutenbergで以下のスタイルが反映されない。
- タグボックス
- プロフィールボックス
[英字フォント設定選択]でRoboto Slabを選択した。
この時、タグボックスで、ラベル「Amazon」を選択するとアイコンが表示されない。
na2factory and わいひら reacted
2023年10月3日 20:32
na2factoryさん
私からも、細かいところを少しだけ。
いずれも、Gutenberg（編集画面）上の話です。
①
アコーディオンを開いた時の高さが、必要以上に高いようです。
アコーディオンを開いたままでは、マウスのホイールで、上下に移動できなくなってしまうことがあります。
（その際、下にブロックがあると、何かはみ出しているような印象もあります、周りが黒い・・・）
カーソルキーで、上下に移動はできます。
②
こちらは本当に細かい話ですが。
「アイコンボックス」選択時の青色の枠の表示が、ブロック全体ではなく、左上だけになっているようです。
例えば、「タブボックス」であれば、以下のようにブロック全体の枠の色が変わります。
na2factory reacted
2023年10月3日 20:36
1点質問よろしいでしょうか。
CSSでの以下のコード部分は
.skin-grayish a, .skin-grayish .a-wrap {
color: var(--skin-grayish-a-wrap-txt);
}
以下のようなコードだと、どこかまずいところが出ますでしょうか。
a {
color: var(--skin-grayish-a-wrap-txt);
}
もしくは
a, .a-wrap {
color: var(--skin-grayish-a-wrap-txt);
}
というのも添付画像のようなAmazon商品リンクのボタンとかだと、CSSの詳細度が負けてしまって文字色が灰色になる部分があったので。
この投稿は1年前ずつわいひらに変更されました
na2factory reacted
2023年10月3日 21:32
「タブ見出しボックス」の誤記です。
そこはポイントではありませんので、書かなくても良いと思いますけれど。
一応念のため。
誤記ではありません。
「タブボックス」です。
「タブ見出しボックス」は、アイコンとテキストを自分で入力します。
「タブボックス」では、既定のものがあります。
「タブボックス」では、既定のものがあります。
アイコンとテキストに、同じものを入力すると、見た目では分からないかもしれません。
上が「タブ見出しボックス」。
下が「タブボックス」です。
下が「タブボックス」です。
このスキンでは、タブの部分の大きさが違うみたいです。
このトピックの本筋とは違うことを書いてしまいました。
申し訳ないです。
申し訳ないです。
na2factory reacted
2023年10月4日 00:43
na2factoryさん
すみません、先のタブボックス、プロフィールボックスは正しく表示されました。
あれ？
表示されますか？
私の環境では表示されないみたいです。
タブボックスしか確認していません、すみません。
（スキンのVerは、1.0.1にしたはずです）
Amazonのアイコンが表示されないのは、編集画面だけですけれど。
公開ページは大丈夫みたいです。
長いので途中を端折りますが、負けてしまっているようなんですよね。
スキンなしだと、Gutenberg上でも、表示されています。
バタバタしていて、私の確認ミスかもしれないです・・・。
（その場合はすみません）
（その場合はすみません）
na2factoryさんにもご確認いただいて、表示されているようであれば、ご放念いただければと思います。
（中途半端な確認で申し訳ないです）
（中途半端な確認で申し訳ないです）
わいひら and na2factory reacted
トピックスターター 2023年10月4日 08:14
トピックスターター 2023年10月4日 08:30
ご確認ありがとうございます！
.skin-grayish
はご指摘のaタグや.a-wrapについては無い方が良さそうですので、
次のverで取り除く方向で検証します。
返信の中ですみません、、、私からも質問させていただいてよろしいでしょうか。
Cocoonサイトのスキンデモで、grayishを適用させて確認したのですが、
PCの際にヘッダーのグローバルナビの横に検索ボタンが表示されるはずが、表示されないので
何故なんだろうと思っております。
スキンのfunctions.phpで以下のように書いているのですが、
どこかおかしい点があるでしょうか。
/ -----------------------------------------------------------------------------
// skin独自のメニュー追加：
// -----------------------------------------------------------------------------
// グローバルナビの最後にモバイル用検索BOX流用し、入れる
add_filter('wp_nav_menu_items', 'add_header_spsearchform', 10, 2);
if (!function_exists('add_header_spsearchform')) :
function add_header_spsearchform($navi, $args)
{
ob_start();
get_template_part('skins/skin-grayish-topfull/tmp-grayish/cstm-sns-follow-buttons');
get_template_part('skins/skin-grayish-topfull/tmp-grayish/cstm-mobile-search-button');
$searchform = ob_get_contents();
ob_end_clean();
if ($args->theme_location == NAV_MENU_HEADER) {
$navi .= $searchform;
}
return $navi;
}
endif;
わいひら reacted
トピックスターター 2023年10月4日 08:38
@mk2_mk2 さん、@chu-yaさん
タブボックスのAmazonのアイコンについてご指摘ありがとうございます。
エディタで表示されないのは私のミスです。
Amazonのロゴは、font-family: "Font Awesome 5 Brands"を読み込む必要があるのが抜けてました。
次verで修正させていただきます。
2023年10月4日 10:20
「トップページ設定：ヘッダー」と「トップページ以外」で以下の項目がある。
- 【PC】グローバルナビの高さ
- 【PC】グローバルナビの背景色
- 【PC】グローバルナビ背景色の不透明度調整
仕様で、別々に設定できる必要はないのでは？私は、トップページ以外」は不要と思います。
それに合わせ「トップページ設定：コンテンツ」に「【投稿】パンくずリスト "Home"を変更」含め、1箇所でテキスト変更した方が望ましいと思います。
「トップページ設定：コンテンツ」と言うメニューの文言は変更になりますが。
- 文言「トップページ」×→「フロントページ」〇
- CSS中にコメントアウトしてるプロパティを散見します。ユーザー提供するなら、削除すべきと思います。
2023年10月4日 13:16
メニューの文言が間違っています。
マニュアルでは「ヘッダー・フッターモバイルボタン」と書いてあり。
https://cocoon-grayish.na2-factory.com/manual-sp-menu/#toc7
Cocoon公式で使われている文言に、他も無いか見直して下さい。
トピックスターター 2023年10月4日 16:12
@chu-ya さん
●カスタマイザーについてご意見ありがとうございます。
「トップページ設定：ヘッダー」と「トップページ以外」で
- 【PC】グローバルナビの高さ
- 【PC】グローバルナビの背景色
- 【PC】グローバルナビ背景色の不透明度調整
が別々にあるのは、トップページ以外ではロゴも表示するためです。
ロゴがテキストの場合はあえてトップページと異なる設定に変えることはないかもしれませんが・・・
画像を設定したときに調整したい方がいるのでは？と思ってこのようにしました。
（グローバルナビの高さに合わせて画像が大きくなります。）
どれくらいニーズがあるのかは今の段階ではなんとも言えませんが、
このままにしたいと考えてます。
------
●パンくずリストのHome変更箇所は設置場所迷ったのですが、
トップページ設定：コンテンツの項目に置いている、Nextボタン "Next"を変更
もトップページだけでなくカテゴリ等の一覧ページにも出力されますし、項目名をテキスト変更：等に変更して
パンくずのHomeも一緒にした方がいいかもしれないと思いました。
マニュアルと一緒に修正が必要なので変更は少々先の予定です。
------
●文言「トップページ」×→「フロントページ」〇
そうですね。
ただ、WordPressに慣れていない方も結構いらっしゃると思うので
トップページの方が直感的に分かるのかな、と。
修正する場合は全てトップページをフロントページに置き換えるのではなく、トップページ（フロントページ）とか
そういう表現にすると思います。
------
●CSS中にコメントアウトしてるプロパティを散見します。ユーザー提供するなら、削除すべきと思います。
スキンのstyle.cssについてver1.0.2でコメントアウトを削減しました。
※自分が思い出せなくなると困る部分はコメント残してますが、ご容赦いただきたく思います。
------
●マニュアルでは「ヘッダー・フッターモバイルボタン」と書いてあり。
こちらもご指摘ありがとうございます。随時修正していきます。
わいひら reacted
2023年10月4日 16:22
トップページをフロントページに置き換えるのではなく、トップページ（フロントページ）とか
そのまま「フロントページ」でOKです。
Cocoonで使われている文言に合わせるべきだと思います。
全体の見直し願います。
トピックスターター 2023年10月4日 16:23
お世話になります。
grayishのver1.0.1について、多数のご指摘ありがとうございます。
ひとまず、以下の修正をおこなったver1.0.2をDownload可能にしております。Cocoonの確認verは2.6.7です。
https://cocoon-grayish.na2-factory.com/
（自分で発見したバグ修正も含まれています・・・）
●aタグ等からスキン独自クラス削除
●ブロックエディタでのバグ修正
--エディタ内でタブボックスのAmazonのアイコンが出ない
--エディタ内で各種Cocoonボックス内のテキストカラー変更が効かない
--タブボックスでカスタマイザーの英字フォントが反映されていない
●プロフィールボックスウィジェット
コンテンツ上部に表示した際のスタイルをコンテンツ下部と同様に変更
●style.cssのコメントアウト部分の整理
------
ver1.0.2では、ｍｋ２さんから頂いた、
ブロックエディタでのアコーディオンとアイコンボックス選択の部分は対応できていません。
何度も恐れ入りますが、もしお時間ありましたら動作を見ていただけると助かります。
わいひら reacted
2023年10月4日 21:34
Ver1.0.2
●functions.php
get_site_icon_fontの戻り値を「Font Awesome 5」固定としている。
単に、option.csvで設定すればいいのでは？
●option.csv
サムネイル画像9:16固定としている。
この為、途中から生成されるサムネイルの比率が変わってしまう。
Regenerate Thumbnailsで再生成する事となり、問題となりませんか？
2023年10月4日 21:41
Cocoonサイトのスキンデモで、grayishを適用させて確認したのですが、
PCの際にヘッダーのグローバルナビの横に検索ボタンが表示されるはずが、表示されないので
何故なんだろうと思っております。スキンのfunctions.phpで以下のように書いているのですが、
どこかおかしい点があるでしょうか。
僕のローカルのCocoonテスト環境で確認してみたところ検索は表示されました。
なので当サイトだけの問題のようです。
同じテーマなのに当サイトだけ表示されないのはプラグインくらいかなと思い全て無効にしてみたのですが改善されませんでした。
そうすると子テーマのカスタマイズが原因かと親テーマで確認してみたんですけど改善されませんでした。
他に設定違いとかのトリガーがあるのかもしれません。もうちょっと探ってみます。
●CSS中にコメントアウトしてるプロパティを散見します。ユーザー提供するなら、削除すべきと思います。
スキンのstyle.cssについてver1.0.2でコメントアウトを削減しました。
※自分が思い出せなくなると困る部分はコメント残してますが、ご容赦いただきたく思います。
個人的にそこまで厳密にしなくてもとは思います。まだ不具合確認中ですし、人それぞれでやりやすい方法もあると思うので。
やりやすい方法で問題ないかと思います。
na2factory reacted
2023年10月4日 23:03
Ver.1.0.2
●現象
[Coocon設定]→[インデックス]→[カテゴリーごと]
カテゴリーごとに背景色の交互に変わる。
この時、フッターとの間に余白があり。
これは意図した仕様ですか？
2023年10月5日 01:49
na2factoryさん
ご対応、お疲れさまです。
●ブロックエディタでのバグ修正
--エディタ内でタブボックスのAmazonのアイコンが出ない
こちら、表示されていることを確認させていただきました。
本日は時間とれず、これだけ・・・です。
na2factory reacted
トピックスターター 2023年10月5日 11:02
ご確認ありがとうございます。
Ver1.0.2
●functions.php
get_site_icon_fontの戻り値を「Font Awesome 5」固定としている。
単に、option.csvで設定すればいいのでは？
制作始めのうちはoption.csvで設定していました。
以下のように記述してました。
site_icon_font,font_awesome_5
この設定で新規で作ったデモサイトでスキンの動作確認を行った際に
Cocoon設定の本文、ボタンタブでアイコンの表示が欠けたていたり、
テーマ情報で「Font Awesome：4」と出力されていて原因解析までは行ってませんでした。
Cocoon設定を保存すると、「Font Awesome：4」のアイコンに表示が変わったり不安定だったので
functions.phpで設定するように変更した部分です。
※表示側は「Font Awesome：5」が反映されていました。
functions.phpで設定した場合は上記のようなCocoon設定の現象がなくなったのでそのままにしています。
トピックスターター 2023年10月5日 11:23
●option.csv
サムネイル画像9:16固定としている。
この為、途中から生成されるサムネイルの比率が変わってしまう。
Regenerate Thumbnailsで再生成する事となり、問題となりませんか？
このスキンはサムネイル画像9:16前提でデザインしたもので、
他の比率でも問題なく表示できるのかの確認は一切行っていないので
スキン制御とさせていただいてます。
他テーマやスキンからの乗り換えで比率の変更、Regenerate Thumbnailsで再生成が問題になる場合は、
申し訳ありませんがスキン制御を各自で外してもらい、レイアウト崩れなど起きても
各自で調整していただくことになると思います。
2023年10月5日 12:34
この設定で新規で作ったデモサイトでスキンの動作確認を行った際に
Cocoon設定の本文、ボタンタブでアイコンの表示が欠けたていたり、
テーマ情報で「Font Awesome：4」と出力されていて原因解析までは行ってませんでした。
了解しました。
Cocoon設定を見ると、言われるように反映さていませんね。
●関連
同じ現象を確認できたので、以下に不具合として投稿しました。
わいひら reacted
2023年10月5日 13:40
他テーマやスキンからの乗り換えで比率の変更、Regenerate Thumbnailsで再生成が問題
[Cocoon設定]→[画像]→サムネイル画像
表示される例えばエントリーカードの表示サイズを変更する機能ではありません。
メディアフォルダーに自動生成されるサムネイル画像自体を設定比率で作成します。
https://wp-cocoon.com/thumbnail-aspect-ratio/
スキン制御により、サムネイル自動生成に影響を及ぼすと思いますが。
＞わいひらさん
↑間違っていますかね？
CSSで表示だけをaspect-ratio:16 / 9とすればいいかと思いました。
①スキン前、②スキン後
2023年10月5日 15:08
ver.1.0.2
●現象
Gutenbergで2点あり。
- 投稿の新規タグを追加の入力フォームに別の線が引かれる。
→スキンCSSが影響しています。 - なぜか「カテゴリー」の枠が間延びする。
→原因不明で、スキンを止めると間延びしません。
2023年10月5日 15:45
検索ボタンが表示されない件について、
お手数おかけしてしまい申し訳ありません。ローカルでは表示されているんですね。
原因が分かれば嬉しいところですが・・・
これ僕がスキンのフォルダ名を変更していたのが原因でした。
フォルダ名をgrayish-topfull → skin-grayish-topfullに戻したら表示されるようになりました。
grayish ver1.0.2を当サイトにも適用しておきました。
https://wp-cocoon.com/?theme-switch=grayish-topfull
ところでgrayishスキンですが、是非ともCocoonに同梱させていただければと考えております。
その際は（少ないかもしれませんが）同梱料もお支払いさせていただければと考えております。
もし同梱が大丈夫でしたら、同梱料の詳細に関しては当フォーラムに登録したメールアドレス宛にご連絡させていただいてもよろしいでしょうか。
2023年10月5日 15:46
同じ現象を確認できたので、以下に不具合として投稿しました。
ありがとうございます。
後で確認させていただきます。
トピックスターター 2023年10月5日 15:52
ご確認ありがとうございます。
ver.1.0.2
●現象
Gutenbergで2点あり。
- 投稿の新規タグを追加の入力フォームに別の線が引かれる。
→スキンCSSが影響しています。- なぜか「カテゴリー」の枠が間延びする。
→原因不明で、スキンを止めると間延びしません。
2.なぜか「カテゴリー」の枠が間延びする。
→原因不明で、スキンを止めると間延びしません。
と、前にｍｋ２さんにご指摘いただいているアコーディオンボックスを開いたときの高さがおかしい件の原因が
GoogleFontの読み込み部分だったようで、次verで修正できる見込みです。
1のタグの欄の別の線も次verで修正させていただきます。
固定ページ 1 / 3
次へ
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。