特典機能について

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

サイト内検索
運営者(わいひら)は、10月25日から骨の手術のため数週間入院します。その際、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては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スキン「凸凹」を作成しました!

固定ページ 2 / 2

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

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

勉強になります!

ちょうど明日調べようと思っていた内容をドンピシャでいただいてしまいました(笑)

今日は別件に圧迫されてボックスメニュー部分の解決しかできず、さらに今度は凸凹スキンのレスポンシブの表示崩れを発見してしまい、時間切れになってしまいました(笑)

CSS、奥が深いですm(_ _)m

COCOONに迷惑をかけないスキンになるまであと少しなはずなので、頑張ります!

 

たくさんお手間かけてしまってますが、もうしばらくお付き合いいただけるとありがたいです!


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

@kita さん

 

お世話様です。

自分のLocal(Local by Flywheel)環境にCocoonを入れ、

スキン凸凹をセットしてみたのですが、

Cocoon設定の各タブでの「スキン制御」の「色の選択」が設定ができません。

 

 

何か他の原因でしたら、申し訳ないのですが、気になってしまいましたので、

確認させてください。

 

スキン凸凹の格納位置(Local環境:Local by Flywheel)は、

C:\Users\j1nak\Local Sites\work\app\public\wp-content\themes\cocoon-master\skins\skin-neumorphism

 

Cocoon設定の各タブでの「スキン制御」の設定ができません。

 

「全体」タブ設定の「スキン制御」部

  • キーカラー
       
      ※「スキン制御」ではない、サイトキーテストカラー部分は、「色の選択」ができます。

 

  • サイト背景色
  • サイト背景画像

「ヘッダー」タブ設定の「スキン制御」部

  • ヘッダー全体色
  • ヘッダー色(ロゴ部)
  • グローバルナビメニュー色

「カラム」タブ設定の「スキン制御」部

  • コンテンツ枠線色
  • サイドバー枠線色

「アピールエリア」タブ設定の「スキン制御」部

  • エリア背景色

「フッター」タブ設定の「スキン制御」部

  • フッター色

 


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

@yamachan11 さん、こんにちは!

すみません・・・おっしゃっている意味がちゃんと理解できていないんですが、

サイトの全体色は外観⇒カスタマイズ内にて設定するようにしているため、Cocoon設定内での背景色にかかわる部分全般はskins/skin-neumorphism/functions.phpからロックさせてもらっています。

スキン SILKのようにキーカラーを思うままに設定はできません。

そこを解放してしまうと、印象がボロボロにくずれてしまうので・・・

 

と、そういう意味ではないかもしれませんが、一応スキン制御部分のコードの写真、貼っておきますm(__)m

 


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

@kita さん

なるほど。そういうことだったんですね。

納得しました。

最初の投稿時のデモ(.gif画像で色を変更している)が、あったもので、勘違いしていました。

 

This post was modified 6か月前 by Yamachan11

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

@yamachan11 さん、

僕の書き方が悪かったかもしれませんm(__)m

申し訳ございませんm(__)m

 

もしキーカラーにも対応した凸凹スキンをつくるとなると、「凸凹2」として、がっつりパーツデザインを作り直すような形になると思うので、しばらくは厳しいと思われます。

 

先日おっしゃっていた色レベルの部分は、現在進行中です。

ご要望いただいた通り、3レベルあったほうがより見やすいと思うので、phpで作り出す色レベルを追加する方向で進めております。


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

@kita さん

いえいえとんでもございません。

 

楽しみにしております。


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

@yhira さん、こんにちは!スキン「凸凹」の修正作業が終わりました!

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

またお手すきの際にご確認いただければ幸いです!

 

【スキンに対して行った変更】

・アフィリエイトリンクのインプレッションimgタグのスタイル修正
・ボックスメニューのレイアウト修正
・functions.phpから作り出す色レベル2つ追加
・目次、モバイルメニュー、カテゴリーで子要素になるごとに色が薄くなるように修正(3レベルまで)
・テーブルブロックのスタイル修正
・ブログカードラベルと、バッジ部分の文字影削除
・インデックスと関連記事設定の各カラム幅ごとのサイズと余白調整
・画像ブロックでメインカラム幅より小さいサイズの表示不具合修正
・active要素の追加
・インデックスのタブ一覧の切り替えボタンに対するスタイル当て

 

長々とお手間をかけてしまい、申し訳なく思っておりますが、なにとぞよろしくお願いいたします!


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

@yamachan11 さん、先日ご要望いただいていた、

投稿者:: @yamachan11

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

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

こちらの色レベルですが、実装しておきました。

確認が面倒かと思い、こちらのほうで見本を用意しておりますので、お手すきの際にご確認いただければと思います!

https://tesutoyou.com/sample-page/


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

@kita さん

ありがとうございます。

サンプルを見させて戴いた時点で充分かと思います。

 

併せて、

Local環境にダウンロードして、適用して

記事や、他の部分でも確認してみたいと思います。

 


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

当サイトにも適用してみました。僕は報告したところは、改善されていることを確認しました。
https://wp-cocoon.com/?theme-switch=skin-neumorphism


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

一点、気になる部分を書くとしたら、カテゴリーの記事数を表示したときに、左右の余白が違うことくらいでしょうか。
細かな部分ですいません。


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

@yhira さん、すみません!

ウィジェットの細かい設定、全部見直しますm(_ _)m


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

@kita さん

お世話様です。

テスト環境で旨くいったので、本番環境でも試して、
北さんにも見ていただこうと思い、
各部分をキャプチャしてみました。

01.カテゴリ選択で、カテゴリのアイキャッチとSNSボタン、および記事カード
02.記事カードと、カテゴリの3レベルの階層表示・記事数
03.記事本文のアイキャッチと文書の一部と引用表示など
04.記事の目次
05.記事の画像01
06.記事の画像02(タイトル入れ)および<h3>見出し
07.記事の画像03、キャプション表示、および<h4>見出し
08.記事内テーブル表示(「本文」テーブル設定:☑横幅の広いテーブルは横スクロール)、カテゴリとタグ表示

全て問題ないと思います。

 ・カテゴリは、4レベルまで作って戴いたんですネ。

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


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

@kita さん

お世話様です。

09.YouTube動画 埋め込み

10.タグもアドセンスも

OK です。

 

This post was modified 6か月前 by Yamachan11

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

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

自分で確認すると、どうしても見落としてしまう部分が出てくるので、かなりありがたいです!


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

@kita さん

iPhone8+でも

無事に確認できました。

01.Top
02.カテゴリ

03.ブログカード です。

 


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

@yamachan11 さん、レスポンシブのほうまで確認ありがとうございます!

助かります!m(__)m


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

@yhira さん、こんにちは!凸凹スキンでご指摘いただいた部分とその他いくつか修正をいたしました!

【スキンに対して行った変更】

変更したファイルskin-neumorphism/style.css

・カテゴリーウィジェットの投稿数部分の余白調整
・メインカラム内でのボックスメニュー余白調整
・ヘッダーモバイルメニューの余白調整
・モバイル表示の際のキャッチフレーズの余白調整
・SNSシェアボタンの幅修正

お手すきの際にご確認、よろしくお願いいたします!m(__)m


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

@yhira さん、すみません!

上記の件で一か所修正しましたm(__)m

cssファイルはこちらです!


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

@kita さん

お世話様です。

 

新しい方を、反映してみたのですが、

特に違いは見受けられなかったです。

 

どこか、確認する観点(コードとかじゃなくて、見た目の部分で)を

教えて戴ければ、該当箇所を表示してキャプチャしますが・・・

 

 


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

当サイトに適用してみました。
先日報告した部分は、修正されていました。ありがとうございます。
もう数日、この状態でサイトを眺めてみようと思います。


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

@yhira さん

@kita さん 

 

ここでしたか。  キャプチャが雑ですみません。

左:スマホ、右:パソコンです。

大丈夫そうです。 4レベル表示まで。

 

This post was modified 6か月前 2回 by Yamachan11

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

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

よろしくお願いいたしますm(_ _)m


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

@yamachan11 さん、分かりにくくてすみません!m(_ _)m

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


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

@yhira さん、こんにちは!

凸凹スキンのSNSシェアの部分でトップシェアボタンのレスポンシブ部分で表示崩れしてたので修正しましたm(__)m

お手すきの際に添付のCSSファイルに差し替えをお願いいたします_(._.)_


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

手元のファイルと当サイトのスタイルををアップデートしておきました。
ここ2、3日、僕が当サイトを見た限りでは、不具合等は見つからなかったので、時間がありましたら近日中にテーマのアップデートも出来ればと思います。


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

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

楽しみにお待ちしております!!


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

ゴールデンウィーク中は、省エネモードなのでゴールデンウィークが終わったあとになると思います。
よろしくお願いいたします。


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

@yhira さん、もちろんです!

どうかゆっくりされてください!

教えてくださってありがとうございます!m(_ _)m


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

スキンを同梱さしていただきました。
メールアドレス宛にAmazonギフト券も送付させていただきました。

本来以下のページには、スキンのデザインが割り当てられるようにコードを書いたのですが
https://wp-cocoon.com/2-2-9/
https://wp-cocoon.com/skin-neumorphism/
どういうわけか、うまくスタイルが全て反映されなかったので、Cocoonデフォルトに戻しました。


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

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

たくさんお手間をかけてしまいすみませんでした!

作成中、修正中、とても楽しかったです!

なんとお礼を言ったら伝わるか分かりませんが、本当にありがとうございました!


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

こちらこそ、スキンを作成していただきありがとうございます!


件のいいね!
固定ページ 2 / 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をコピーしました