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

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

タイトルロゴ2つ設置について
 
共有:
通知
すべてクリア

[クローズ] タイトルロゴ2つ設置について

14 投稿
3 ユーザー
15 Reactions
1,689 表示
(@niboshi_888)
Trusted Member Registered
結合: 3年前
投稿: 34
Topic starter  

いつも大変お世話になっております。

今回もお助けいただきたく、投稿させていただきました。

 

相談内容:タイトルロゴを2つ設置(どちらも同じ高さになるようにしたい)

試したこと:floatなどを使ってみたのですが、うまくいきませんでした。

現状このような形なのですが、ロゴAとロゴBは同じ高さにしたいです。

.header-in .logo {
text-align:right ;
	padding-left: 10px ;
}

.karirogo {
  background-position: left center;
	background-repeat:  no-repeat;
	width:500px;
	height:100px;
	background-image: url("http://☓☓☓test.local/wp-content/uploads/2022/05/ロゴB.png");
}

過去の質問を遡り、途中までは出来たのですが思い通りに行きません。

 

下手な説明で申し訳ないのですが、良い方法等がありましたら

教えていただけると幸いです。

よろしくお願い致します。

 


   
(@niboshi_888)
Trusted Member Registered
結合: 3年前
投稿: 34
Topic starter  

そして、header-containerのPHPですが、

 

このような形になっています。

 

追記:添付ファイルのようなイメージにしたいと思っております。

(分かりづらくてすみません)


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

要望が以下で間違いないか確認願います。


●要望

[Cocoon設定]→[ヘッダー]→ヘッダーロゴを設定。(赤画像)

それ以外にヘッダーエリア内に画像(ロゴB)を追加したい。(青画像)

 

●制約
制約としてロゴBをクリックしてもHOMEに戻りません。あくまでダミーです。
ロゴAのみHOMEに戻る事が可能。

 

●説明

CSS追加のみの修正となります。

  1. ヘッダーで設置したロゴAを右に配置。
  2. ロゴAの背景画像としてロゴBをCSS定義。
  3. 親テーマCSSの定義に上下余白10pxがある為、下に10px移動させる。
  4. ヘッダーエリア左に10px余白(padding-left:10px)を設けるなら、3の部分を
    10px 10pxとして下さい。
/* 1 */
.header-in .logo {
  text-align:right ;
}

/* 2 */
.logo {
  background-position: 0 10px; /* 3左上が基準で座標(0,0) */
  background-repeat:  no-repeat;
  background-image: url("http://xxx.com/wp-content/uploads/xxxx/xx/xxx.png");
}

 


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

そして、header-containerのPHPですが、

このような形になっています。

どうお書きになっているのか分かりませんが、header-container.php を変更する必要はありません。

以前にも同様のご質問があったため、そのトピックを貼り付けておきます。

ヘッダーを2カラムにする方法はありますか?

↑ で私が書いたコードは、以下をご参考ください。サイトロゴを挟んで 2 つのフックがあります。

https://github.com/yhira/cocoon/blob/master/tmp/header-container.php#L22-L28


   
(@niboshi_888)
Trusted Member Registered
結合: 3年前
投稿: 34
Topic starter  

@chu-ya

ご回答いただきありがとうございます。

私の言葉が足りず、申し訳ありません。

そして、header-containerのPHPですが、

このような形になっています。

というのも、私の不手際によりコードを消してしまい、お送りすることが出来ませんでした。

大変失礼致しました。

書きたかったのはこちらです。

<?php //ロゴタグの生成
        generate_the_site_logo_tag(); ?>
	<div class="karirogo">

そして、要望は間違いなくchu-ya様がお書き下さったもので間違いありません。

ですが、これは私の説明不足でお伝えが出来なかったのですが、

ロゴB(青画像)の方に、外部リンクを貼る事はできますか?

 

現在、chu-ya 様が教えてくださったものでは、難しいと理解しましたが、

他の方法等で外部リンクを付けつつ、ヘッダーに2つロゴを設置することは可能なのでしょうか?

 

要点を得ず、的を外した質問ばかりすみません。

 


   
(@niboshi_888)
Trusted Member Registered
結合: 3年前
投稿: 34
Topic starter  

@akira

ご回答いただきありがとうございます。

私の言葉が足りず、申し訳ありません。

そして、header-containerのPHPですが、

このような形になっています。

というのも、私の不手際によりコードを消してしまい、お送りすることが出来ませんでした。

大変失礼致しました。

書きたかったのはこちらです。

<?php //ロゴタグの生成
        generate_the_site_logo_tag(); ?>
	<div class="karirogo">

akira 様が送ってくださったURLは勿論拝見させていただきました。

しかし、分かり易い説明をしてくださったのにも関わらず、情弱な私はうまく理解が出来ず、活用することが出来ませんでした。

申し訳ありません。

 

現在は、chu-ya様が教えてくださったとおりに作業を行っています。

ロゴB(青画像)にリンクが貼れるのかをお聞きしている次第です。

 

もし出来なければ、ロゴB(青画像)右側に設置し、ロゴA(赤画像)左側に設置しようかと考えております。

(現在のロゴAとロゴBの位置を入れ替えるという形です)

 

 


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

@niboshi_888 さん

お書きになった HTML が不完全のように思えます。notepad.pw に書いていただけると HTML が消えません。

サイトロゴの後で何かをお書きになっているようですので、このようなコードを子テーマの functions.php に追加します。

add_action('wp_header_logo_after_open', function() {
  echo 'ここにロゴBのHTMLを書く';
});

あとは Flexbox などを使い CSS を書けば完成だと思います。サイトまたはテストサイトの URL が分かれば、こちらで CSS を書くのは可能です。 

尚、CSS だけで外部リンクを付けるのは不可能です。また、background-image で指定した画像は、スクリーンリーダーは読み上げません。そのため、background-image には、意味を持たない装飾目的の画像を指定するのが一般的です。niboshi_888 さんのご希望には background-image は不向きだと思います。

参考:background-image - アクセシビリティの考慮

This post was modified 2年前 by Akira

   
(@niboshi_888)
Trusted Member Registered
結合: 3年前
投稿: 34
Topic starter  

@akira

私の無茶なお願いを色々と考慮し、解決案を出して下さりありがとうございます。

悩みが一気に解決致しました。

 

ひとまず、自身で出来るところまでやってみたいと思います。

もし、また迷うことがあれば、お助け頂きたいです。

本当に有難うございました。


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

Akiraさんの具体例を記します。

子テーマのfunction.phpに追加します。

add_action( 'wp_header_logo_before_open', function() {
  echo '<div class="logo logo-header logo-image">
  <a href="ロゴBのリンク先URL">
    <img  src="ロゴBの画像URL">
  </a>
</div>';
});

 

子テーマのstyle.cssに以下を追加します。 

.header-in {
  flex-direction: row;
  justify-content: space-between;
}

.header-in.cf:after {
  content: none;
}

 

@Akiraさん

flexで配置する際、clearfixがあるとロゴAが右端に配置できない?


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

flexで配置する際、clearfixがあるとロゴAが右端に配置できない?

状態が分からないので何とも言えませんが、配置する方法はあると思います。

This post was modified 2年前 by Akira

   
(@niboshi_888)
Trusted Member Registered
結合: 3年前
投稿: 34
Topic starter  

@chu-ya

細かく記載してくださり、大変助かります。

ありがとうございます。

なんとか考えていた形になりました。

 

ここでまた質問するのは申し訳ないのですが、

もうすこしロゴB(青画像)の位置を左側に寄せることは可能でしょうか?

 

 

 


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

@niboshi_888 さん

ちょっと試してみました。

左側のロゴは、Cocoon 設定 > ヘッダーの「ヘッダーロゴ」に設定します。「ヘッダーロゴ」に設定するロゴは、サイト名などサイトを表すものである必要があります。

そして、子テーマの functions.php に以下を追加します。

add_action( 'wp_header_logo_after_open', function() {
  echo '<div class="logo logo-header logo-image">
          <a href="#">
            <img class="site-logo-image header-site-logo-image" src="https://code.local/wp-content/uploads/2022/05/logo-b.png" alt="">
          </a>
        </div>';
});

※ 「ヘッダーロゴ」のロゴを右側にする場合は、wp_header_logo_after_open を wp_header_logo_before_open に変更します。

最後に、子テーマの style.css に以下を追加します。

.header-in {
  flex-direction: row;
  flex-wrap: wrap;
}

.tagline {
  flex-basis: 100%;
}

.logo-header:first-of-type {
  margin-right: auto;
}

.logo-header:last-child {
  margin-left: auto;
}

あとは、スマホでどう表示するかによって、CSS を変更します。


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

@akira さん

上記のコード、要素がh1とdivなので、.logo-header:first-of-typeでなく、.logo-header:first-childですよね?
なる程、justify-contentでなく、margin-right、margin-leftで左右寄せとは。
良い勉強になりました。


   
(@niboshi_888)
Trusted Member Registered
結合: 3年前
投稿: 34
Topic starter  

@akira 様 @chu-ya

今回、記載方法や説明まで細かく教えてくださり本当に有難うございました。

初心者の私でもわかりやすく、とても助かりました。

本当に感謝いたします。

 

また何か質問させていただくことがあるかもしれませんが、

その時はまたお力添えいただければと思います。

本当に有難うございました。


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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