<?xml version="1.0" encoding="UTF-8"?>        <rss version="2.0"
             xmlns:atom="http://www.w3.org/2005/Atom"
             xmlns:dc="http://purl.org/dc/elements/1.1/"
             xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
             xmlns:admin="http://webns.net/mvcb/"
             xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
             xmlns:content="http://purl.org/rss/1.0/modules/content/">
        <channel>
            <title>
									ヘッダー画像上にボタンや任意の文字列追加 - CSSカスタマイズ相談				            </title>
            <link>https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/</link>
            <description>Cocoon ディスカッション掲示板</description>
            <language>ja</language>
            <lastBuildDate>Tue, 10 Mar 2026 00:09:22 +0000</lastBuildDate>
            <generator>wpForo</generator>
            <ttl>60</ttl>
							                    <item>
                        <title>RE: ヘッダー画像上にボタンや任意の文字列追加</title>
                        <link>https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-76107</link>
                        <pubDate>Fri, 22 Dec 2023 08:07:21 +0000</pubDate>
                        <description><![CDATA[Akira さん
ご返信ありがとうございます、こちら参考にさせていただぎす！]]></description>
                        <content:encoded><![CDATA[<p>Akira さん</p>
<p>ご返信ありがとうございます、こちら参考にさせていただぎす！</p>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/customs/">CSSカスタマイズ相談</category>                        <dc:creator>masala</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-76107</guid>
                    </item>
				                    <item>
                        <title>RE: ヘッダー画像上にボタンや任意の文字列追加</title>
                        <link>https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-76106</link>
                        <pubDate>Fri, 22 Dec 2023 04:51:38 +0000</pubDate>
                        <description><![CDATA[@masala さん
申し訳ありません。コメントに気が付いていませんでした。
display: grid を使えば、お好きなように配置できると思います。
参考：グリッドレイアウトの基本概念
例えば、以下の CSS を書けば…
.appeal-content {
  display: grid;
  grid-template-columns: repeat(2, ...]]></description>
                        <content:encoded><![CDATA[<p>@masala さん</p>
<p>申し訳ありません。コメントに気が付いていませんでした。</p>
<p>display: grid を使えば、お好きなように配置できると思います。</p>
<p><a href="https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout" target="_blank" rel="noopener">参考：グリッドレイアウトの基本概念</a></p>
<p>例えば、以下の CSS を書けば…</p>
<pre contenteditable="false">.appeal-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.appeal-title {
  grid-column: 1 / -1;
}

.appeal-button-wrapper {
  flex-direction: column;
}</pre>
<p>添付画像の配置になります。あとは、スマホやタブレットに対応するよう CSS を追加します。</p>
<div id="wpfa-37235" class="wpforo-attached-file"><a class="wpforo-default-attachment" href="//wp-cocoon.com/wp-content/uploads/wpforo/default_attachments/1703220698-appeal.png" target="_blank" title="appeal.png"><i class="fas fa-paperclip"></i>&nbsp;appeal.png</a></div>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/customs/">CSSカスタマイズ相談</category>                        <dc:creator>Akira</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-76106</guid>
                    </item>
				                    <item>
                        <title>RE: ヘッダー画像上にボタンや任意の文字列追加</title>
                        <link>https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-75835</link>
                        <pubDate>Thu, 07 Dec 2023 15:30:06 +0000</pubDate>
                        <description><![CDATA[Akiraさま

ただ、完成図が分からないため、具体的な CSS は提示できません。
添付画像は、このサイトのトップページで少し試した結果です。

上記でAkira様が作成されていた内容は、まさに自分がやりたかったことでして、CSSをご教示いただけますでしょうか？
※なお、できれば右側のボタンを上下に配置できれば幸いです。]]></description>
                        <content:encoded><![CDATA[<p><a title="Akira" href="https://wp-cocoon.com/participant/akira/">Akira</a>さま</p>
<blockquote>
<p>ただ、完成図が分からないため、具体的な CSS は提示できません。</p>
<p>添付画像は、このサイトのトップページで少し試した結果です。</p>
</blockquote>
<p>上記でAkira様が作成されていた内容は、まさに自分がやりたかったことでして、CSSをご教示いただけますでしょうか？</p>
<p>※なお、できれば右側のボタンを上下に配置できれば幸いです。</p>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/customs/">CSSカスタマイズ相談</category>                        <dc:creator>masala</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-75835</guid>
                    </item>
				                    <item>
                        <title>RE: ヘッダー画像上にボタンや任意の文字列追加</title>
                        <link>https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-75834</link>
                        <pubDate>Thu, 07 Dec 2023 15:27:32 +0000</pubDate>
                        <description><![CDATA[自分も先ほどこの辺りを調べていたのですが、tomiyamaさんのイメージ（メッセージとボタンを別枠として）はこちらに近いかもしれないと思ったので共有させていただきますね。]]></description>
                        <content:encoded><![CDATA[<p>自分も先ほどこの辺りを調べていたのですが、<a title="tomiyama" href="https://wp-cocoon.com/participant/tomiyama/">tomiyama</a>さんのイメージ（<span>メッセージとボタンを別枠として</span>）はこちらに近いかもしれないと思ったので共有させていただきますね。</p>
<p><a href="https://sec.ayaito.net/cocoon/customize/419/#toc6" target="_blank" rel="noopener">https://sec.ayaito.net/cocoon/customize/419/#toc6</a></p>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/customs/">CSSカスタマイズ相談</category>                        <dc:creator>masala</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-75834</guid>
                    </item>
				                    <item>
                        <title>RE: ヘッダー画像上にボタンや任意の文字列追加</title>
                        <link>https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-73681</link>
                        <pubDate>Wed, 06 Sep 2023 04:57:04 +0000</pubDate>
                        <description><![CDATA[メッセージとボタンを別枠として対応したかった形になります。。ありがとうございます。少し試してみようと思います。。]]></description>
                        <content:encoded><![CDATA[<p>メッセージとボタンを別枠として対応したかった形になります。。<br />ありがとうございます。少し試してみようと思います。。</p>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/customs/">CSSカスタマイズ相談</category>                        <dc:creator>tomiyama</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-73681</guid>
                    </item>
				                    <item>
                        <title>RE: ヘッダー画像上にボタンや任意の文字列追加</title>
                        <link>https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-73680</link>
                        <pubDate>Wed, 06 Sep 2023 04:51:08 +0000</pubDate>
                        <description><![CDATA[@tomiyama さん

メッセージ左　ボタン右下
などのように調整できないですよね...？

CSS でお好きなように変更できると思います。
ただ、完成図が分からないため、具体的な CSS は提示できません。
添付画像は、このサイトのトップページで少し試した結果です。
 cocoon-top.png]]></description>
                        <content:encoded><![CDATA[<p>@tomiyama さん</p>
<blockquote>
<p>メッセージ左　ボタン右下</p>
<p>などのように調整できないですよね...？</p>
</blockquote>
<p>CSS でお好きなように変更できると思います。</p>
<p>ただ、完成図が分からないため、具体的な CSS は提示できません。</p>
<p>添付画像は、このサイトのトップページで少し試した結果です。</p>
<div id="wpfa-35846" class="wpforo-attached-file"><a class="wpforo-default-attachment" title="cocoon-top.png" href="//wp-cocoon.com/wp-content/uploads/wpforo/default_attachments/1693975868-cocoon-top.png" target="_blank" rel="noopener"><i class="fas fa-paperclip"></i> cocoon-top.png</a></div>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/customs/">CSSカスタマイズ相談</category>                        <dc:creator>Akira</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-73680</guid>
                    </item>
				                    <item>
                        <title>RE: ヘッダー画像上にボタンや任意の文字列追加</title>
                        <link>https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-73678</link>
                        <pubDate>Wed, 06 Sep 2023 03:37:22 +0000</pubDate>
                        <description><![CDATA[&gt;画像の関係上メッセージとボタンの部分を左寄せにしたいですが、CSSで設定しても左寄せになりません...これは取り消します。うまく反映されていないだけでした...]]></description>
                        <content:encoded><![CDATA[<p><span>&gt;画像の関係上メッセージとボタンの部分を左寄せにしたいですが、CSSで設定しても左寄せになりません...<br />これは取り消します。うまく反映されていないだけでした...</span></p>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/customs/">CSSカスタマイズ相談</category>                        <dc:creator>tomiyama</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-73678</guid>
                    </item>
				                    <item>
                        <title>RE: ヘッダー画像上にボタンや任意の文字列追加</title>
                        <link>https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-73674</link>
                        <pubDate>Wed, 06 Sep 2023 02:14:28 +0000</pubDate>
                        <description><![CDATA[ご回答ありがとうございます。
 
絶妙に期待にそぐわないかなと思っております。
アピールエリアは、メッセージとボタンが一緒になっているかと思いますが、
　メッセージ左　ボタン右下
などのように調整できないですよね...？
 
もしくは最悪一緒でも良いのですが、
画像の関係上メッセージとボタンの部分を左寄せにしたいですが、CSSで設定しても左寄せになりません......]]></description>
                        <content:encoded><![CDATA[<p>ご回答ありがとうございます。</p>
<p> </p>
<p>絶妙に期待にそぐわないかなと思っております。</p>
<p>アピールエリアは、メッセージとボタンが一緒になっているかと思いますが、</p>
<p>　メッセージ左　ボタン右下</p>
<p>などのように調整できないですよね...？</p>
<p> </p>
<p>もしくは最悪一緒でも良いのですが、</p>
<p>画像の関係上メッセージとボタンの部分を左寄せにしたいですが、CSSで設定しても左寄せになりません...</p>
<p>分かりましたら教えていただけるとありがたいです...</p>
<p>.appeal-content {<br />text-align: left;<br />}</p>
<p> </p>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/customs/">CSSカスタマイズ相談</category>                        <dc:creator>tomiyama</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-73674</guid>
                    </item>
				                    <item>
                        <title>RE: ヘッダー画像上にボタンや任意の文字列追加</title>
                        <link>https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-73672</link>
                        <pubDate>Wed, 06 Sep 2023 02:05:53 +0000</pubDate>
                        <description><![CDATA[アピールエリアでは、ご希望に合わないでしょうか？
参考：ヘッダー下アピールエリアの使い方
この Cocoon 公式サイトの トップページ がアピールエリアを使っています。
また、Cocoon 設定を以下のようにすれば、イメージされているサイトと同じになります。

ヘッダーのヘッダーレイアウトを「トップメニュー（右寄せ）」にする
ヘッダーの「ヘッダーを固定する」にチェ...]]></description>
                        <content:encoded><![CDATA[<p>アピールエリアでは、ご希望に合わないでしょうか？</p>
<p>参考：<a href="https://wp-cocoon.com/appeal-area/" target="_blank" rel="noopener">ヘッダー下アピールエリアの使い方</a></p>
<p>この Cocoon 公式サイトの <a href="https://wp-cocoon.com/" target="_blank" rel="noopener">トップページ</a> がアピールエリアを使っています。</p>
<p>また、Cocoon 設定を以下のようにすれば、イメージされているサイトと同じになります。</p>
<ul>
<li>ヘッダーのヘッダーレイアウトを「トップメニュー（右寄せ）」にする</li>
<li>ヘッダーの「ヘッダーを固定する」にチェックを入れる</li>
<li>全体の「サイト幅を揃える」のチェックを外す</li>
</ul>
<p>もし、PHP でカスタマイズされる場合は、<a href="https://github.com/xserver-inc/cocoon/blob/master/tmp/body-top.php" target="_blank" rel="noopener">tmp/body-top.php</a> にある get_template_part() を使った <a href="https://developer.wordpress.org/reference/hooks/get_template_part_slug/" target="_blank" rel="noopener">get_template_part_{$slug} アクションフック</a> を使って任意のコンテンツを追加できると思います。</p>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/customs/">CSSカスタマイズ相談</category>                        <dc:creator>Akira</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-73672</guid>
                    </item>
				                    <item>
                        <title>ヘッダー画像上にボタンや任意の文字列追加</title>
                        <link>https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-73671</link>
                        <pubDate>Wed, 06 Sep 2023 01:05:41 +0000</pubDate>
                        <description><![CDATA[相談内容：
ヘッダー画像内にロゴやキャッチフレーズとは別に文言の追加と
特定の固定ページに飛ばすボタンを追加したいです。
 
最悪文字は画像編集で対応し八日とか考えていますが、できればコード等で追加したいです。
以下の順番で表示されるようにしたいです。
・ヘッダーメニュー
・ヘッダー画像
・コンテンツ
下記のようなイメージです
 
試したこと：
heade...]]></description>
                        <content:encoded><![CDATA[<p>相談内容：</p>
<p>ヘッダー画像内にロゴやキャッチフレーズとは別に文言の追加と</p>
<p>特定の固定ページに飛ばすボタンを追加したいです。</p>
<p> </p>
<p>最悪文字は画像編集で対応し八日とか考えていますが、できればコード等で追加したいです。</p>
<p>以下の順番で表示されるようにしたいです。</p>
<p>・ヘッダーメニュー</p>
<p>・ヘッダー画像</p>
<p>・コンテンツ</p>
<p>下記のようなイメージです。<br />https://lp.lovegraph.me/recruit</p>
<p> </p>
<p>試したこと：</p>
<p>header.phpだとヘッダーメニュー下にうまく設定できないと思っています。</p>
<p>ヘッダーメニューから自作して、header.phpで色々やるしかないのか何か別の方法があるかと試行錯誤しています。</p>
<p> </p>
<p>お手数ですが、なにか解決策等あれば教えていただきたいです。</p>]]></content:encoded>
						                            <category domain="https://wp-cocoon.com/community/customs/">CSSカスタマイズ相談</category>                        <dc:creator>tomiyama</dc:creator>
                        <guid isPermaLink="true">https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e7%94%bb%e5%83%8f%e4%b8%8a%e3%81%ab%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%84%e4%bb%bb%e6%84%8f%e3%81%ae%e6%96%87%e5%ad%97%e5%88%97%e8%bf%bd%e5%8a%a0/#post-73671</guid>
                    </item>
							        </channel>
        </rss>
		