サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年9月6日 08:37
現在のCTAウイジェットは、メール用のボタンがありますが、もう一つ、電話番号のボタンも増やす事は難しいでしょうか？
ブログ用には電話番号の表示は一般的ではないと思うのですが、今後cocoonをコーポレートサイトなどに使う人が増えて来たら電話番号のCTAボタンも欲しい人が増えるとと思うのでご検討いただけたらと思いました。
今は実験サイトなので、電話番号を表示する画像を試しに入れているのですが、クリックして電話を発信するようにならないので、メールと同じくボタンが増やせたらと思った次第です。
Topic starter
2020年9月8日 07:21
本件、類似する相談を以下のURLで投稿しました。
もし、重複となる場合は、こちらは削除でも大丈夫ですので、ご判断は管理者様にてお願いいたします。
2020年9月8日 16:52
機能としては提供されていないので力技ですが、CTAウィジェットのメッセージ部分に以下のように書けばボタンが表示されます。
<div class="cta-button">
<a href="URL" class="btn btn-red btn-l">ボタンテキスト</a>
</div>
CTAウィジェット本来のボタンと合わせれば2つが表示できることになります。
わいひら reacted
Topic starter
2020年9月8日 16:59
はるさん、いつも有難うございます。
お陰様で大きく一歩前進です。
今、iPhoneしか使えない環境なので、iPhoneでの実験だけですが、バッチリ希望通りな感じでした。
明日にでも、パソコン画面での表示と合わせ確認しつつ作業を進めて見ます。
はる reacted
Topic starter
2020年9月8日 17:57
はるさんへ
今日はMac使えないと思ってましたが、少しだけ使う時間を取れて、少し試行錯誤をスタートしたところです。
新たに、これは可能なのだろうか？と思う事が出てきました。
パソコンでは
ボタン２個を左右に並べ表示する。
つまり、横2列、縦１行。
スマホなら
ボタン2個を縦2段に重ねて表示する。
つまり、横1列、縦２行、最初にボタンを増やす事を教えて頂いた形にする。
このようなデバイスによる出し分けも可能なのでしょうか？
はる reacted
2020年9月8日 19:03
以下のようにしたらいけました。
CTAボックスウィジェットのボタン機能は使わず、CTAメッセージの欄に以下のように入力します。
<div class="cta-button">
<a href="URL1" class="btn btn-red btn-l">ボタン1</a>
<a href="URL2" class="btn btn-red btn-l">ボタン2</a>
</div>
<style>
@media screen and (min-width: 834px) {
.cta-message .cta-button {
display:flex;
justify-content: center;
}
.cta-message .cta-button > a {
flex: 2 2 50%;
}
}
</style>
パソコン(834px以上の画面)で表示したときだけボタンを横並びにする、という内容です。
スマホの場合は元の設定のままでも2段で表示されるので何もしません。
btn-redのところはボタンの色で、btn-blueにすると青いボタンになります。
Cocoonのボタンブロックで使える色が使えます。
申し訳ないですがこれ以上細かい内容の回答は控えさせていただきます。
わいひら reacted
Topic starter
2020年9月8日 20:19
はるさんへ
調子に乗って厚かましい追加の質問をしてしまったと思います。
それにも関わらず、細かい説明まで付け加えての回答をありがとうございました。お陰様で希望したパソコンとスマホの出し分けは可能となりました。
ただ、二段に変化した状態での余白など調整は今後も必要な事がわかりました。
こうして、次から次へと課題が発生するのが標準から外れるカスタマイズの道なのですね。
思った以上に cocoonのコーポレートサイト化は険しい道のりだとわかり始めました。
それと、その瞬間に、もう一つ大事な事が理解できました。
こうしてカスタマイズを初めて、私はまだそのレベルに遠く達してない事が理解できました。
カスタマイズに対して教えていただいた事は、そのままなら実行できても、そこに新たな何か問題や改善したい点があると、自力ではどうしようも無い状況です。
もしかすると、ご回答いただいて、たまたまそのまま大丈夫で実用可能な結果が出ても、近い将来の将来のcocoonやWordPressのアップデートによって、影響が生じた場合に、私自身では対処しようが無い状況に陥る事は明白だと思いました。
コーポーレートサイトに必要な機能が予め備わっているテーマで無いテーマを使いたい場合は、自力でそのような部品（カスタマイズ）が出来ない状況では、将来的に自分も困るし、周囲の皆様にも迷惑をかけることになります。
テーマの乗り換えに対して、私はあまりにも無知で安易すぎたと知る事ができました。
今後も趣味のブログでは引き続きcocoonを利用させて頂きますが、それは cocoonの標準機能で使えるのですが、コーポレートサイトに関しては、今一度、元に戻そうと思いました。
はるさんや諸先輩方の多大なるご支援で、問題を解決しつつ進んで来れたので、それを無にするのか？とお叱りもありそうですが、お助け頂く課題は、これが全てではなく、この先もまだまだ課題山積になると思われます。
私自身がWordPressについて勉強精進するつもりであれば良いのですが、そう出来る若さも余力も無いので、一旦はコーポレートサイトへの導入は一旦、保留と言うか検討状態に戻そうと思います。
今回は cocoon導入が嬉しくて、先を急いで皆様にも沢山のお手間を取らせてしまったのですが、急いだからこそ決断の間違いも早々に知る事が出来て結果的には良かったと思っております。
趣味のブログでは今後ともよろしくお願いします。
そしてカスタマイズは終わりにしようと思います。
はる reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。