サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
10/01/2021 10:05 pm
見本の通りCSSをコピーして投稿のカスタムCSSに貼り付けたのですが、なぜか上にも同じ線がついてます。
外観の追加CSSに記載してたコードも全部消してやってみましたが同じ結果でした。
わかる人いたらぜひ教えて頂きたいです。
Topic starter
10/01/2021 10:09 pm
すみません。
1枚目写真が横になってました。
コピー元の画像はこちらです。
10/01/2021 10:28 pm
実際のページを見てみないと分からないかも知れません。
投稿の編集ページサイドバーの「その他」の中にある「アーカイブに出力しない」にチェックを入れると記事一覧等には表示されないので、チェックを入れた上で実際のページのURLを頂けますか。
わいひら reacted
Topic starter
11/01/2021 4:03 pm
お返事ありがとうございます。
（その他）アーカイブに出力しないにチェックを入れました。
↓更新したURLがこちらです。↓
適応したいのはh3の見出しです。
ですが、実際にテキストに記入してるタグに対して、コピーしたCSSも同じタグになるように変更はしています。
11/01/2021 4:07 pm
山田さん
上にも同じ線が出ているのは、記事のタイトルを入力していないからです。
記事のタイトルを入力してみてください。
Topic starter
11/01/2021 4:49 pm
環境情報はこちらです。
----------------------------------------------
サイト名：山田です。ブログ
サイトURL： https://yamadadesu.tokyo
ホームURL： https://yamadadesu.tokyo
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：5.6
PHPバージョン：7.4.12
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja-jp
----------------------------------------------
テーマ名：Cocoon
バージョン：2.2.5.7
カテゴリ数：22
タグ数：2
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.2
style.cssサイズ：1220バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
AddQuicktag 2.5.3
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 4.1.8
All in One SEO 4.0.12
Broken Link Checker 1.11.15
Classic Editor 1.6
Contact Form 7 5.3.2
Head, Footer and Post Injections 3.2.1
PuSHPress 0.1.10
Pz-LinkCard 2.4.2.1
Rinker 1.7.8
SiteGuard WP Plugin 1.5.2
Site Kit by Google 1.23.0
WordPress Ping Optimizer 2.35.1.2.3
WP Multibyte Patch 2.9
----------------------------------------------
11/01/2021 4:53 pm
山田さん
該当ページの編集画面の下の方にある、「カスタムCSS」の欄にCSSのコードを記述していないか、今一度、確認してみてください。
11/01/2021 5:22 pm
山田さん
そこは、「追加CSS」というところです。
「カスタムCSS」は、記事を書く画面の下の方にあります。
Topic starter
11/01/2021 5:55 pm
Topic starter
11/01/2021 6:08 pm
11/01/2021 6:14 pm
現在カスタムCSSに記述されているコードは、ｈ１、つまり、記事のタイトル部分に適用させるためのコードです。
そのため、記事のタイトル部分にも適用されます。
通常は、ｈ2にデザインを適用させるようにコード書くのですが、そのページだけh2の見出しのデザインを別のデザインに変更したい、ということでしょうか？
わいひら reacted
11/01/2021 6:31 pm
山田さん
Cocoonでは、「記事のタイトル」を入力すると、「ｈ１」の見出しとして記事の最上部に表示されます。
ですので、h1にCSSのコードを適用させると、当然、記事のタイトルにもそのデザインが適用されます。
サイトの別のページを拝見しますと、「追加CSS」の方に記述されているデザインがｈ２に適用されているようです。
山田さんが、どのようになさりたいのか、その辺りが良くわかりませんので、ご説明いただければと思います。
わいひら reacted
11/01/2021 7:00 pm
山田さん
Cocoonで見出しをCSSのコードで指定するときは、例えばh2に適用したいときは、
.article を半角スペースで繋いで、
.article h2 {
プロパティ:値；
}
.article h2:after {
プロパティ:値；
}
このように書きます。
このようにすることで、記事本文のh2の見出しだけにデザインが適用されます。
h3の場合も同様で、
.article h3 {
プロパティ:値；
}
.article h3:after {
プロパティ:値；
}
このように、記述します。
わいひら reacted
Topic starter
11/01/2021 7:02 pm
h1はタイトルになるんですね。
h２デザインは元々追加CSSにコードがあります。
それを残しつつ、h3デザインを別のデザインで追加したいと思ったのですが、h2,h3デザインが重なったようなバグが起きたので質問させていただきました。
追加CSSのコードです。
何度も付き合ってくれてありがとうございます。
h2 {
font-size: 20px !important;/*文字のサイズ*/
border-left: 3px solid #4DA1FF;/*左線*/
padding: .5em .7em;/*余白*/
background: rgba(77,161,255,.05);/*背景色*/
color: #272727;
margin-bottom: 15px;
border-top: none;
border-bottom: none;
}
/*
* Copyright (c) NomadWorks
* Design: NomadCode
*/
.kaerebalink-box {
width: 100%;
margin: 15px auto;
border: 2px solid #DEDEDE;
padding: 25px;
max-width: 100%;
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
background: #fff !important;
font-family: sans-serif !important;
}
.kaerebalink-box p {
font-size: 15px;
line-height: 1.4em;
margin: 0;
padding: 0;
}
.kaerebalink-box .kaerebalink-image {
float: left;
min-width: 130px;
}
.kaerebalink-box .kaerebalink-image img {
display: block;
width: 100%;
max-width: 130px;
}
.kaerebalink-box .kaerebalink-name {
font-size: 15px;
}
.kaerebalink-box .kaerebalink-name:first-child a {
font-weight: bold;
}
.kaerebalink-box .kaerebalink-name a {
text-decoration: none;
color: #333;
}
.kaerebalink-powered-date a {
text-decoration: underline !important;
color: #4DA1FF !important;
}
.kaerebalink-box p {
margin: 0;
margin-bottom: 5px;
}
.kaerebalink-box .kaerebalink-powered-date {
color: #aeaeae;
font-size: 11px;
}
.kaerebalink-box .kaerebalink-detail {
font-size: 12px;
color: #5D5D5D;
padding-bottom: 5px;
line-height: 2em;
}
.kaerebalink-box .kaerebalink-link1 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
float: left;
width: 100%;
padding-bottom: 0 !important;
}
.kaerebalink-box .kaerebalink-link1 div {
margin: .5%;
}
.kaerebalink-box .shoplinkamazon {
background: #EFC04B !important;
border: 1px solid #A88735;
border-radius: 3px;
text-align: center;
min-width: 60px;
width: 33%;
padding: 3px 5px 5px 5px;
display: inline-block;
}
.kaerebalink-box .shoplinkamazon a {
font-size: 12px;
color: #272727;
text-decoration: none;
font-weight: bold;
}
.kaerebalink-box .shoplinkrakuten {
background: #BF0000 !important;
border: 1px solid #9D0000;
border-radius: 3px;
min-width: 60px;
width: 33%;
padding: 3px 5px 5px 5px;
text-align: center;
display: inline-block;
}
.kaerebalink-box .shoplinkrakuten a {
font-size: 12px;
color: #FFF;
text-decoration: none;
font-weight: bold;
}
.kaerebalink-box .shoplinkyahoo {
background: #F8F8F8 !important;
border: 1px solid #BEBEBE;
border-radius: 3px;
min-width: 60px;
width: 33%;
padding: 3px 5px 5px 5px;
text-align: center;
display: inline-block;
}
.kaerebalink-box .shoplinkyahoo a {
font-size: 8px;
color: #272727;
text-decoration: none;
font-weight: bold;
}
.kaerebalink-box .shoplinkseven {
background: #E3EEFF !important;
border: 1px solid #AABEE3;
border-radius: 3px;
min-width: 60px;
width: 33%;
padding: 3px 5px 5px 5px;
text-align: center;
display: inline-block;
}
.kaerebalink-box .shoplinkseven a {
font-size: 12px;
color: #005FAF;
text-decoration: none;
font-weight: bold;
}
.kaerebalink-box .kaerebalink-link1 {
padding-top: 5px;
padding-bottom: 10px;
}
.booklink-footer {
display: none;
}
.kaerebalink-link1 a,
.booklink-link2 a,
.tomarebalink-link1 a,
.product-item-buttons a {
margin: auto !important;
background: none !important;
}
@media screen and (min-width: 769px) {
.booklink-link2,
.kaerebalink-link1,
.tomarebalink-link1,
.product-item-buttons {
flex-wrap: inherit;
}
}
@media (min-width: 700px) {
.entry-content {
font-size: 100%;
}
}
@media(max-width:1170px) {
.kaerebalink-box {
font-size: 10px !important;
}
.kaerebalink-box .shoplinkyahoo a {
font-size: 8px;
}
.kaerebalink-link1 a,
.booklink-link2 a,
.tomarebalink-link1 a,
.product-item-buttons a {
padding: 8px;
}
}
@media (max-width: 1050px) {
.kaerebalink-box .shoplinkamazon,
.kaerebalink-box .shoplinkrakuten,
.kaerebalink-box .shoplinkyahoo,
.kaerebalink-box .shoplinkseven {
max-width: 150px !important;
}
.kaerebalink-box .kaerebalink-image {
min-width: 110px;
}
.kaerebalink-box .kaerebalink-image img {
max-width: 110px;
}
.kaerebalink-box {
width: 100%;
}
}
@media(max-width:767px) {
.kaerebalink-box {
display: block;
}
.kaerebalink-box {
max-width: 320px;
}
.kaerebalink-box .kaerebalink-link1 div {
box-sizing: border-box;
}
.kaerebalink-box .kaerebalink-image {
float: inherit;
margin-bottom: 15px;
width: 100%;
}
.kaerebalink-box .kaerebalink-image img {
margin: auto;
}
.kaerebalink-powered-date {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.kaerebalink-box .kaerebalink-detail {
text-align: left;
}
.kaerebalink-box .kaerebalink-link1 {
width: 100%;
margin: auto !important;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.kaerebalink-box .shoplinkamazon,
.kaerebalink-box .shoplinkrakuten,
.kaerebalink-box .shoplinkyahoo,
.kaerebalink-box .shoplinkseven {
width: 49%;
margin-bottom: 2% !important;
}
.kaerebalink-box .kaerebalink-link1 {
display: inline-block;
}
.kaerebalink-box .kaerebalink-link1 {
display: -webkit-flex !important;
display: -moz-flex !important;
display: -ms-flex !important;
display: flex !important;
}
.kaerebalink-box .kaerebalink-link1 {
padding-left: 0 !important;
}
}
@media(max-width:320px) {
.kaerebalink-box .kaerebalink-link1 {
padding-left: 0 !important;
}
}
11/01/2021 7:12 pm
ちょっと、小用で、30分ほど外します。
だんだん事情がわかってきました。
11/01/2021 7:54 pm
山田さん
追加CSSの上の方にあるｈ２のところを、以下ようなコードと差し替えれば、記事の本文中の見出しだけに適用できるかと思います。
.article h2 {
font-size: 20px;/*文字のサイズ*/
border-top: none;
border-bottom: none;
border-left: 3px solid #4DA1FF;/*左線*/
padding: .5em .7em;/*余白*/
background: rgba(77,161,255,.05);/*背景色*/
color: #272727;
margin-bottom: 15px;
}
.article h3 {
border: none;/*cocoonのデフォルトのデザインを消す*/
position: relative;
padding: 0.25em 0;
}
.article h3:after {
content: "";
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
position: relative;
top: 3px;
}
あと、まだお伝えしたいこともあります。
11/01/2021 8:07 pm
山田さん
ダッシュボードの「外観」→「テーマエディター」とたどると、子テーマの style.css が開くと思います。
その中に、CSSのコードではなく、アドセンスの広告コードが記述されています。
これは、CSSファイルに記述するものではないので、削除しておくことをオススメします。
11/01/2021 8:12 pm
山田さん
h3のコードを少し間違えているようです。
修正しますので、お待ちください。
11/01/2021 8:32 pm
山田さん
間違えたと思ったのですが、どうも合っているようです。
サルワカさんのコードのままだと以下のようになります。
.article h2 {
font-size: 20px;/*文字のサイズ*/
border-top: none;
border-bottom: none;
border-left: 3px solid #4DA1FF;/*左線*/
padding: .5em .7em;/*余白*/
background: rgba(77,161,255,.05);/*背景色*/
color: #272727;
margin-bottom: 15px;
}
.article h3 {
border: none;/*cocoonのデフォルトのデザインを消す*/
position: relative;
padding: 0.25em 0;
}
.article h3:after {
content: "";
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}
h3の下のオレンジ色のラインが見出しの文字と少し近いです。
Topic starter
11/01/2021 8:42 pm
11/01/2021 8:58 pm
山田さん
子テーマstyle.cssのアドセンス広告コードは、消すだけで広告が消えたりしないでしょうか？
Cocoon設定の「広告」タブの「広告コード」のところに、広告コードは設定されていらっしゃいますか？
11/01/2021 9:03 pm
山田さん
以下のコードでもイケそうです。
h3の見出しの文字の下のオレンジ色のラインの位置指定を少し変えています。
一番下の-2pxのところの数値で、文字との空きを調整できるかと思います。
.article h2 {
font-size: 20px;/*文字のサイズ*/
border-top: none;
border-bottom: none;
border-left: 3px solid #4DA1FF;/*左線*/
padding: .5em .7em;/*余白*/
background: rgba(77,161,255,.05);/*背景色*/
color: #272727;
margin-bottom: 15px;
}
.article h3 {
border: none;/*cocoonのデフォルトのデザインを消す*/
position: relative;
padding: 0.25em 0;
}
.article h3:after {
content: "";
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
width: 100%;
position: absolute;
bottom: -2px;
}
This post was modified 3年前 by リフィトリー
11/01/2021 9:08 pm
山田さん
見出しの表示テストは、記事本文内でないと、わかりません。
テスト記事にｈ２とｈ３を適当に設定してみてください。
Topic starter
11/01/2021 9:15 pm
広告コードは空白のままです。
子テーマのstyle.cssに記載していたコードを丸々、広告コードに移せば大丈夫でしょうか？
見出しの動作確認したのですが、トップページのタイトルデザインが消えたのと、投稿でh2の文字がh3と同じになっています。
これはどうしたらいいでしょうか？
11/01/2021 9:31 pm
山田さん
広告コードは空白のままです。
子テーマのstyle.cssに記載していたコードを丸々、広告コードに移せば大丈夫でしょうか？
子テーマのCSSファイルに書かれたアドセンスコードが読み込まれていたとは、ちょっと考えにくいので、もしかしたら、別のとこで、アドセンスのコードを設定されていたりしませんか？
例えば、私は使ったことがないので、よくわからないのですが、Site Kit by Google などのプラグインとか・・
Cocoonの標準的な広告コードの設定方法は、「広告」タブの「広告コード」のところに設定するようになっていたと思います。
11/01/2021 9:34 pm
これでいいでしょうか？
それで、良いです。
ｈ２とｈ３の文字の大きさや、色を変えたい場合は、先ほどのCSSのコードを少し変えて、調整します。
11/01/2021 9:37 pm
山田さん
文字のサイズは、h1が26pxなので、ｈ２は24pxぐらい、h3は、20pxぐらいの方がいいのかもしれません。
トップページのエントリーカードの見出しにもデザインを適用させたい場合は、別途CSSのセレクタを追記する必要があります。
This post was modified 3年前 2回 by リフィトリー
11/01/2021 9:47 pm
山田さん
トップページのエントリーカードの見出しに、記事本文と同じデザインを適用すると文字が大きくなってしまうので、もし、トップページのエントリーカードのタイトルにデザインをしたい場合は、別途デザインを分けて指定した方が良いかもしれません。
Topic starter
11/01/2021 9:55 pm
エントリーカードを違うデザインにする場合は、h1を用いたCSSのコードを追加CSSに貼り付ければ大丈夫そうですか？
11/01/2021 10:00 pm
エントリーカードを違うデザインにする場合は、h1を用いたCSSのコードを追加CSSに貼り付ければ大丈夫そうですか？
例えば、h2とそっくりなデザインでしたら、以下のような指定でイケるかもしれません。
/*エントリーカードの見出しのデザイン*/
.entry-card-title,
.related-entry-card-title {
background-color: rgba(77,161,255,.05);
border-left: 3px solid #4DA1FF;
padding: .5em .6em;
}
Topic starter
11/01/2021 10:12 pm
文字サイズもピクセル変更で解決できました！
エントリーカードもいただいたコード貼り付けで全部正常になりました ?
貴重なお時間の中、解決に協力してくださってありがとうございました！
親切、丁寧で本当に助かりました。感謝です ?
リフィトリー reacted
11/01/2021 10:17 pm
山田さん
アドセンスの自動広告をONにしていると、望まない場所まで広告が表示されてしまいます。
それを防ぐには、Ikumi さんの記事が参考になるかもしれません。
Topic starter
12/01/2021 8:10 pm
ごめんなさい。
h3見出しデザインを写真のデザインに変えたいと思い、.article h3に書き換えたのですが、バグってしまいました。
h3のところを書き換えるだけの単純ではないということでしょうか？
何度も申し訳ないです。
Topic starter
12/01/2021 8:11 pm
変更したいデザインのコードがこちらです。
h1 {
position: relative;
background: #eff4ff;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}
h1:before {
font-family: "Font Awesome 5 Free";
content: "\f041";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #81a1e4;
font-weight: 900;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #4967b4;
}
12/01/2021 8:20 pm
山田さん
サルワカさんのサイトに以下のような注意書きがあります。
旧VerのFontAwesomeを使っているときは
font-family: FontAwesome;に変えて下さい。
Cocoonの設定がFont Awesome 4になっているので、
font-family: "Font Awesome 5 Free";
のところを、
font-family: "FontAwesome";
に変えれば良いような気がします。
This post was modified 3年前 2回 by リフィトリー
固定ページ 1 / 2
次へ
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。