サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年10月20日 02:05
記事タイトルのデザインを変更するのにインターネットで色々調べてやったのですがタイトルのデザインがアイキャッチと被ってしまうのでアイキャッチ画像の位置を下にずらして余白を作りたいです。
方法が分かりませんのでよろしくお願いします。
アドバイスの方よろしくお願いします。
2020年10月20日 09:38
前略、とし さん
CSSのコードの編集を行うときは、文字コードをUTF-8（BOMなし）でプレーンテキストを扱うことができるテキストエディターをお使いになることをオススメします。
https://wp-cocoon.com/community/postid/38100/
子テーマのCSSの68行目と104行目に目視できない余分な文字（BOM？）が入っています。
これが入っていますと、コードが適用されない場合があります。
68行目
#header-container #navi a{
 color:#0000; /* 文字色 */
padding:0.8em 1em;
}
黄色で示したところです。
104行目
@media screen and (max-width: 1030px){
.navi-in > .menu-header{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
overflow-x: scroll;
white-space: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
#header-container #navi a{
font-size:0.8em;
 padding: 1em 3em; /* 余白 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after{
display:none;
}
}
同じく黄色で示したところです。
フォーラムのPreタグに貼り付けるとインデントが無くなってしまうので、少し見た目が違うかもしれません。
わいひら reacted
2020年10月20日 09:42
とし さん
また、記事のタイトルだけデザインを変更する場合は、CSSのセレクタは以下のようにします。
.article h1 {
プロパティ:値;
}
ｈ１だけですと、サイトタイトルなど、別の箇所にも適用されてしまう恐れがあります。
わいひら reacted
2020年10月20日 09:56
とし さん
記事タイトルのマージンは、デフォルトで以下のような指定になっているようです。
.entry-title, .archive-title {
font-size: 26px;
margin: 16px 0;
line-height: 1.3;
}
これは、上方向と下方向のマージンを16pxにする、という指定です。
ですので、下方向のマージンを増やすには、子テーマのCSSに以下のように記述して上書きすればよいのではと思います。
.entry-title, .archive-title {
margin-bottom: 25px;
}
CSSのmarginとは？paddingとは？余白の指定方法まとめ
WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方
This post was modified 4年前 by リフィトリー
わいひら reacted
Topic starter
2020年10月20日 13:09
@leafytree さん
こんにちは。お忙しい中ご丁寧にご説明の方ありがとうございます。
コードエディターの設定に何かミスがあったかもしれません。その点再確認してみます。
昨日自分でも色々試してごちゃごちゃしちゃったので、手元にあるバックアップでデータをプレーンな状態に戻していちど確認してみます。
本日中に再度連絡させていただきます。
2020年10月20日 18:24
@とし さん
今戻って、PCで見てみたら、BOMのところが「？」になって残っているようです。
正しく設定したテキストエディターで、修正してから、貼り付け直してみてください。
あと、
h1:after {
のセレクターも、
.article h1:after {
のように、.article を先頭に付けて、半角の空白を入れます。
以下は、見本です。
.article h1:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}
見出しの吹き出し口のところだろうと思います。
まだ、見てくださっているかな・・・？
This post was modified 4年前 2回 by リフィトリー
わいひら reacted
Topic starter
2020年10月20日 21:11
@leafytreeさん
ありがとうございます。
治ってますかね…確認お願いします。
2020年10月20日 22:08
@とし さん
.article h1:after { のところは、合っていますが、また余計な文字や全角の空白が入ってしまっています。
画像を添付しますので、行数等を参照して該当部分を探してください。
テキストエディターは何をお使いになられているのでしょう？
わいひら reacted
2020年10月20日 22:13
@とし さん
CSSのコードの編集を行うときは、文字コードをUTF-8（BOMなし）でプレーンテキストを扱うことができるテキストエディターをお使いになることをオススメします。
わいひら reacted
2020年10月22日 00:45
@kaitlynduff
(トピックの内容とはズレますが)
「画素数」とは解像度(縦のサイズ、横のサイズ)のことで合っているでしょうか。
であれば大抵の画像編集ソフトにはリサイズの機能が付いていると思います。
ソフトを使用せず簡単に、ということであれば以下のようなサイトであればオンラインで手軽にリサイズできます。
https://www.iloveimg.com/ja/resize-image
Wordpressの機能でということであれば、設定>メディア>画像サイズで画像をアップロードした際のサイズを指定できるのが近いでしょうか…？
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。