サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2019年5月16日 16:44
「プロフィール」ウィジェットについての質問です。
サイドバーに「プロフィール」ウィジェットを表示させていますが、肩書きラベルの文字のサイズと色を変え、プロフィール画像下の名前の下に表示させたいと思っています。
具体的には、次のCocoonユーザーの方のページの「サイドバーではこんな感じ↓」という画像のように、上から下に順番で「プロフィール画像 → 名前 → 肩書きラベル → 1行くらい間隔を空ける → プロフィール本文」という状態にしたいです。
https://web-ashibi.net/archives/2827
よろしくお願いします。
2019年5月16日 16:58
実際にどうしたいか、よく分からない。カスタマイズしたいURLを置いてください。
2019年5月16日 20:49
僕もどのようなカスタマイズにしたいのかがわかりませんでした。
ただ、サポート対象外のものにもあるように、時間のかかるようなカスタマイズはノーサポートとさせていただいています。
一つ一つ、オーダーメイドで要望を聞いて、カスタマイズをするようなことはできないのでご了承ください。
複雑なカスタマイズは、クラウドソーシング等を利用してプロの方にご依頼ください。
トピックスターター 2019年5月16日 21:20
わいひらさん
最初のリンクのCocoonユーザーの方のプロフィール画像と全く同じように、次のような感じをイメージしています。
なお、複雑なカスタマイズがサポート外なのは承知しています（前回教えていただきました）。style.css に貼り付けるだけで変更できる簡単なカスタマイズなのか、それとも複雑なカスタマイズなのかが全く見当がつかず、まずは質問してみるようにしています。
複雑なカスタマイズをお願いするつもりは全くありませんので、その場合はお気軽に却下ください。
2019年5月16日 21:51
申し訳ないですが、私はおりますね❦
トピックスターター 2019年5月16日 21:58
申し訳なくではなく、気軽に降りて大丈夫ですよ。
2019年5月16日 22:09
あ、ありがとうございます。
わいひらさんに、申し訳ない気もしたんですけど、気軽におります！
2019年5月16日 22:46
CSSだけでやるとしたら、添付画像のような順番まではできます。
けれど提示された画像通りの順番にするには、冒頭のリンクにあったようなPHPのカスタマイズが必要になると思います（もしくはJavaScript処理が必要になる）。
トピックスターター 2019年5月16日 23:14
わいひらさん
ありがとうございます。では添付いただいた画像の順番で大丈夫です。
肩書きラベルの文字のサイズと色も変更可能でしょうか？ また、名前／肩書きラベルとその下の本文の間に1行分くらいのスペースを入れる方法はありますでしょうか？
2019年5月17日 12:22
style.css に貼り付けるだけで変更できる簡単なカスタマイズなのか、それとも複雑なカスタマイズなのかが全く見当がつかず、まずは質問してみるようにしています。
最後に言っておこうと今決めたので、やっぱり書き込みますね。きっと回答サイドの気持ち：特に私が言ってもしかたないんだろけど。
無差別にご自身がやりたいカスタマイズを質問されたり、その内容がよくわからなかったり、回答した事が分からない、だから今度やって見ます。で放置。などされているんですね。今まで。
そのようなかたは滅多にいないので、返信して満足されたら良いんじゃないかと思い返信されるんだと思います。
けど、 ねいとさんが逆の立場で、そうされるとしんどくないですかね。逆の立場でもないから関係ない。と思われるかもしれませんが。
合間でやってる事なので、とりあえず今回はココだけお伝えっと。
トピックスターター 2019年5月17日 14:49
私も自分が詳しいソフトウェアについて他のフォーラムでいろいろな人に方法を教えていたことがありますが、マニュアルを見ても分からない人がいろいろ質問するのは当然ですし（それがフォーラムの目的ですので）、教えてあげた方法が相手にとって難しくてできなかったり、難しそうで今すぐにはできないと言われても不快に思ったことはありません（そのようなことで不快になる人を周りで見たこともありません）。
人にはそれぞれ事情があってできることとできないことがありますし、考え方も人それぞれです。ですので無理なお願いをするつもりはなく、できないことはできないと言っていただければそれで問題ありませんし、こちらも自分にできないものはそう回答するしかありません。
もし私の質問や返答の仕方が不快に思われる場合は、私の投稿はすべて無視するほうがいいと思います。私の方もわざわざそのような思いをさせてまで回答してほしいとは思っていませんし、せっかく教えていただいた方法が難しくて理解できなかったときにまた今回のようなご返事をいただくのは望んでいませんので。
2019年5月17日 19:00
マニュアルを見ても分からない人がいろいろ質問するのは当然です
マニュアルの件はそうですが、範疇を越えている人がいれば、声はかけると思います。今回はそれで声をかけました。
こういった事は滅多にない事であってほしいし、同じようなトピックが続くと対応が大変で困るので。
2019年5月17日 22:11
こんな感じで子テーマのstyle.cssに追記すれば順番は変えられると思います。
.author-box {
display: flex;
flex-direction: column;
}
.author-thumb {
order: -1;
}
色変更はこちら。
http://www.htmq.com/style/color.shtml
文字サイズの変更はこちらです。
http://www.htmq.com/style/font-size.shtml
変更対象のCSSセレクターは以下の方法で取得できるかと思います。
https://nelog.jp/how-to-use-developer-tools-for-wp-beginner
トピックスターター 2019年5月18日 12:21
わいひらさん
ありがとうございます。教えていただいた方法で順番を変更することができました。
3つめのリンクのCSSセレクターの取得方法についてのページですが、あのページはものすごく分かりやすく書かれています。あの内容を知っているかどうかで大違いというレベルですので、「テーマのカスタマイズ相談でフォーラムに書き込む際のお願い」のページにあのページへのリンクを貼り、まずは自分でCSSセレクターを探してカスタマイズを試み、それでも分からない場合に「カスタマイズ相談」のフォーラムに投稿するように案内するといいのではないかと思ってしまいました（自分が過去に立てたトピックのいくつかはあの方法を知っていれば自己解決できてご迷惑をお掛けすることもなかったと思います）。
なお、肩書きラベルの文字サイズと色の変更については、今のところ解決できていません。下の画面ショットのように肩書きラベルの箇所は特定できたのですが、element.style の下にある .nwa .author-box や .author-box に font-size を追加して変更すると、肩書きラベルだけでなくプロフィール本文の文字サイズも一緒に変わってしまう状況です。
これは恐らくサポート対象外の範囲だと思いますので、あとはもっと時間のあるときにもう少し勉強して再チャレンジしてみたいと思います。
なお、プロフィール名とプロフィール本文の間に1行程度のスペースを入れる方法については、あのCSSセレクター取得方法のページのやり方でセレクターを特定し、次のテキストを子テーマのstyle.cssに追記することで上余白を広げることができました（プロフィール本文の行間も狭く感じていたので併せて調節することができました）。
.author-box p {
margin-top: 1.4em;
line-height: 1.5;
}
わいひら reacted
トピックスターター 2019年5月18日 14:36
わいひらさん
ChromeやFirefoxで見ると次のように問題がないのですが、
Internet Explorer では次のようにプロフィール画像の下に大きなスペースが空いていることに気づきました。
原因が簡単に分かるようなものであれば教えていただけると助かりますが、そうでない場合はさすがにあのスペースは目立つと思いますので、順番を元に戻すしかないと考えています（順番を変えるテキストをstyle.cssから削除するとあのスペースはなくなります）。
2019年5月18日 16:07
こんにちは。
余白の件に関して、Googleで検索したら出てきました。
IEのバグで↓こちらが原因だと思います。
flex-directionを指定した時に IE11で表示がおかしくなる | WEB PIXY
上記ページを参考に.author-thumbにmin-heightを指定すれば直ると思います。
わいひら reacted
トピックスターター 2019年5月18日 17:09
草村さん
ありがとうございます。教えていただいたとおり .author-thumb内にmin-height: 0%;を追加したところ、見事にあのスペースを消すことができました。本当にありがとうございました。
2019年5月18日 20:30
肩書きラベル部分は、HTMLが書いてある部分のclassを見ればクラス名を取得できるかと思います。
こんな感じで書けばいけるかと思います。
.author-widget-name{
color: red;
font-size: 16px;
}
トピックスターター 2019年5月19日 09:59
わいひらさん
ありがとうございます。その方法で上手く調節することができました。
いろいろあってスレッドが少し長くなってしまいましたが、同じことがやりたい人には役に立つページになったと思います。
また、CSSセレクター取得方法のページのおかげで次に質問しようと考えていたカスタマイズを自分で行うことができました。
お忙しいところ本当にありがとうございました。
2019年5月19日 10:22
テーマ作成者がテーマ使用者のカスタマイズで
困った事を時間があれば助けられる範囲助けよう。が前提で
検索しても分からない事であろうって事。そして時間が許せばフォローできれば。って言う状況
※フォーラムは皆が意図せず、わいひらさん1人に質問してる状態。
- 複数の回答者がいて。というフォーラムもあるけど、ココは回答するのは1人
- フォーラムだから、何も悪気がなくカスタマイズ内容を決定してない状態での質問連発
- それ当たり前でしょ！フォーラムなんだから！というスタンス
という状況。
その対応は全部テーマ作成者さん1人に行くけど、
リスト内容のように思われる人も中には居てもおかしくない❦
私の感覚と違った見かたで、それ以外の見かたが見えたない人が居ても良いかも。
自分が役に立てば、それ以外は関係ない。役に立たなくてもそのカスタマイズが完成しなかったと思えば良いし。他のカスタマイズ指南さえ受けられたら良い。
だって、『フォーラム』というのは、そういう場所という認識だって事。
って事がわかり、そのような考えがあるんだと勉強になりました
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。