Cocoonフォーラム

サイト内検索
書き込みの前に以下の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. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

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

共有:
通知
すべてクリア

[解決済] スキン提供

27 投稿
3 ユーザー
1 Reactions
3,423 表示
veilnui
(@veilnui)
Trusted Member Registered
結合: 5年前
投稿: 60
トピックスターター  

夜中に失礼します。

毎日、少しずつ作っていたスキンが完成したので、お知らせです。
僕からの些細なクリスマスプレゼントです。間に合って良かった。

スキン名「Veilnui Simplog」

https://github.com/veilnui/Simplog/releases

公式サイトは現在、半分くらい工事中です。

https://simplog.veilnui.org/


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

スキン、ありがとうございます!
17種類も、しかもAMP対応!
もしよろしければ、Cocoonに同梱させていただいてよろしいでしょうか。
以下の「スキン同梱に関する注意点」に問題なければ、是非同梱させていただければと思います。
https://wp-cocoon.com/skin-make/
主なものとしては、ライセンスがGPLになるということ。それと、不具合があった場合は、こちらで手直しする場合もあるかもしれないということです。
サイトを見たところ、既にGPLとのことなので、主に後者のみとなります。

もしよろしければ、よろしくお願いいたします!


   
veilnui
(@veilnui)
Trusted Member Registered
結合: 5年前
投稿: 60
トピックスターター  

GNU GPLですから、同封、改変もOKです。

あとAMPに関してですが、僕は動作未確認です(近日、動作確認します)。

多分大丈夫だと思いますが、レイアウト崩れ起こるかもしれません。


   
veilnui
(@veilnui)
Trusted Member Registered
結合: 5年前
投稿: 60
トピックスターター  

Version 1.1を公開しました。

画像の追加とディレクトリの変更です。

画像は「imagesフォルダ」の中に入っています。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

GNU GPLですから、同封、改変もOKです。

GPLですから、確かにそうですよね^^;
つい、いつも同梱をお願いする際のルーティンになってしまいました。

あとAMPに関してですが、僕は動作未確認です(近日、動作確認します)。

これは、AMPページの出力CSSサイズが50000バイトにさえならなければ大丈夫と思います。
表示崩れは申請できますが、サイズが超えてしまうと、こればっかりは修正できないので。

画像の追加とディレクトリの変更です。

もしよろしければで良いのですが、現在「Veilnui Simplog amber」となっているディレクトリ名を「veilnui-simplog-amber」の形式に変更していただくことは可能でしょうか。
ここは他のスキンと統一させておきたくて。

画像は「imagesフォルダ」の中に入っています。

スクリーンショット、滅茶苦茶助かります!
プレビューヒント表示に必要になるので。

そしたら、Cocoon2.0.5もしくは、2.0.6あたりを予定に、同梱させていただこうと思います。
同梱テーマを公開した際には、新作スキン:1万円×1、色違い:3000円×4(色違いは4つまで)で、22000円分のAmazonギフト券をフォーラムに登録されているメールアドレス宛に送付させていただいてよろしいでしょうか。
https://wp-cocoon.com/skin-make/
Amazonギフト券は、これまでスキンを同梱させていただいた、みなさんに同梱のお礼としてお送りさせていただいています。


   
veilnui
(@veilnui)
Trusted Member Registered
結合: 5年前
投稿: 60
トピックスターター  

リクエスト通り、フォルダー名を変更しました。
他のプロジェクト見てても、小文字とハイフンで統一することが習慣のようですね。
その変更リリースが「Version 1.1.1」です。

Amazonギフト券は嬉しいです。
大事にいらない物を買うのに使わせて頂きます。

Veilnui Simplogも不定期で更新します。
自分もGitHubユーザーのため、更新の度にプルリクエストを送ると思います。

これは余談ですが、現時点で2つスキンのアイデアがあります。
いつ完成するか分かりませんが、期待していてください。
とは言いつつ、既に1つはリポジトリに草案が上がっているので、そう遠くはないと思います。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

ありがとうございます!
早速、親テーマにも組み込んで、動作確認をしてみようと思います。

予定としては、Cocoon2.0.5もしくは、2.0.6あたりで実装しようと思います(正月以降になると思います)。
同梱テーマを公開した後で、Amazonギフト券を登録メール宛に送らせていただきますね。

自分もGitHubユーザーのため、更新の度にプルリクエストを送ると思います。

プルリクエストだと滅茶苦茶ありがたいです!
それだと、なにかこちら側で変更するときも、すごくやりやすいです。
また公開まで、変更した部分があれば、こちらでも書き込みます。

これは余談ですが、現時点で2つスキンのアイデアがあります。
いつ完成するか分かりませんが、期待していてください。

めちゃくちゃ期待してます!!
草案も後でローカルで、こっそり見させていただこうと思います ? 
めっちゃ楽しみ。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

開発版にはスキンを同梱させていただきました。
それに際して、以下の点を変更させていただきました。

  1. _base.scssのをSCSS共通フォルダに入れ名前を変更
  2. グローバルナビメニューのホバー時のCSSセレクタ変更
  3. 表示するスキンを10種類まで限定

https://github.com/yhira/cocoon/tree/master/skins


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

_base.scssのをSCSS共通フォルダに入れ名前を変更

https://github.com/veilnui/Simplog/blob/9ef44ee1bb856b388f0987498aa897d1b2aba5e7/_base.scss#L1
こちらにあった_base.scssは今後、Cocoonのskinsフォルダ直下に入れていると、名前が重複してしまう恐れがあるので、以下のような構成にしました。
https://github.com/yhira/cocoon/blob/c829dc3e3a40867f16f20280261b38bb07f4558c/skins/_scss/_veilnui_simplog_base.scss#L1
style.scssで呼び出すパスが以下のようになりました。
https://github.com/yhira/cocoon/blob/c829dc3e3a40867f16f20280261b38bb07f4558c/skins/veilnui-simplog-amber/style.scss#L34

今後、共通SCSSファイルが増える可能性があるので、_scssディレクトリに、スキン名前、を付けて追加していこうと思います。
https://github.com/yhira/cocoon/tree/master/skins/_scss


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

グローバルナビメニューのホバー時のCSSセレクタ変更

グローバルメニューのホバーアニメーションが、ラベルに対してなっていたので、aリンクに対して行うように変更しておきました(サブキャプションがある場合に表示不具合が出てしまうので)。
https://github.com/yhira/cocoon/commit/3f6958ca42f0dc9ae2439768cf0f4770772ecbf5#diff-517fc02ece5d1a42c6f5b5a312e48230R138
サブキャプションがある場合、以下のようになるのを

以下のように変更しておきました。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

表示するスキンを10種類まで限定

同梱する際の、掲載スキンは、17種類だと(管理画面スペースの都合上)ちょっと多いので、10種類までにさせていただきました。
スキンは同梱されていますが、style.scss以下のように書いて非表示にしているだけです。
https://github.com/yhira/cocoon/blob/c829dc3e3a40867f16f20280261b38bb07f4558c/skins/veilnui-simplog-lime/style.scss#L13


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

あと、いまv1.1.4が出ていることに気づいたので、現在はv1.1.1ベースの修正になっています。
後で、コミット履歴を見て、対応させておこうと思います。
https://github.com/veilnui/Simplog/releases


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

Cocoon開発版に同梱したものにも、以下の1.1.4の変更を適用しておきました。
https://github.com/veilnui/Simplog/commit/9ef44ee1bb856b388f0987498aa897d1b2aba5e7
変更点。
https://github.com/yhira/cocoon/commit/9d345a8bdb0394b29cb5b8c7e92ed7802a1c59c5


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

当サイトの右サイドバーにある「スキン動作デモ」でも、Veilnui Simplogスキンの動作を確認できるようにしておきました。


   
veilnui
(@veilnui)
Trusted Member Registered
結合: 5年前
投稿: 60
トピックスターター  

指摘ありがとうございます。
自分のリポジトリにも適用しました。

  1. ヘッダーメニューの下線とアニメーション
  2. フッターメニューの文字色と背景色
  3. 目次の開閉ボタンで下線非表示(独自)
  4. Go Top Buttonの修正

これで大丈夫だと思います。
もうバグが出なければいいな。

https://github.com/veilnui/Simplog/releases/tag/1.1.6


   
veilnui
(@veilnui)
Trusted Member Registered
結合: 5年前
投稿: 60
トピックスターター  

GitHubでVersion 1.1.6 を反映したプルリクエストを送りました。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

プルリクエストありがとうございます!
すごく助かります。

動作確認してみたところ、特に修正部分に問題はないように見えました。
あと1点、モバイルヘッダーボタンとモバイルフッターボタンの色がバラバラだったので、統一させてみました。
https://github.com/yhira/cocoon/commit/75f2158badc911d58168171f51c6c69fb7fa4289#diff-517fc02ece5d1a42c6f5b5a312e48230R1137

ただ、添付画像のような表示は狙ったものでしょうか。
もしそうだとしたら、元に戻しておきます。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

ちなみに修正後は、こんな感じになります。
※ロゴ画像は白背景用に作ってあるので、濃い色の背景には合わせてありません。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

あと、これまでスキンのstyle.cssにVisibility: falseを利用して、スキンを17個から10個に表示にしていました。
ただ、これだと子テーマで表示を制御できないので、スキンをCocoon設定に表示する制御フックを追加しておきました。
https://github.com/yhira/cocoon/commit/e648abb5563256aebe71a6e6833eb21877d80a19

これで、子テーマのfunctions.phpに以下のように記入すれば、全部スキンを表示したい場合は、全て表示できるようになります。

//Cocoon設定「スキン」画面から除外するスキンを設定
add_filter('get_exclude_skins', function ($skins){
  $skins = array();
  return $skins;
}); 

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

一応、案内記事も書いたので、貼り付けておきます。
まだ、ファイルは正式版として公開していないので、記事も公開できず、画像で申し訳ないですが、仕様は添付画像記事のような感じです。

これで全種類を利用したい場合は、子テーマのカスタマイズで全種類を表示出来るようになります(需要があれば全種類表示機能も付けようと思っています)。


   
veilnui
(@veilnui)
Trusted Member Registered
結合: 5年前
投稿: 60
トピックスターター  

意図するもしないも、その機能自体に全く気付いていませんでした。
でも、そのタイプのスタイルは良いですね。

自分のリポジトリにも反映&リリースしておきます。
Cocoonのスキン(1.1.6)と自分のリポジトリ(1.1.7)で、バージョンが異なりますが、内容は同じになります。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

色変更のデザインが同じスキンについてですけど

何かしらの該当箇所へのフックで対応してもらうなどは厳しいですかね???

 

スキン提供者さん用にフック方法を提供して使用してもらえば、解説もらくになるし。ユーザーの好みによる微妙な色変更も簡単になるかとおもうんですけど

 

今回も色変更だけで17種類であれば、今後もっとユーザーさんの希望に沿いたい人は30種類50種類と出てきそうな気がしたんで

何か対応策があれば。とおもったり。チェックするのも助かりますし、ユーザーさんもphp拒否症でなければカンタンに一括返還もかのうかなぁって思ったりしまたでです。

ふと思っただけでばく、それまでにも
何気におもってただけなんですけどね。

 

スキン提供・それにともなうチェックなど、皆様お疲れ様でございます!


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 
投稿者:: @veilnui

Cocoonのスキン(1.1.6)と自分のリポジトリ(1.1.7)で、バージョンが異なりますが、内容は同じになります。

こちらもバージョンを1.1.7に変更しておきます。

投稿者:: @kautakku

色変更のデザインが同じスキンについてですけど

何かしらの該当箇所へのフックで対応してもらうなどは厳しいですかね???

申し訳ないですが、書いてあることの意味がちょっとわからなかったです ? 


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

なるほど。

ってかphpじゃ実装が面倒くさそうなのとかイロイロ考えたら、そのままが良いカモですね。

 

もし色違いのスキンがあれば良いな。って言う一般ユーザーさんがいれば
スキンのstyle.cssメインの例えばブルーを一括置換。
サブメインの例えば淡いブルーを一括置換。

それで色変更を行える。

って話だったり

スキン作成者さんがユーザーのことを思って色違いスキンをたくさん作るより、好きな色を適応しやすいとかもあるなっと。

 

ただ
そもそも一括置換を行えるようにstyleを作ってるかどうか。などあるので、そっとしておくのが良いカモ。

なかったことにしていただければ。

 

 

スキンがたくさんあるのは助かりますよね!
ユーザーさんにもどのスキンを適応するか確認するのは大変ですけど、デザインだけでなく、シンプルに色味をチェックする人もいると思うので^^

この投稿は5年前ずつかうたっくに変更されました

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 
投稿者:: @kautakku

もし色違いのスキンがあれば良いな。って言う一般ユーザーさんがいれば
スキンのstyle.cssメインの例えばブルーを一括置換。
サブメインの例えば淡いブルーを一括置換。

それで色変更を行える。

って話だったり

スキン作成者さんがユーザーのことを思って色違いスキンをたくさん作るより、好きな色を適応しやすいとかもあるなっと。

なるほど。意味がわかりました。
そのようにできると一番いいんですよね。
ただ、スキン作者さんによって色を適用する部分は違うので、そこらへんを柔軟に判断して適用するようなものを書くのは、僕の実力ではかなり難しいように思います。

ほんと、スキンは本当にありがたいです。
人それぞれ好みがあるので、いろいろな人にいろいろな選択肢を手軽に提供できるので、作者様には本当に感謝です。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

>veilnuiさん

Cocoon2.0.5にVeilnui Simplogを同梱させていただいたので、フォーラムに登録されていたメールアドレス宛にAmazonギフト券を送付させていただきました。
ご確認いただければ幸いです。
同梱させていただき、ありがとうございます。


   
veilnui
(@veilnui)
Trusted Member Registered
結合: 5年前
投稿: 60
トピックスターター  

Amazonギフト券ありがとうございます。


   
共有:

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

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

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

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

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

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

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

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