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カスタマイズ依頼

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

Cocoon設定のスキンの種類を追加し...
 
共有:
通知
すべてクリア

[解決済] Cocoon設定のスキンの種類を追加して欲しい

12 投稿
2 ユーザー
6 Reactions
94 表示
(@kurora)
Eminent Member Registered
結合: 1年前
投稿: 34
トピックスターター  

お世話になっております。

 

Cocoon設定のスキンの追加についてのご要望です。

どのスキンを使用するのかは人により好みが別れるところではありますが、私の場合は、

・Natural(ブルー) [作者: Taka]

・Natural(グリーン) [作者: Taka]

 

このどちらかを使って、このスキンを基にデザインをカスタマイズしてサイトレイアウトを作っています。

と言いますのも、このスキンは元のデザインが大変シンプルで色合いも良く、カスタマイズしやすいためです。

かと言ってスキンを使わずにゼロからカスタマイズするのは大変手間暇掛かります。そのためこのシンプルで色合いの良いスキンを使っています。

 

ご要望としましては、Natural [作者: Taka] でブルーとグリーン以外にも10種類ほど色々な色のものを追加して頂けると大変ありがたいです。

10種類以上でも可能であれば大歓迎です。

 

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

このトピックは1日前からkuroraに変更されました

   
引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3201
 

投稿者:: @kurora

10種類以上でも可能であれば大歓迎です。

配色は個人の好みによる点が大きいです。
このため色の変更については、CSSを記述する、Cocoon設定でヘッダー、フッターで色を設定など、一般的に各自で対応することだと思います。

また、単に色違いでスキンを増やすのは、管理する上でも大変になります。

最近のスキンのように、スキン独自メニューでカラーパレットから色選択できるものもあります。
そちらを利用するのも、ひとつの方法かと思います。


   
わいひら reacted
返信引用
(@kurora)
Eminent Member Registered
結合: 1年前
投稿: 34
トピックスターター  

そうなんですね。

 

以下の画像は Natural(ブルー) [作者: Taka] のスキンを使用してカスタマイズしていますが、赤矢印で示した検索窓とプロフィールの青枠の色を変えるCSSコードがどうしても分かりません。教えて頂けますでしょうか?

 

この投稿は1日前ずつkuroraに変更されました

   
返信引用
(@kurora)
Eminent Member Registered
結合: 1年前
投稿: 34
トピックスターター  

こちらのカテゴリーの表示も色変更のCSSコードが分からないので一緒にご教示よろしくお願いいたします。

この投稿は1日前ずつkuroraに変更されました

   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3201
 

投稿者:: @kurora

CSSコードがどうしても分かりません。教えて頂けますでしょうか?

まず、カスタマイズするならChromeに備わっているデベロッパーツールの使い方を理解してください。
使えれば簡単に、各要素のCSSクラスを調べることができます。

その上で、CSSプロパティを調べるよう心掛けてください。

 

皆さん勘違いしていますが、CSSコードそのもの(答え)をネットで調べるのは愚の骨頂です。
今後、カスタマイズしていくなら、勉強して基礎を身に付けるか、できない方のために業者おり、有償で依頼するかの二択しかありません。

 

以下が現在の色です。

/* 入力フォームの枠 */
.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],
textarea,
select {
  border: 2px solid #F44336;
}

/* プロフィール枠 */
.author-box {
  border: 1px solid #73c3fb;
}

/* クラウドタグ */
.cat-link {
  background-color: #fbab73;
}

   
わいひら reacted
返信引用
(@kurora)
Eminent Member Registered
結合: 1年前
投稿: 34
トピックスターター  

教えて頂きありがとうございます。

 

プロフィール枠色と画面下のカテゴリーの色は変わりました。

検索窓の枠色が変わらないのですが、どうしたらよろしいでしょうか?


   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3201
 

投稿者:: @kurora

検索窓の枠色が変わらないのですが、どうしたらよろしいでしょうか?

フォーラムのマナーとして環境情報の提示願います。
実際のURLを見ないと分かりません。
その際、CSS縮小化の解除願います。


   
わいひら reacted
返信引用
(@kurora)
Eminent Member Registered
結合: 1年前
投稿: 34
トピックスターター  

Cocoon環境に関する情報です。

 

----------------------------------------------
サイト名:クロラアニメナビ
サイトURL: https://www.kurora-anime.com 
ホームURL: https://www.kurora-anime.com 
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/natural-blue/style.css
WordPressバージョン:6.7.1
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br, zstd
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.8.3.3
カテゴリー数:1
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:845 バイト
functions.phpサイズ:203 バイト
----------------------------------------------
Gutenberg:1
Font Awesome:5
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2024/10/女神フレイとヴァルキリー(Canva透明度80).png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:1
Lazy Load:1
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.6.1
Advanced Editor Tools 5.9.2
Broken Link Checker 2.4.2
Classic Editor 1.6.7
Code Snippets 3.6.6.1
ConoHa WING コントロールパネルプラグイン 1.2
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 6.0.2
Edit Author Slug 1.9.1
Imagify 2.2.4
Modern Image Formats 2.4.0
Search Regex 3.1.2
UpdraftPlus - Backup/Restore 1.24.12
WP Multibyte Patch 2.9
WP Revisions Control 1.4.3
XML Sitemap Generator for Google 4.1.21
----------------------------------------------

   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3201
 

提示したCSSで変更されます。
提示頂いたページはCSSを追加した結果でしょうか?


   
わいひら reacted
返信引用
(@kurora)
Eminent Member Registered
結合: 1年前
投稿: 34
トピックスターター  

検索窓の枠色今見ると変わってました。現在は水色にしています。

 

自分でもデベロッパーツールで検索窓の枠色コードの箇所を開いてみました。

今後もデベロッパーツールからCSSコードを探してカスタマイズしていこうと思います。

 

ご教示頂きありがとうございました。

この投稿は22時間前 2回ずつkuroraに変更されました

   
わいひら reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3201
 

入力フォームにフォーカスすると黒枠になるのがイヤなら、入力フォームの枠のCSSに、outline: none;を追加してください。
フォーカスしても枠の色は変わらなくなります。


   
わいひら reacted
返信引用
(@kurora)
Eminent Member Registered
結合: 1年前
投稿: 34
トピックスターター  

了解しました。

CSSの使い方について、大変勉強になりました。

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


   
返信引用
共有:

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

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

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

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

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

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

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

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