特典機能について

タイトルロゴ2つ設置について | Cocoonテーマに関する質問 | 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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

スポンサーリンク
共有:
通知
すべてクリア

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


niboshi_888
(@niboshi_888)
Eminent Member
結合: 2か月前
投稿: 22
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
(@niboshi_888)
Eminent Member
結合: 2か月前
投稿: 22
Topic starter  

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

 

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

 

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

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


chu-ya
(@chu-ya)
Estimable Member
結合: 3か月前
投稿: 206
 

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


●要望

[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");
}

 


niboshi_888わいひら 件のいいね!
Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1014
Akira - FacebookAkira - Twitter
 

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

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

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

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

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

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

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


niboshi_888わいひら 件のいいね!
niboshi_888
(@niboshi_888)
Eminent Member
結合: 2か月前
投稿: 22
Topic starter  

@chu-ya

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

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

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

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

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

大変失礼致しました。

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

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

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

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

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

 

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

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

 

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

 


niboshi_888
(@niboshi_888)
Eminent Member
結合: 2か月前
投稿: 22
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
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1014
Akira - FacebookAkira - Twitter
 

@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 件のいいね!
niboshi_888
(@niboshi_888)
Eminent Member
結合: 2か月前
投稿: 22
Topic starter  

@akira

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

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

 

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

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

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


chu-ya
(@chu-ya)
Estimable Member
結合: 3か月前
投稿: 206
 

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が右端に配置できない?


わいひらniboshi_888 件のいいね!
Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1014
Akira - FacebookAkira - Twitter
 

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

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

This post was modified 2か月前 by Akira

わいひらniboshi_888 件のいいね!
niboshi_888
(@niboshi_888)
Eminent Member
結合: 2か月前
投稿: 22
Topic starter  

@chu-ya

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

ありがとうございます。

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

 

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

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

 

 

 


Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1014
Akira - FacebookAkira - Twitter
 

@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 を変更します。


わいひらniboshi_888 件のいいね!
chu-ya
(@chu-ya)
Estimable Member
結合: 3か月前
投稿: 206
 

@akira さん

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


わいひらniboshi_888 件のいいね!
niboshi_888
(@niboshi_888)
Eminent Member
結合: 2か月前
投稿: 22
Topic starter  

@akira 様 @chu-ya

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

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

本当に感謝いたします。

 

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

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

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


わいひら 件のいいね!
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは7日以内なら無料自動復旧可能
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
×DBは手動で復旧(データ取得は無料)
×ファイルも手動で復旧(データ取得は無料)
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
×ファイルは手動復旧(データ取得は無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:6年

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