サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年11月27日 09:52
大変初歩的な質問ですみません。
サイトタイトルとキャッチフレーズの間隔を狭くしたく、以下の記事を読みました。
https://wp-cocoon.com/community/cocoon-theme/サイトタイトルとキャッチフレーズの間隔を狭く/
数値を変える場所（CSS?)がわかりません。大変お手数をおかけしますが、教えていただけますか？
サイトは、こちらです。
http://kizukibreathing.com
よろしくお願いします。
This topic was modified 2年前 by hiromi89
2022年11月27日 10:38
CSSのpadding、marginを理解していますか？
また各々のclassが何を示すのか理解できていますか？
図の部分をさし、以下を意味します。
.tagline {
margin: 上余白 左右余白 下余白;
}
.logo-text {
padding: 上余白 左右余白 下余白;
}
この為、各々の余白の値をゼロ（小さく）にすれば余白が無くなります。
.tagline {
margin: 0;
}
.logo-text {
padding: 0;
}
単なるコピペでなくChrome標準に備わっているデベロッパーツールの使い方、基礎を覚えましょう。
わいひら reacted
2022年11月27日 17:50
hiromi89さん
数値を変える場所（CSS?)がわかりません。大変お手数をおかけしますが、教えていただけますか？
「習うより慣れよ」です。
数字を変えてみれば良いのです。
少しの差しかないと分かりづらいですから、極端に大きい数字などに変更してみて、変化を確認してみると、どういうものかお分かりいただけると思います。
そして、こういうWeb標準の仕様みたいなものをご説明するのは、フォーラムではスペースも限られ難しいです。
しかしながら、検索すると、解説サイトなどあります。
例えば、「CSS padding」で検索すると、以下のようなサイトが見つかります。
mdn web docs
padding
https://developer.mozilla.org/ja/docs/Web/CSS/padding
上記は、Web標準の仕様について記載されており、最初は分かりづらいと思いますが、最後に立ち戻るのは上記のようなものだと思います。
以下のようなサイトは、取っつき易いと思います。
（以下も、「CSS padding」で検索したものの1つです）
CSSのmarginとは？paddingとは？余白の指定方法まとめ
https://saruwakakun.com/html-css/basic/margin-padding
まずは、ご自分で検索して調べていただく。
それが基本です。
検索しても分からないことがありましたら、ご質問いただく感じです。
解説サイトはたくさんありますので、ご自分にあうものを見つけてください。
また、昨日も書かせていただいた通り、カスタマイズにあたっては、デベロッパーツールをご利用になるのが便利です。
（むしろないと厳しい。）
Safariについても、検索すれば見つかると思います。
（数は少ないようですが）
Apple公式
MacのSafariで「開発」メニューのデベロッパツールを使用する
https://support.apple.com/ja-jp/guide/safari/sfri20948/13.0/mac/10.15
上記は、まずはSafariで「デベロッパーツール」を使用できるようにするための設定方法のようです。
以下のようなサイトもありました。
Safariの開発者用デベロッパーツールの表示と簡単な使い方
https://hep.eiz.jp/safari-developer-tool/
Safariで使用できるようになれば、後は他のブラウザ（Chrome、Firefox等）と基本的に大きくは違わないと思われます。
（Macは使ったことがないもので良く分からないところがあります）
検索して見つけるが基本です。
まずは検索してみてくださいませ。
そして、それでも分からないことがあれば、ご質問いたければと思います。
わいひら reacted
Topic starter
2022年11月27日 19:37
chu-yaさん、mk2さん、
ご回答、ありがとうございます。
質問の意図を上手に伝えることができていませんでした。
お手数をおかけして申し訳ございません。
「外観→追加CSS」で変えればよかったのですね。どこでCSSを変えればいいのかがわからなかったのです。
「外観→追加CSS」にはtaglineの表記はありましたが、logo-textの表記が見つからなかったので、どこか別の場所にあるのかと思ったのです。
・・・・・・
「外観→追加CSS」で、taglineに「margin: 0;」を追加しましたら、サイトタイトルとキャッチフレーズの行間が縮まりました。
「.logo-text {」の場所が見つからないですが、探してみます。
教えていただいた情報も見てみます。
初歩的な質問に丁寧にお答えくださり、感謝申し上げます。
わいひら reacted
2022年11月27日 20:03
hiromi89さん
「外観→追加CSS」にはtaglineの表記はありましたが、logo-textの表記が見つからなかったので、どこか別の場所にあるのかと思ったのです。
それを見つけるのは、デベロッパーツールでないと難しいと思います。
そしてカスタマイズは、基本的には、子テーマのスタイルシート(style.css)か、追加CSSのどちらかで行うものだと思います。
それぞれに利点や不便な点はあります。
それらのことも、基本的には、検索すれば解説なさっているサイトは見つかります。
まずは検索してみることです。
「WordPress CSS カスタマイズ」で検索すると、いくつも見つかります。
上記で検索して見つかったサイトを3つリンクしておきます
WordPressでCSSを編集してテーマをカスタマイズしよう！
https://www.conoha.jp/lets-wp/wp-css/
WordPressのCSSを編集する方法｜自分でカスタマイズしよう！【初心者向け】
https://magazine.techacademy.jp/magazine/7750
初心者必見！CSS編集でWordPressを自分好みにカスタマイズする方法
https://www.sejuku.net/blog/59146
何事も、まずは検索してみることです。
情報は溢れています。
それ故に、取捨選択は必要です。
（必ずしも正しい情報が載っているとは限りませんので）
既に、何度も同じ言葉が出ています。
是非とも、それらを確認してみてください。
（「デベロッパーツール」と「検索」は、昨日も書いた気がします）
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。