特典機能について

NeumorphismデザインのCocoonスキン「凸凹」を作成しました! | わいひらに連絡 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、10月25日から手術のため数週間入院します。その際、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。準備のため10月18日から12月前半(見込み)まで実施させていただきます。
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
NeumorphismデザインのCoc...
 
共有:
通知
すべてクリア

[解決済] NeumorphismデザインのCocoonスキン「凸凹」を作成しました!

固定ページ 1 / 2

北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

わいひらさん、はじめまして!北と申します!

この度、Cocoonのスキン「凸凹」というモノを作りました!

お忙しいとは存じますが、是非一度見ていただけると嬉しいです!

デモサイト⇓

https://kitatarian.com/cocoon/

ダウンロードページ⇓

https://kitatarian.com/cocoon/download/

報告ページ⇓

https://kitatarian.com/cocoonskin/

 

スキンの特徴は、

  • 立体的なデザイン
  • 色を好きな色に変更可能
  • 角の丸さを調節可能

です!

一つ不安な点が、色の変更機能がCocoon設定の外のテーマカスタマイザーにおいてあることです。

プレビュー画面の見やすさ重視でCocoon設定からはみ出してしまって・・・

申し訳ございません・・・

 

スキンを作成した際にはぜひ当サイトで紹介させてください」の内容には同意しております。

 

同梱していたけるのを目標としております!

不具合があれば頑張って修正しますので、お手数ですが、ご指摘いただけると助かります!

どうぞよろしくお願いいたします!


さる子, mk2, はる と 1 人の方がいいね!
はる
(@haruinoue)
メンバーサイト Moderator
結合: 1年前
投稿: 785
 

面白い見た目ですね!

色を任意に変更できるSILKはCocoonのキーカラーを使っていましたが、凸凹のように角丸具合を変更できるのなら実際の画面を見ながら調整できるカスタマイザーの方が相性が良いですね。


意図したものだったら申し訳ないですが、モバイル表示時のメニュー部分はもしかしたらスタイルの適用漏れかなと思いました。
リンクやボタンなどは全て影を付けているような感じがしたので…。


カスタマイザー画面でなく普通にサイトを開いた際、javascript.jsの41行目の

wp.customize( 'color_bg', function( value ) {

の部分で

Uncaught ReferenceError: wp is not defined

というエラーが出ています(Chromeの開発者ツールで確認)。

エラーが出ていても問題自体はなさそうですが、カスタマイザー画面かどうかの判定ができるのであれば、分岐して通常表示では設定関連の処理をしないようにした方がすっきりするのかなと思いました。


わいひら, Yamachan11 件のいいね!
Yamachan11
(@yamachan11)
Estimable Memberサイト
結合: 2年前
投稿: 248
Yamachan11 - FacebookYamachan11 - Twitter
 

中々、素敵なデザインだと思います。

 

ただ一つ、気になるところがありますので、確認させてください。

添付画像の様に、ところどころ文字が擦れて見えます。

 

  • これは、フォントのせいでしょうか?
  • フォントは、利用者が選べるものでしょうか?それとも固定でしょうか?

 


わいひら 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 7か月前
投稿: 2155
 

凄いです。

私のようなローテクしか持ち合わせないものにとっては、憧れすら感じます。

他では見掛けない、ユニークな個性際立つスキンです。

技術だけでなく、センスがなくてはできないと思います。


わいひら, Yamachan11 件のいいね!
とびお
 とびお
(@とびお)
ゲスト
結合: 7か月前
投稿: 2
 

SILKスキンみたいに色を変更できるスキンが新たに!って思って早速使ってみたんですけど、背景色がそのまま全体の色になるだけでCocoonの色設定に対応ってわけではないんですね😅

コメントついでにいくつか思ったこと書きますね。

メニューボタンとかクリックしたときに、ときどき強制的にページの一番上まで戻されるのは不具合なんじゃないかなー?ってことと、上下にスクロールしてもエフェクトが繰り返され続けるのは仕様なのかなー?って思いました。

あと、プレビュー画面の見やすさ重視ってありますけど、ブロックエディターのプレビューは見た目が全然違ってて、見やすくはないかなーとは感じました。

それ以外に文字がぼやけてて見にくくなっているように感じるところもあったりしたんですけど、自分が感じただけかもですね😅


Yamachan11, わいひら 件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@haruinoue さん

ありがとうございます!

投稿者:: @haruinoue

意図したものだったら申し訳ないですが、モバイル表示時のメニュー部分はもしかしたらスタイルの適用漏れかなと思いました。
リンクやボタンなどは全て影を付けているような感じがしたので…。

おっしゃる通りで、クリック(タップ)できるところはできるだけ影を付けるようにしてます!

そう言われるだけでめちゃめちゃうれしいです!

ただ、ボタンはともかく、リンク全てを凸にすると、すごい、乱雑な感じになってしまったので、一部のテキストリンク関係はスタイル外しました。

モバイル表示の際の文字リンクに関しては迷ったんですが、いったん保留としてます。

 

投稿者:: @haruinoue

カスタマイザー画面でなく普通にサイトを開いた際、javascript.jsの41行目の

wp.customize( 'color_bg', function( value){

の部分で

Uncaught ReferenceError: wp is not defined

というエラーが出ています(Chromeの開発者ツールで確認)。

こちら気付いてませんでした!

分岐の件、やってみます!ありがとうございます!

 

@yamachan11 さん、ありがとうございます!

投稿者:: @yamachan11

添付画像の様に、ところどころ文字が擦れて見えます。

 

  • これは、フォントのせいでしょうか?
  • フォントは、利用者が選べるものでしょうか?それとも固定でしょうか?

申し訳ないです

こちらは文字がくぼんで見えるように、(金属の板に彫ってある文字みたいなイメージで)

.text-shadow: 1px 1px 0 var(--color-shadow-light);

というスタイルを当てて、変更した背景色に合わせて明るい影を付けているんですが・・・

そのせいかと思います・・・

各種ブラウザでのチェックをしていないので、もしかしたらそのせいかも・・・

ちなみにCocoonのフォント選択機能はスキン制御していないので、好きに選ぶことができます。

ただ、現状ではどのフォントを選んでも影はつきます・・・

将来的に影を付けるか選べるようにしてみようかと思います。

 

@mk2_mk2 さん

恐縮です!そんな風に言ってもらえるのはめちゃめちゃうれしいです!

ちょっと泣きそうになりました(笑)

 

@とびお さん、

ご期待にそえず申し訳ございませんm(__)m

SILKスキンみたいに色を変更できるスキンが新たに!って思って早速使ってみたんですけど、背景色がそのまま全体の色になるだけでCocoonの色設定に対応ってわけではないんですね

Neumorphismというデザインの特性上、背景色と要素色が同じでないと立体的に見せることができず・・・

キーカラーなどの設定はスキン制御しており、

現状では全体色を選ぶだけとなっております。

ただ、せっかくなので、

https://dribbble.com/shots/11202391-Fitness-neumorphism

こういう、うまく他の色をくみこんであるデザインも見つけたので、SILKスキンを参考にチャレンジしてみようかと思います。

メニューボタンとかクリックしたときに、ときどき強制的にページの一番上まで戻されるのは不具合なんじゃないかなー?ってこと

こちらはおそらくですが、僕がメニュー設定で子階層のカテゴリーサンプルのための親メニューの「カテゴリー」部分を僕がトップページのリンクにしているためかと思います。

すみません。

上下にスクロールしてもエフェクトが繰り返され続けるのは仕様なのかなー?って思いました。

これは仕様です。

エフェクトがうるさいかな?と思ったんですが、表示されるたびに動くようにしちゃいました。

あと、プレビュー画面の見やすさ重視ってありますけど、ブロックエディターのプレビューは見た目が全然違ってて、見やすくはないかなーとは感じました。

すみません、語弊がありました。テーマカスタマイザの部分のプレビューを重視したという意味です。

ブロックエディタのプレビューに関しては・・・なにもしてないです

すみません・・・

それ以外に文字がぼやけてて見にくくなっているように感じるところもあったりしたんですけど、自分が感じただけかもですね

これは上記のほうでも説明している、text-shadowが原因ですね・・・

色々と貴重なご指摘をありがとうございます!!助かります!

暇をみつけて改善していきます。

 

 

コメントしてくださった皆さん、まとめての返信となったことをお許しくださいm(__)m

反応してもらえてとても嬉しかったです!精進します!


わいひらYamachan11 件のいいね!
Yamachan11
(@yamachan11)
Estimable Memberサイト
結合: 2年前
投稿: 248
Yamachan11 - FacebookYamachan11 - Twitter
 

@kita さん

補足です。

 

確かに「文字の擦れ」はファイヤーフォックスだけの様です。

添付1:クローム

添付2:エッジ

FFの件を除外して、

完成を、楽しみにしています。

 

This post was modified 7か月前 3回 by Yamachan11

件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yamachan11 さん

確認していただいてありがとうございます。

後回しにしていた各ブラウザ、パソコンにちゃんと入れ込むことにします!

 

投稿者:: @yamachan11

完成を、楽しみにしています。

 

頑張ります!


とびお
 とびお
(@とびお)
ゲスト
結合: 7か月前
投稿: 2
 

どもども(^^)

ページの一番上ってのはトップページじゃなくて、同じページのヘッダーって意味ですよー。

記事の途中とかでクリックしたら、急に一番上まで戻されるというか。

 

エディターのスキンのスタイルを有効化してても、ほとんどエディタープレビューに反映されないのは不具合になのかなー?って感じただけです。

見出しとか段落とか引用とか、区別しにくいなーって。

 

文字がぼやけるのは文字の影をつけてる?ってのはある程度分かってたつもりだったんですけど、背景が同じ色じゃないところが特にぼやけて見えてるってことでしたー。

頑張ってくださいー。


, Yamachan11わいひら 件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@とびお さん、

ページの一番上ってのはトップページじゃなくて、同じページのヘッダーって意味ですよー。

記事の途中とかでクリックしたら、急に一番上まで戻されるというか。

失礼しました!

クリックイベントは特にいじっていないはずなんですが・・・

メニューというのは、ヘッダーにあるメニューの事ですよね?

 

エディターのスキンのスタイルを有効化してても、ほとんどエディタープレビューに反映されないのは不具合になのかなー?って感じただけです。

見出しとか段落とか引用とか、区別しにくいなーって。

そうですよね・・・

僕も、Cocoonのすべてを網羅しているわけではないんですが、ブロックエディタのプレビュー部分に関しては、おそらくですが、僕がファイル作ってないからだと思われます。

使いやすさでいうと必要な機能だと感じているので、いずれ対応します。

 

文字がぼやけるのは文字の影をつけてる?ってのはある程度分かってたつもりだったんですけど、背景が同じ色じゃないところが特にぼやけて見えてるってことでしたー。

こちらは、文字の影を打ち消すスタイルの適用漏れしているのかもしれません・・・

一応ボタン色などは自由に選べるように、背景色以外の部分は影の打消しをしたはずなんですが・・・

 

なんにせよ、率直な感想、助かります!


Yamachan11ヒロアキ 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

確かに他スキンとはかぶらないユニークなスキンになっていますね。
ちょっと僕もダウンロードして動作確認してみます。


Yamachan11 件のいいね!
Yamachan11
(@yamachan11)
Estimable Memberサイト
結合: 2年前
投稿: 248
Yamachan11 - FacebookYamachan11 - Twitter
 
投稿者:: @kita

(@kita) さん

要望です。

スマホで、ハンバーガーメニューを開いた時、

  • メニュー間に、仕切りを付けて戴きたい
  • 子メニュー(例では、カテゴリー1など)の背景色を1段下げて欲しい

 

添付、右端画像は、仕切り線と、背景色の濃淡イメージです。

 

This post was modified 6か月前 by Yamachan11

わいひら 件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん、ありがとうございます!至らぬ点が多々あると思いますが、よろしくお願いいたします!!

 

@yamachan11 さん、ご要望ありがとうございます!

確かにおっしゃる通りですね!

ちょっと別件で忙しいので、今日中にはとりかかれませんが、

近日中にやってみようと思います!


Yamachan11 件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@haruinoue さん、

投稿者:: @haruinoue

意図したものだったら申し訳ないですが、モバイル表示時のメニュー部分はもしかしたらスタイルの適用漏れかなと思いました。
リンクやボタンなどは全て影を付けているような感じがしたので…。


カスタマイザー画面でなく普通にサイトを開いた際、javascript.jsの41行目の

wp.customize( 'color_bg', function( value){

の部分で

Uncaught ReferenceError: wp is not defined

というエラーが出ています(Chromeの開発者ツールで確認)。

エラーが出ていても問題自体はなさそうですが、カスタマイザー画面かどうかの判定ができるのであれば、分岐して通常表示では設定関連の処理をしないようにした方がすっきりするのかなと思いました。

こちらのご指摘いただき、本当にありがとうございました。

jsファイルを切り分けてプレビュー画面のみで読み込むよう設定いたしました。

https://kitatarian.com/cocoon/

これでサイトの表側に出ていたエラーは解決できました。

ダウンロードファイルも更新しております。

ご指摘いただいた事、心より感謝いたします。

 

@yhira さん

せっかくダウンロードして確認していただけると言っていただけたのに、

早速変更してしまい、申し訳ございません。

このトピックでいただいたいくつかのご指摘を元に、

もう少しデザイン面での改善もしていこうと考えております。

 

改善できたと思えたらまたこちらから、ご報告させていただこうと考えております。

お忙しい所大変恐縮ではありますが、もし、現時点でマズイ点などございましたら、ご指摘をいただけると幸いです。

 


わいひら 件のいいね!
はる
(@haruinoue)
メンバーサイト Moderator
結合: 1年前
投稿: 785
 

エラーが解消されていることを確認しました👌


わいひら 件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@haruinoue さん、ありがとうございます!


はる 件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん、こんにちは!先日お話したスキンの修正が終わりました!

お忙しいとは思いますが、改めて、ご確認をお願いいたしますm(__)m

https://kitatarian.com/cocoon/download/

不具合、不都合がございましたら全力で修正いたします!

 

 

@とびお さん、もしかしたらもうこのトピックを見てないかもしれませんが、ご報告です。

SILKスキンのようなキーカラーへの対応は、チャレンジしてみたのですが、

このニューモフィズムというデザインの特性上、見出しの色などを変えるとどうしてもデザインの印象が崩れるため、断念させていただきました。

背景色にかかわる部分はスキン制御によって、ロックしていますが、文字色関係はロックしていませんので、使用者が好きな文字色を選ぶ事が可能なので、それでお許しいただきたいです_(._.)_

もう一つご指摘いただいたブロックエディタでのスキンスタイルはがっつり反映しました!

参考になるご意見をくださった事、感謝申し上げます。

 

@haruinoue さん、以前、エラーの件とは別にご指摘いただいていた、モバイル表示の際のボタンへのスタイル適応ですが、やはり考え直して、はるさんのおっしゃる通りにボタン系には立体スタイル適応させました!

参考になるご意見、本当に助かりました!

 

@yamachan11 さん、先日いただいたサブメニューの部分の色を一段階下げてほしいという、ご要望、僕なりに解釈して、達成してみました。

残念ながら、参考に見せてくださったサイトのように区切り線を入れる事はデザインの都合上かないませんでしたが、色を使用者が選んだ全体色よりも一段階下げる部分はクリアできたと思います。

ご要望にしっかり添えているかはわかりませんが、お時間のございます時にご覧いただければと思います。

ご要望、本当にありがとうございました!

 

 


Yamachan11 件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@とびお さん、すみません、上記で画像の添付できてなかったので、投稿管理画面のスクショ、こちらに添付しておきます。


Yamachan11
(@yamachan11)
Estimable Memberサイト
結合: 2年前
投稿: 248
Yamachan11 - FacebookYamachan11 - Twitter
 

@kita さん

こんばんは、

 

「ハンバーガーメニューの展開」を確認させていただきました。

素晴らしいと思います。

 

もう一つ要望しても宜しいでしょうか。

 

カテゴリの部分も同じようにできますでしょうか。?

 

私の場合、

3レベルまでカテゴリ階層がありますが、第二階層まで同じようにして頂ければと思います。

 


件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yamachan11 さん

ご覧いただきありがとうございます!

 

すみません、誤解させてしまったかもしれないんですが、

画像に添付してくださっているキタタリアンサイトの方はまだ、スキンを最新版にしていないんですm(_ _)m

 

サブディレクトリにあるデモサイトと、そのダウンロードページからのダウンロードファイルは最新にしているので、
スキンを適用して、メニューに設定していただければ、

メニューの子階層であれば1段階色が下がるようにしてあります!

 


Yamachan11 件のいいね!
Yamachan11
(@yamachan11)
Estimable Memberサイト
結合: 2年前
投稿: 248
Yamachan11 - FacebookYamachan11 - Twitter
 

@kita さん

了解しました。


件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

遅くなりましたが使用してみました。
テスト環境で試してみたところ、グローバルメニューのメニュー項目に説明文を入れていた場合、サブメニューがずれる不具合があるようです。


件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

あと1点、これは不具合ではないのですが、ソースコードにtext-shadowが入っていると、ちょっと読みづらくなってしまうので、pre内だけでもtext-shadowは無効にしておいた方が良いのかもしれません。


件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん!お試しいただきありがとうございます!

ご指摘の部分、明日早速修正に取りかかります!


北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん、こんにちは!お忙しいところ失礼します!

サブメニューがずれる不具合、とソースコードのtext-shadow問題、解消しました!

ソースコードの見本はこちらです。

https://kitatarian.com/cocoon/%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e8%a6%8b%e6%9c%ac/#toc8

 

一点、自分で気づいた懸念点なんですが、Cocoon設定の中で、CSSの縮小化をすると、背景色など、一部のスタイルが反映されないのです。

縮小化しないCSSファイルのパスにskin-neumorphismと入れた上での縮小化であれば、問題がないようには出来たんですが・・・

functions.phpでCSS変数を作って吐き出しているのが問題なのだとは思うんですが・・・(試しに普通にカラーコードで指定したら反映されました。)

 

かといって、CSSの縮小化機能をロックするのは、Cocoon使用者への迷惑になると思い・・・

このCSS縮小化問題が解決できない場合は、大人しく何色かパターンを作って、Cocoon使用者によるテーマ色自由化はあきらめた方が良いかもしれないとも考えています・・・

アドバイスいただけると嬉しいです_(._.)_

 

こちらダウンロードページです。

https://kitatarian.com/cocoon/download/

またお時間があるときに確認いただければ幸いです!

 


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

そういう場合、CSSの記述に不備がある場合(カッコが足りないとか)があるのですちょっと見た感じでは問題ないように見えました。

試しに、body部分に絞って、ソースコードの縮小化の影響を見てみましたが、:root部分はこちらで問題ないように見えます。多分。

#becfd9;--corner :15px}


件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

style.css部分はこんな感じで出力されています。

body,.header-container,.navi,.navi-in>ul li:hover>ul,.main,.sidebar,.sidebar h3,.footer,.article h1,.article h2,.article h3,.article h4,.article h5,.article h6,.blogcard-wrap,.pagination-next-link,.comment-btn,.search-edit,input[type=text],input[type=password],input[type=date],input[type=datetime],input[type=email],input[type=number],input[type=search],input[type=tel],input[type=time],input[type=url],input[type=submit],textarea,select,.nwa .box-menu,.tagcloud a,.cta-box,.fb_iframe_widget,.fb_iframe_widget iframe,.fb-like-balloon-body,.fb-like-balloon-button,.recent-comment-content,#wp-calendar th,.wp-block-table.is-style-stripes td,.wp-block-table.is-style-stripes th,.toggle-button,.pager-links a span,.appeal-content,.carousel-in,.mobile-menu-buttons,.mobile-menu-buttons .menu-content,.go-to-top-button,.share-menu-content .sns-buttons,#wp-calendar #today,#wp-calendar #today a,.navi-in a:hover,.a-wrap:hover,.list-more-button:hover,.pagination-next-link:hover,.comment-btn:hover,.nwa .box-menu:hover,.widget_recent_entries ul li a:hover,.widget_categories ul li a:hover,.widget_archive ul li a:hover,.widget_pages ul li a:hover,.widget_meta ul li a:hover,.widget_rss ul li a:hover,.widget_nav_menu ul li a:hover,.tagcloud a:hover,.recent-comment-content:hover,.toc a:hover,.search-form div.sbtn:hover,.pager-links a:hover span,.wp-block-search .wp-block-search__buttonhover,.comment-reply-link:hover,.pagination a:hover,.author-box .sns-follow-buttons a.follow-button:hover,.pager-links a:hover span,.search-form div.sbtn{background:var(--color-bg)}

詳しくは見ていないんですけど、なにかCSS文法的に問題あります?
どちらも、CSS縮小化した際に、デベロッパーツールで見ても反映されていないようなんですが何でだろう…。
ソースコード上にはあるのだけど。


件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん、ありがとうございますm(_ _)m

投稿者:: @yhira

詳しくは見ていないんですけど、なにかCSS文法的に問題あります?
どちらも、CSS縮小化した際に、デベロッパーツールで見ても反映されていないようなんですが何でだろう…。
ソースコード上にはあるのだけど。

問題があるのかもしれません・・・

 

ソースコード上には存在しているというのはヒントになりました!

明日、CSSの記述内容も踏まえて色々と試してみます・・・

 

何度もお手数をおかけしてすみません!

またご報告させていただきます!


わいひら 件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん!現状報告です!

CSS縮小化でfunctions.phpから吐き出したCSS変数が反映されない問題ですが、
原因は@keyframesでした!

@keyframesファイルをいったん削除してみたところ、
縮小化状態でもスタイルが反映されました!

 

詳細はまだ判明していませんが、おそらく、

https://wp-cocoon.com/community/bugs/css-%E3%81%AE%E7%B8%AE%E5%B0%8F%E5%8C%96%E3%81%A8-keyframes-%E3%81%AE%E4%BD%BF%E7%94%A8%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E6%B3%A8%E6%84%8F/

こちらが関係していそうです!

おそらく僕のkeyframesの書き方が悪かったのが原因です!

 

明日また検証してみます!

 


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

僕も、スキンの中のkeyframes.cssまでに思いは至らずチェックしていませんでした。
おそらく添付画像の部分ですね。カッコが足りないようです。

これだと確かに不具合が出る可能性があるかも。


件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

修正後CSSの縮小化を試してみると、背景が反映されました。


件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん、ご確認ありがとうございます!

phpについてさんざん調べまくった結果、自分のcss記述ミスでしたm(_ _)m

お手間取らせてすみません!!

 

しかしおかげさまで問題解決しました!

昨日提出したファイルは、メニュー部分で一部スタイル当てミスしてしまっているので、明日、キーフレームの部分も含めて、修正したものを提出させていただきます!


Yamachan11 件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん、こんにちは!「凸凹」スキンの修正ができました!

https://kitatarian.com/cocoon/download/

何度も申し訳ないですが、ご確認お願いいたします!

 


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

動作確認してみました。
グローバルメニューのサブメニューも、CSS高速化も正常動作していました。
修正ありがとうございます。

そしたら、次(v2.2.9)かその次のバージョンで同梱させていただければと思います。
スキン1つの掲載料1万円のAmazonギフト券は掲載スキンが公開された際に送付させていただければと思います。
ただ、現在いろいろと忙しく直ぐにできるかわかりませんのであらかじめご了承いただければ幸いです。

あと一応、当サイトで動作確認も出来るようにしておきました。
https://wp-cocoon.com/?theme-switch=skin-neumorphism
とりあえず、当サイトでテストした感じでも問題なさそうです。

あともし可能であれば、背景色のデフォルトを灰色よりも明るく映える色にしておくとより良いかもしれません。
スキンを変更したときの背景色が第一印象となるので。
もちろん、出来ればで良いのですが。


件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん!同梱していただけるとのこと、ありがとうございます!!

めちゃめちゃめちゃめちゃ嬉しいです!!

お忙しいとのこと、かしこまりました!
もちろん後回しにしてもらって大丈夫です!

スキンの第一印象であるデフォルト色の件、かしこまりました!

ちょうど悩んでいたので、そう言って下さり、助かります!

 

明日明後日が動けないので、月曜日あたりにまたご連絡させていただきます!

本当にありがとうございます!


mk2 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

あと、当サイトに適用して見つけた不具合でもないですけど、思ったことを書いておきます。
もしそういうデザイン意図なのであれば、そのままにしておいていただければと思います。

リンク色なんですが、ユーザビリティー的にリンクの色は変えたほうが、訪問者が「ここはリンクだ」と分かりやすく親切な表示になるかと思います。
アフィリエイトサイトなどもやっている自分としては、この状態だとかなりコンバージョン率が落ちそうに感じます。


件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

あともう1点。
画像にエフェクトがかかっていると思うのですが、そのエフェクトがアフィリエイトタグのインプレッションタグとかにもかかってしまいます。
なので、width="1" height="1"のimg画像には、エフェクトを無効にするCSSを書く必要があるかもしれません。


件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん、ご指摘、心より感謝申し上げます!

リンク色、デザインの特性上、出来るだけ色を少なくしなければという先入観に縛られておりましたm(_ _)m

明らかに分かりにくいですし、自分で見ても見ずらいので打開策を考えてみます。

 

アフィリリンクやアドセンスなどのテスト、完全に失念しておりました。

両方ともアカウントは持ってるので、月曜日にまとめて修正に取りかかりますm(_ _)m

 

お忙しい所、お時間割いていただきありがとうございました!


わいひら 件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん、こんにちは!

先日ご指摘いただいた、デフォルト色ですが、こちらの色にしようと思います!

https://kitatarian.com/cocoon/

(画像添付しておきます)

リンク色の方ですが、スキンからはスタイルを当てず、Cocoonのデフォルト色のままにしようと思います。

変えたい人はCocoon設定でリンク色変更できるわけですし、何より僕自身が一番リンクと感じる色は青なので。

 

アフィリエイトリンク関係の修正ですが、こちらはスタイルの当て直しを現在進行中です。

スタイルの当て方が雑だったと反省しております。

他にも、

https://wp-cocoon.com/?theme-switch=skin-neumorphism

こちらで動作確認できるようにしてくださったおかげで、いくつか見辛い部分を発見できたので、再度の見直しとスタイルの当て直しを進めています。

以上、報告でした_(._.)_


わいひらYamachan11 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

スクリーンショット見させていただきました。
第一印象がよさそうな爽やかな色になったと思います。

投稿者:: @kita

こちらで動作確認できるようにしてくださったおかげで、いくつか見辛い部分を発見できたので、再度の見直しとスタイルの当て直しを進めています。

承知いたしました。


件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

もし、作成途中のファイルでも添付ファイルにアップしていただければ、動作確認用に当サイトに適用させていただきます。


件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん、ありがとうございます!

投稿者:: @yhira

もし、作成途中のファイルでも添付ファイルにアップしていただければ、動作確認用に当サイトに適用させていただきます。

助かります!明日あたりお願いすることになりそうです!


北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん、こんにちは!北です!「凸凹」スキンの修正をいたしました!

お手すきの際にご確認と動作確認用にサイトへの適用をしていただければ幸いです!

zipファイル添付しておきます!

 


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

当サイトに適用しておきました。
https://wp-cocoon.com/?theme-switch=skin-neumorphism
該当箇所の修正も確認いたしました。


件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

問題なさそうと思ったら一つだけ、以前と違う状態を見つけました。
このページの上部にあるボックスメニューがこのようになっていました。
以前は、ボックス内の背景色は白色でしたが、このようなズレはなかったように思います。


件のいいね!
Yamachan11
(@yamachan11)
Estimable Memberサイト
結合: 2年前
投稿: 248
Yamachan11 - FacebookYamachan11 - Twitter
 

@kita さん

おせわさまです。

もし「わがままな部分で」お聞き入れいただけるなら、

サイドカラムの「カテゴリ部分」(添付)にも

レベルごと(3レベルまでの)に、なにかしらのメリハリが欲しいと思っています。

p.s. ファイヤーフォックスでも文字のカスレガなくなったことを、確認できました。
   ありがとうございます。

This post was modified 6か月前 by Yamachan11

件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん、お忙しいのに何回も何回もすみません・・・m(__)m

投稿者:: @yhira

問題なさそうと思ったら一つだけ、以前と違う状態を見つけました。
このページの上部にあるボックスメニューがこのようになっていました。
以前は、ボックス内の背景色は白色でしたが、このようなズレはなかったように思います。

おっしゃる通りご指摘の部分は今回スタイルを追加した部分です。

ボックスメニューのwidthnの%具合と追加したmarginがうまくかみ合ってなかったみたいです。

明日修正します!

毎日毎日お手間をかけて申し訳ございません!m(__)m


北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yamachan11 さん、ご要望ありがとうございます!

投稿者:: @yamachan11

レベルごと(3レベルまでの)に、なにかしらのメリハリが欲しいと思っています。

たしかにその方が見やすそうですね!

3レベルはチャレンジはしてみますが、まだわかりません。

以前ご指摘いただいたモバイルメニューのような2レベルはすでに実現可能なので、明日の修正と一緒に実装してみます!

投稿者:: @yamachan11

p.s. ファイヤーフォックスでも文字のカスレガなくなったことを、確認できました。
   ありがとうございます。

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

 


Yamachan11 件のいいね!
北
 
(@kita)
Trusted Member
結合: 7か月前
投稿: 40
Topic starter  

@yhira さん、すみません、

今見ていたんですが、ランキングアイテム内のインプレッションimgタグへの影響、消しきれてませんでした。

こちらも合わせて明日、場合によっては明後日になるかもしれませんが、修正して報告させていただきますm(__)m


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12854
わいひら - Facebookわいひら - Twitter
 

インプレッションタグは、結構邪魔になることが多いので、Cocoonでもimg[width="1"]といったようなCSSセレクタを利用してスタイルを当てています。

img[width="1"]{
  ...
}

インプレッションタグはほんと余計なことをすることがあるので 😥 


固定ページ 1 / 2
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

Cocoon
タイトルとURLをコピーしました