サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
22/05/2022 5:25 pm
ご担当者様
お世話になっております。 現在、cocoonを使用して、ブログサイトを作成中です。
ヘッダーの左側または、右側にソーシャルアイコン（フェイスブック、インスタブラム等）を追加したいと考えています。 CSSに関しては初心者で色々サイトで検索してもヒットしない状況ですので、こちらで質問させていただいています。
例えば、CSSでは下記のような記述になるのでしょうか？
#navi .navi-in > .menu-header {
.icon {
display: inline-block;
width: 30px;
height: 30px;
background: url(../images/icon.png) no-repeat;
}
}
お忙しいところ恐縮ですが、何卒宜しくお願い致します。
22/05/2022 7:32 pm
以下で間違いないか確認したく。
●要件
ヘッダーに表示される「サイトのタイトル」右or左に、任意の画像(SNSロゴ)を表示させたい。
例として、サイトのタイトル「blog top」の右にSNS画像を表示させる。
●設定条件
[Cocoon設定]→[ヘッダー]
→ヘッダーレイアウト「トップメニュ小(右寄せ)」
→ヘッダーロゴは未設定
[外観]
→[カスタマイズ]→[サイト基本情報]→サイトのタイトル
→[メニュー]→メニュー設定「ヘッダーメニュー」のみ
わいひら reacted
Topic starter
22/05/2022 7:51 pm
Chu-ya様
早速のご返信ありがとうございます。 要件については、今、左のある「blog top」を消して、その部分に、ソーシャルアイコンを挿入したいと考えています。
添付ファイルを参照下さい。
●設定条件
[Cocoon設定]→[ヘッダー]
→ヘッダーレイアウト「トップメニュ小(右寄せ)」
→ヘッダーロゴは未設定はい、設定条件については、上記のとおりです。
[外観]
→[カスタマイズ]→[サイト基本情報]→サイトのタイトルサイトのタイトルは削除しました。 今はトップページには出ていません。
→[メニュー]→メニュー設定「ヘッダーメニュー」のみ
はい、その通りです。
以上、よろしくお願いいたします。
22/05/2022 8:26 pm
単にSNS画像をグローバルメニューの横に貼り付けるなら以下と変わらず。
●手順
[Cocoon設定]→[ヘッダー]
→ヘッダーロゴ
→ヘッダーロゴサイズ
ヘッダーロゴとしてSNS画像を貼り付ける。
わいひら reacted
Topic starter
22/05/2022 8:45 pm
chu-ya様
早速試したのですが、ロゴ選択が１つしかできず、複数選べない状況です。
今の状況ですと、1アイコンのみの選択です。 何か他に方法はあるのでしょうか？
すみません、私のやり方が間違っているだけなのかもしれません。
もう一つ、このアイコンをクリックしたときにそのページに行くように設定するには、”キャプション”のところにURL等を記載すればよろしいのでしょうか？ または、style.cssに書かないといけないのでしょうか？ もしstyle.cssですとどのような感じなるのかご教示いただけると幸いです。
22/05/2022 8:56 pm
言われる通り、1つの画像しか設定はできません。
あらかじめ、複数のアイコン画像を並べ、1つの画像として作成します。
これをヘッダーロゴとして設定しています。
特別な事は一切していません。
わいひら reacted
Topic starter
22/05/2022 9:03 pm
Chu-ya様
なるほど。 フェイスブック、インスタグラムなどのアイコンを別々に表示させて、それをクリックしたときにページに行けるような感じで設定をしたいのですが、CSSに記載するのでしょうか？ 何か良い方法があればよいのですが....。
22/05/2022 9:10 pm
ヘッダーに内にボタンを設定するとなると話は別です。
CSSは用語の通り、各部品の色、レアウトなどの指定しかできません。
新たに部品(SNSボタン)追加する事はできません。
現在、ヘッダーレイアウトで「トップメニュー」が設定され、
ヘッダー内にグローバルメニューがあるとの事。
一つの方法として、グローバルメニューに、メニューとして各SNSのリンクを持たせてみてはどうでしょうか。
わいひら reacted
22/05/2022 10:18 pm
@bravo0916 さん
これはフォローボタンでいいのでしょうか？
もしフォローボタンであれば、Cocoon 設定 > SNS フォローを利用するのも選択肢だと思います。やり方は、以下のとおりです。
① 子テーマの functions.php に以下のコードを追加します。
add_action( 'wp_header_logo_before_open', function() {
get_template_part_with_option( 'tmp/sns-follow-buttons', null );
});
② CSS で見た目を整えます。
③ Cocoon 設定 > SNS フォロー、および WordPress 管理画面 > ユーザーで設定を行います。
ただし、現在の状況に 1 つ疑問点があります。このようにお書きになっています。
サイトのタイトルは削除しました。 今はトップページには出ていません。
もし、外観 > カスタマイズ > サイト基本情報の「サイトのタイトル」を空欄にしていらっしゃるのなら問題です。サイトのタイトルは、H1 タグに使われています。また、構造化データでも使われています。必ず表示しなければいけません。CSS での非表示もダメです。そのため、デザインの見直しが必要に思えます。
※ 添付画像は、あくまでサンプルです。CSS でもっと見た目を整えることができます。
This post was modified 2年前 by Akira
Topic starter
23/05/2022 7:00 am
Akira様、chu-ya様
ヘルプ頂き、本当にありがとうございます！ 何とかヘッダーに表示できるまでたどり着きました。 助かりました！
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。