●感想
私もスキン作りましたが、よくできていると思います。

●提案

２点あります。

1. 入力項目をスキン制御で自動化しており、スキン選択の際、表示設定も「最新の投稿」に自動設定してみては？
2. モバイルフッターメニュー背景色の不透明度調整などchoicesにしている。
   選択させるのに意図がありますか？
   number＋min/maxの方が自由度が高くありませんか？

●バグ

CSSに以下の問題がります。

現象
ボタン全般、例：pagination-nextをhoverの時、ページ全体がゆらぐ。

原因
hoverの時、border:noneとしている為、全体の高さ36.55px→34.55pxとなってしまう。

操作感で、オン/オフの2択の時、チェックボックスになっており。
個人的には、ラジオボックスの方が良いのではと思います。

@chu-ya 

早速ご確認いただき、感想もありがとうございます。

まずはCSSのボタンhover部分について、ご指摘ありがとうございます。

こちら、トップページの確認・注意事項の一覧へ、のボタンについて取り急ぎ修正してみました。

スキンデータの修正もでき次第アップするようにします。

ご提案の１つ目について

>1.入力項目をスキン制御で自動化しており、スキン選択の際、表示設定も「最新の投稿」に自動設定してみては？

について、Cocoon設定のインデックスのフロントページタイプの選択のことでしょうか？

こちらをスキン制御で「カテゴリーごと」にしてみては？ということで、合ってますでしょうか？

合っている場合、ほぼスキン制御でユーザーが選べる場所が少ないので、ここぐらいは選べたほうがいいのかなと思ってデフォルトのままにしております。

ご提案の２つ目について

>2.モバイルフッターメニュー背景色の不透明度調整などchoicesにしている。
選択させるのに意図がありますか？
number＋min/maxの方が自由度が高くありませんか？

こちら、テーマカスタマイザーで変更できるようにカスタマイズするのが自身初だったので、

至らない点が多々あると思います。

改善のご要望が多数あるようでしたら、今後対応を検討させていただきたいと思います。

1ですが、[設定]→[表示設定]→ホームページの表示「最新の投稿」の自動設定を示します。

私は以下のようにしています。

スキンのfunctions内で、pre_option_show_on_frontにフックし
スキンが設定されたら自動設定するようにしています。

そこまで行う必要があるか分かりませんが。

@chu-ya 

[設定]→[表示設定]→ホームページの表示「最新の投稿」のことでしたか。

大変失礼しました。

その設定は、サイト型にしたい方もいらっしゃる可能性があるので

デフォルトのままにしておきたいと思っております。

今スキンサイトを見ただけですが、めちゃくちゃ作り込まれてますね。このスキン。
これからサイトに目を通して一通り使ってみますね。

試しに当サイトでテストできるようにして表示させてみました。
https://wp-cocoon.com/?theme-switch=grayish-topfull
ほとんどのブログパーツに細かくスタイルが当てられていてすごいですね。

トップページの添付画像のこの部分はこちら側でテーマと別にスタイリングしているのでしょうがなく不具合ではない部分です。

当サイトでのスキン動作確認は、トップページなどでの「スキン動作デモ」からgrayishを選択することで試すことができます。

すみません。間違えたので取り消します。

素敵スキンありがとうございます！
動作確認してみました。

.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

@yhira 

お忙しい中、ご確認ありがとうございます！

スキン動作デモでも見れるようにしていただき、ありがとうございます！

自分でも何かないか、よく確認させていただきます。

@haruinoue 

ご確認ありがとうございます！

ご指摘もありがとうございます。ページネーションが二桁になる場合の確認ができておりませんでした。

文字間の対策について参考にさせていただきたいと思います！

また、ページ内にページネーションが登場するケースは全く考慮できていませんでした。

スタイルが当たるように修正させていただきたいと思います。

ありがとうございました！

●現象
Gutenbergを開くと、エラーになる。

●原因
wp_add_inline_styleの使い方を誤っている。
インラインCSSを<style>タグで囲っている為。

@chu-ya 

ご指摘ありがとうございます！

こちらも修正させていただきます。

@haruinoue 

こんにちは

昨日、ご指摘いただきましたページネーションの部分を修正しました。

左寄せになってる箇所を@haruinoue 様の以下を使用させていただきました。

  letter-spacing: 0;

また、記事内にぺージャーがある場合もスタイルを当てました。

以下は固定ページでのデモページになります。

※記事内のページャーは一覧ページに出る物と違い、あるだけ数字が並ぶ仕様のようなので
ずらっと並んでます・・・

https://cocoon-grayish.na2-factory.com/pager-testpage/

この修正内容でいかがでしょうか？

何かお気付きの点がありましたら、よろしくお願いいたします。

@chu-ya 

色々とご指摘ありがとうございます。

ボタンのhoverバグ、wp_add_inline_style使用ミスのブロックエディタを開く際のエラー（これはデバッグモードで見えるエラーでよろしいですか？）について修正しました。

スキンの紹介サイトで修正版ver1.0.1をダウンロードできるようにしておりますので、
もしお時間ありましたらご確認をよろしくお願いいたします。

https://cocoon-grayish.na2-factory.com/

Cocoonのver2.6.7について、これから動作確認させていただきます。

Ver1.0.1

●現象

2点バグがあり。

Gutenbergで以下のスタイルが反映されない。

• タグボックス
• プロフィールボックス

[英字フォント設定選択]でRoboto Slabを選択した。
この時、タグボックスで、ラベル「Amazon」を選択するとアイコンが表示されない。

na2factoryさん

私からも、細かいところを少しだけ。

いずれも、Gutenberg（編集画面）上の話です。

①

アコーディオンを開いた時の高さが、必要以上に高いようです。

アコーディオンを開いたままでは、マウスのホイールで、上下に移動できなくなってしまうことがあります。
（その際、下にブロックがあると、何かはみ出しているような印象もあります、周りが黒い・・・）

カーソルキーで、上下に移動はできます。

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の詳細度が負けてしまって文字色が灰色になる部分があったので。

投稿者:: @mk2_mk2

↑

例えば、「タブボックス」であれば、以下のようにブロック全体の枠の色が変わります。

「タブ見出しボックス」の誤記です。

投稿者:: @chu-ya

↑

「タブ見出しボックス」の誤記です。

そこはポイントではありませんので、書かなくても良いと思いますけれど。
一応念のため。

誤記ではありません。
「タブボックス」です。

@mk2_mk2 さん
正しくタブボックス表示され、勘違いしてました。

na2factoryさん
すみません、先のタブボックス、プロフィールボックスは正しく表示されました。

@na2factory さん

ページネーションに関する2点、修正されていることを確認しました。

私の気付いた範囲では問題ないと思います！

投稿者:: @chu-ya

↑

na2factoryさん
すみません、先のタブボックス、プロフィールボックスは正しく表示されました。

あれ？
表示されますか？

私の環境では表示されないみたいです。
タブボックスしか確認していません、すみません。
（スキンのVerは、1.0.1にしたはずです）

Amazonのアイコンが表示されないのは、編集画面だけですけれど。

@mk2_mk2 

ご確認とご指摘ありがとうございます！

ご指摘いただいた箇所は、自分で使っていて何でこうなるんだろう・・・と
思いつつもそのままにしておいた部分でした。

原因調査してみます。

@yhira 

ご確認ありがとうございます！

.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;

@haruinoue さん

ページネーションについてご確認いただいて、
ありがとうございました！！

@mk2_mk2 さん、@chu-yaさん

タブボックスのAmazonのアイコンについてご指摘ありがとうございます。

エディタで表示されないのは私のミスです。

Amazonのロゴは、font-family: "Font Awesome 5 Brands"を読み込む必要があるのが抜けてました。

次verで修正させていただきます。

「トップページ設定：ヘッダー」と「トップページ以外」で以下の項目がある。

• 【PC】グローバルナビの高さ
• 【PC】グローバルナビの背景色
• 【PC】グローバルナビ背景色の不透明度調整

仕様で、別々に設定できる必要はないのでは？私は、トップページ以外」は不要と思います。

それに合わせ「トップページ設定：コンテンツ」に「【投稿】パンくずリスト "Home"を変更」含め、1箇所でテキスト変更した方が望ましいと思います。
「トップページ設定：コンテンツ」と言うメニューの文言は変更になりますが。

• 文言「トップページ」×→「フロントページ」〇
• CSS中にコメントアウトしてるプロパティを散見します。ユーザー提供するなら、削除すべきと思います。

メニューの文言が間違っています。
マニュアルでは「ヘッダー・フッターモバイルボタン」と書いてあり。

https://cocoon-grayish.na2-factory.com/manual-sp-menu/#toc7

Cocoon公式で使われている文言に、他も無いか見直して下さい。

@chu-ya さん

●カスタマイザーについてご意見ありがとうございます。

「トップページ設定：ヘッダー」と「トップページ以外」で

• 【PC】グローバルナビの高さ
• 【PC】グローバルナビの背景色
• 【PC】グローバルナビ背景色の不透明度調整

が別々にあるのは、トップページ以外ではロゴも表示するためです。

ロゴがテキストの場合はあえてトップページと異なる設定に変えることはないかもしれませんが・・・

画像を設定したときに調整したい方がいるのでは？と思ってこのようにしました。
（グローバルナビの高さに合わせて画像が大きくなります。）

どれくらいニーズがあるのかは今の段階ではなんとも言えませんが、
このままにしたいと考えてます。

------

●パンくずリストのHome変更箇所は設置場所迷ったのですが、

トップページ設定：コンテンツの項目に置いている、Nextボタン "Next"を変更

もトップページだけでなくカテゴリ等の一覧ページにも出力されますし、項目名をテキスト変更：等に変更して

パンくずのHomeも一緒にした方がいいかもしれないと思いました。

マニュアルと一緒に修正が必要なので変更は少々先の予定です。

------

●文言「トップページ」×→「フロントページ」〇

そうですね。

ただ、WordPressに慣れていない方も結構いらっしゃると思うので
トップページの方が直感的に分かるのかな、と。

修正する場合は全てトップページをフロントページに置き換えるのではなく、トップページ（フロントページ）とか
そういう表現にすると思います。

------

●CSS中にコメントアウトしてるプロパティを散見します。ユーザー提供するなら、削除すべきと思います。

スキンのstyle.cssについてver1.0.2でコメントアウトを削減しました。
※自分が思い出せなくなると困る部分はコメント残してますが、ご容赦いただきたく思います。

------

●マニュアルでは「ヘッダー・フッターモバイルボタン」と書いてあり。

こちらもご指摘ありがとうございます。随時修正していきます。

投稿者:: @na2factory

↑

トップページをフロントページに置き換えるのではなく、トップページ（フロントページ）とか

そのまま「フロントページ」でOKです。
Cocoonで使われている文言に合わせるべきだと思います。
全体の見直し願います。

お世話になります。

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では、ｍｋ２さんから頂いた、
ブロックエディタでのアコーディオンとアイコンボックス選択の部分は対応できていません。

何度も恐れ入りますが、もしお時間ありましたら動作を見ていただけると助かります。

Ver1.0.2

●functions.php

get_site_icon_fontの戻り値を「Font Awesome 5」固定としている。
単に、option.csvで設定すればいいのでは？

●option.csv

サムネイル画像9:16固定としている。
この為、途中から生成されるサムネイルの比率が変わってしまう。
Regenerate Thumbnailsで再生成する事となり、問題となりませんか？

投稿者:: @na2factory

↑

Cocoonサイトのスキンデモで、grayishを適用させて確認したのですが、
PCの際にヘッダーのグローバルナビの横に検索ボタンが表示されるはずが、表示されないので
何故なんだろうと思っております。

スキンのfunctions.phpで以下のように書いているのですが、
どこかおかしい点があるでしょうか。

僕のローカルのCocoonテスト環境で確認してみたところ検索は表示されました。
なので当サイトだけの問題のようです。
同じテーマなのに当サイトだけ表示されないのはプラグインくらいかなと思い全て無効にしてみたのですが改善されませんでした。
そうすると子テーマのカスタマイズが原因かと親テーマで確認してみたんですけど改善されませんでした。
他に設定違いとかのトリガーがあるのかもしれません。もうちょっと探ってみます。

投稿者:: @na2factory

↑

●CSS中にコメントアウトしてるプロパティを散見します。ユーザー提供するなら、削除すべきと思います。

スキンのstyle.cssについてver1.0.2でコメントアウトを削減しました。
※自分が思い出せなくなると困る部分はコメント残してますが、ご容赦いただきたく思います。

個人的にそこまで厳密にしなくてもとは思います。まだ不具合確認中ですし、人それぞれでやりやすい方法もあると思うので。
やりやすい方法で問題ないかと思います。

Ver.1.0.2

●現象
[Coocon設定]→[インデックス]→[カテゴリーごと]

カテゴリーごとに背景色の交互に変わる。
この時、フッターとの間に余白があり。
これは意図した仕様ですか？

na2factoryさん

ご対応、お疲れさまです。

投稿者:: @na2factory

↑

●ブロックエディタでのバグ修正
--エディタ内でタブボックスのAmazonのアイコンが出ない

こちら、表示されていることを確認させていただきました。

本日は時間とれず、これだけ・・・です。

ご確認ありがとうございます。

投稿者:: @chu-ya

↑

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設定の現象がなくなったのでそのままにしています。

投稿者:: @chu-ya

↑

●option.csv

サムネイル画像9:16固定としている。
この為、途中から生成されるサムネイルの比率が変わってしまう。
Regenerate Thumbnailsで再生成する事となり、問題となりませんか？

このスキンはサムネイル画像9:16前提でデザインしたもので、

他の比率でも問題なく表示できるのかの確認は一切行っていないので
スキン制御とさせていただいてます。

他テーマやスキンからの乗り換えで比率の変更、Regenerate Thumbnailsで再生成が問題になる場合は、
申し訳ありませんがスキン制御を各自で外してもらい、レイアウト崩れなど起きても
各自で調整していただくことになると思います。

わいひら様

検索ボタンが表示されない件について、
お手数おかけしてしまい申し訳ありません。

ローカルでは表示されているんですね。

原因が分かれば嬉しいところですが・・・

投稿者:: @yhira

↑

やりやすい方法で問題ないかと思います。

こちらについてもありがとうございました。

投稿者:: @chu-ya

↑

Ver.1.0.2

●現象
[Coocon設定]→[インデックス]→[カテゴリーごと]

カテゴリーごとに背景色の交互に変わる。
この時、フッターとの間に余白があり。
これは意図した仕様ですか？

ご確認ありがとうございます。

ここは意図していない余白ですね。修正させていただきます。

ｍｋ２さん

タブボックスについて、お忙しい中ご確認ありがとうございました。

投稿者:: @na2factory

↑

この設定で新規で作ったデモサイトでスキンの動作確認を行った際に
Cocoon設定の本文、ボタンタブでアイコンの表示が欠けたていたり、
テーマ情報で「Font Awesome：4」と出力されていて原因解析までは行ってませんでした。

了解しました。
Cocoon設定を見ると、言われるように反映さていませんね。

●関連

同じ現象を確認できたので、以下に不具合として投稿しました。

https://wp-cocoon.com/community/postid/74363/

投稿者:: @na2factory

↑

他テーマやスキンからの乗り換えで比率の変更、Regenerate Thumbnailsで再生成が問題

[Cocoon設定]→[画像]→サムネイル画像

表示される例えばエントリーカードの表示サイズを変更する機能ではありません。
メディアフォルダーに自動生成されるサムネイル画像自体を設定比率で作成します。

https://wp-cocoon.com/thumbnail-aspect-ratio/

スキン制御により、サムネイル自動生成に影響を及ぼすと思いますが。

＞わいひらさん

↑間違っていますかね？

CSSで表示だけをaspect-ratio:16 / 9とすればいいかと思いました。

①スキン前、②スキン後

ver.1.0.2

●現象

Gutenbergで2点あり。

1. 投稿の新規タグを追加の入力フォームに別の線が引かれる。
   →スキンCSSが影響しています。
2. なぜか「カテゴリー」の枠が間延びする。
   →原因不明で、スキンを止めると間延びしません。

投稿者:: @na2factory

↑

検索ボタンが表示されない件について、
お手数おかけしてしまい申し訳ありません。

ローカルでは表示されているんですね。

原因が分かれば嬉しいところですが・・・

これ僕がスキンのフォルダ名を変更していたのが原因でした。
フォルダ名をgrayish-topfull → skin-grayish-topfullに戻したら表示されるようになりました。

grayish ver1.0.2を当サイトにも適用しておきました。
https://wp-cocoon.com/?theme-switch=grayish-topfull

ところでgrayishスキンですが、是非ともCocoonに同梱させていただければと考えております。
その際は（少ないかもしれませんが）同梱料もお支払いさせていただければと考えております。
もし同梱が大丈夫でしたら、同梱料の詳細に関しては当フォーラムに登録したメールアドレス宛にご連絡させていただいてもよろしいでしょうか。

投稿者:: @chu-ya

↑

同じ現象を確認できたので、以下に不具合として投稿しました。

https://wp-cocoon.com/community/postid/74363/

ありがとうございます。
後で確認させていただきます。

ご確認ありがとうございます。

投稿者:: @chu-ya

↑

ver.1.0.2

●現象

Gutenbergで2点あり。

1. 投稿の新規タグを追加の入力フォームに別の線が引かれる。
   →スキンCSSが影響しています。
2. なぜか「カテゴリー」の枠が間延びする。
   →原因不明で、スキンを止めると間延びしません。

2.なぜか「カテゴリー」の枠が間延びする。
→原因不明で、スキンを止めると間延びしません。

と、前にｍｋ２さんにご指摘いただいているアコーディオンボックスを開いたときの高さがおかしい件の原因が

GoogleFontの読み込み部分だったようで、次verで修正できる見込みです。

1のタグの欄の別の線も次verで修正させていただきます。