サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2019年1月26日 12:56
はじめまして。
cocoon設定からヘッダーロゴを設定するとサイトタイトルが消えてしまうので、どちらも表示させる方法を教えていただきたいです。
トップページへのリンクはサイトタイトルのみで、ロゴはリンクが無くて構いません。
よろしくお願いいたします。
トピックスターター 2019年1月26日 18:08
ヘッダーロゴにしたい画像を無理やり背景に設定して希望する形にはなりましたが、モバイルから見るとどうしても崩れてしまうので、正しい方法があれば教えていただきたいです。
よろしくお願いいたします。
2019年1月26日 22:18
ロゴ画像は、どういったものを使用するのでしょうか？
できれば、ヘッダー部分をキャプチャ撮影して、注釈を入れて完成形がイメージできるように画像をアップしていただけると助かります。
トピックスターター 2019年1月26日 23:09
ご返信ありがとうございます。
ヘッダーに入れたい画像はこちらです。
https://gyazo.com/3740327a40d98aa733fe6fd5f0143296
完成形のイメージはこちらです。
https://gyazo.com/4b43e5f9d50b9b8d12baa007726081e1
上からサイトのキャッチフレーズ、サイトタイトル、画像というようにしたいです。
よろしくお願いいたします。
2019年1月27日 20:53
CSSを使った方法が最も簡単かと思います。
まずは、普通にCocoon設定でロゴ画像を設定してください。
その後、子テーマのstyle.cssに以下のコードを貼り付けてください。
.site-name::before {
content: '婚活の悩みを解決！おすすめ電話占いサイト';
font-size: 24px;
margin-bottom: 10px;
color: #EE6666;
}
文字サイズや、色、余白、モバイル上での文字サイズは、自前で調節してください。
2019年1月27日 20:55
僕のテスト環境ではこんな感じになりました（※この方法は画像にもリンクされます）。
トピックスターター 2019年1月28日 09:18
ありがとうございます。
ヘッダーは希望していた形になりました。
ありがとうございました！
ただフッターのサイトタイトルが大きくなりすぎて崩れてしまったのですが、こちらはどのように直したらいいでしょうか？
2019年1月28日 10:09
冒頭をチェックすれば、フッターのサイトタイトルのことは記載がないようですので、ヘッダ―だけの記載にする指定方法としますね。
.site-name::before
上記を以下に変更すれば、ヘッダーのみとなるようです。ご確認ください。
.logo-header .site-name::before
わいひら reacted
2019年1月28日 22:58
かうたっくさん、ありがとうございます。
一応、清書しておきます。ついでに、モバイル用の記述も加えておきます。
.logo-header .site-name::before {
content: '婚活の悩みを解決！おすすめ電話占いサイト';
font-size: 24px;
margin-bottom: 10px;
color: #EE6666;
}
@media screen and (max-width: 768px){
.logo-header .site-name::before {
font-size: 18px;
}
}
トピックスターター 2019年1月29日 09:18
ありがとうございます。
教えていただいた方法でヘッダーだけ直すことができました。
モバイル用も教えていただき感謝です。
ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。