grayishスキン適用中

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

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

ヘッダー左側にソーシャルアイコンを表示
 
共有:
通知
すべてクリア

[解決済] ヘッダー左側にソーシャルアイコンを表示

12 投稿
3 ユーザー
8 Likes
1,723 表示
(@bravo0916)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

ご担当者様

お世話になっております。 現在、cocoonを使用して、ブログサイトを作成中です。

ヘッダーの左側または、右側にソーシャルアイコン(フェイスブック、インスタブラム等)を追加したいと考えています。 CSSに関しては初心者で色々サイトで検索してもヒットしない状況ですので、こちらで質問させていただいています。

例えば、CSSでは下記のような記述になるのでしょうか?

#navi .navi-in > .menu-header {

.icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../images/icon.png) no-repeat;
}
}

お忙しいところ恐縮ですが、何卒宜しくお願い致します。

 


   
トピックタグ
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1931
 

以下で間違いないか確認したく。

●要件
ヘッダーに表示される「サイトのタイトル」右or左に、任意の画像(SNSロゴ)を表示させたい。
例として、サイトのタイトル「blog top」の右にSNS画像を表示させる。

●設定条件
[Cocoon設定]→[ヘッダー]
→ヘッダーレイアウト「トップメニュ小(右寄せ)」
→ヘッダーロゴは未設定

[外観]
→[カスタマイズ]→[サイト基本情報]→サイトのタイトル
→[メニュー]→メニュー設定「ヘッダーメニュー」のみ


   
わいひら reacted
(@bravo0916)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

Chu-ya様

早速のご返信ありがとうございます。 要件については、今、左のある「blog top」を消して、その部分に、ソーシャルアイコンを挿入したいと考えています。

添付ファイルを参照下さい。

投稿者:: @chu-ya

●設定条件
[Cocoon設定]→[ヘッダー]
→ヘッダーレイアウト「トップメニュ小(右寄せ)」
→ヘッダーロゴは未設定

はい、設定条件については、上記のとおりです。 

[外観]
→[カスタマイズ]→[サイト基本情報]→サイトのタイトル

 サイトのタイトルは削除しました。 今はトップページには出ていません。

→[メニュー]→メニュー設定「ヘッダーメニュー」のみ

はい、その通りです。

 

以上、よろしくお願いいたします。

 


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1931
 

単にSNS画像をグローバルメニューの横に貼り付けるなら以下と変わらず。

●手順
[Cocoon設定]→[ヘッダー]
→ヘッダーロゴ
→ヘッダーロゴサイズ

ヘッダーロゴとしてSNS画像を貼り付ける。

 


   
わいひら reacted
(@bravo0916)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

chu-ya様

早速試したのですが、ロゴ選択が1つしかできず、複数選べない状況です。

今の状況ですと、1アイコンのみの選択です。 何か他に方法はあるのでしょうか?

すみません、私のやり方が間違っているだけなのかもしれません。 

 

もう一つ、このアイコンをクリックしたときにそのページに行くように設定するには、”キャプション”のところにURL等を記載すればよろしいのでしょうか? または、style.cssに書かないといけないのでしょうか? もしstyle.cssですとどのような感じなるのかご教示いただけると幸いです。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1931
 

言われる通り、1つの画像しか設定はできません。

あらかじめ、複数のアイコン画像を並べ、1つの画像として作成します。
これをヘッダーロゴとして設定しています。
特別な事は一切していません。


   
わいひら reacted
(@bravo0916)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

Chu-ya様

なるほど。 フェイスブック、インスタグラムなどのアイコンを別々に表示させて、それをクリックしたときにページに行けるような感じで設定をしたいのですが、CSSに記載するのでしょうか? 何か良い方法があればよいのですが....。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1931
 

ヘッダーに内にボタンを設定するとなると話は別です。

CSSは用語の通り、各部品の色、レアウトなどの指定しかできません。
新たに部品(SNSボタン)追加する事はできません。

現在、ヘッダーレイアウトで「トップメニュー」が設定され、
ヘッダー内にグローバルメニューがあるとの事。

一つの方法として、グローバルメニューに、メニューとして各SNSのリンクを持たせてみてはどうでしょうか。

https://masaa.net/2020/03/11/cocoon-200302-1/


   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1931
 

●ご参考

ヘッダー内に表示エリアを設け、そこにウィジェット(例:SNSフォローボタン)を配置させる方法もあります。

https://oiio.jp/entries/2010


   
わいひら reacted
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1642
 

@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

   
わいひら and chu-ya reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1931
 

@akira さん

なる程、勉強になります。


   
(@bravo0916)
Active Member Registered
結合: 2年前
投稿: 13
Topic starter  

Akira様、chu-ya様

ヘルプ頂き、本当にありがとうございます! 何とかヘッダーに表示できるまでたどり着きました。 助かりました!


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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