サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2019年6月23日 11:22
スキンを「Bizarre-food（ブルーカレー） 」に変更すると、固定ページの上にアイキャッチ画像の中にページタイトルが入ったエリアが以下のページのように表示されるようになりました。
トップページ
しかし、アイキャッチ画像の中にページタイトルが入ったエリアが表示されない固定ページがあり、その固定ページの種類を見ると、「投稿ページ」になっていました。
以下のページがアイキャッチ画像の中にページタイトルが入ったエリアが表示されないページになります。
ブログページ
なので投稿ページにもアイキャッチ設定を施したいのですが、どのようにすればアイキャッチ設定ができるでしょうか？
ちなみにWordPressの「固定ページを編集」から「アイキャッチ画像」の項目を設定しましたが、依然アイキャッチ画像の中にページタイトルが入ったエリアは画面上に表示されませんでした。
2019年6月23日 20:19
申し訳ないですが、書いてあることの意味がちょっとわからないです。
出来れば、キャプチャ画像を交えて説明していただけると助かります。
キャプチャ画像で、どの部分がどのようにおかしいかとか、「固定ページを編集」で、アイキャッチをどのように設定しているかとか。
テキストだと、どうしても曖昧な表記になるので、画像で見せていただけると助かります。
2019年6月23日 20:21
こちらのページでいう、ポストの画像がタイトルとかぶらないということであれば、ポストの画像は本文中の画像でアイキャッチではないので、仕様通りの表示になっていると思います。
https://hapisora.com/
トピックスターター 2019年6月23日 21:18
添付画像の赤丸で囲った部分が添付画像のように表示されていることが望ましいですが、この部分が表示されていないページがあります。
トピックスターター 2019年6月23日 21:21
このページが表示されていないページなのですが、このページの種類が投稿ページになっていました。
なので、投稿ページでも1枚目の添付画像の赤丸で囲ったようなエリアを表示させたいということがこの質問の趣旨になります。
2019年6月23日 22:20
インデックスページは、WordPressの仕様上アイキャッチは表示されないと思います。
このようなページに表示させたいということですよね？
https://wp-cocoon.com/?cat=0
https://hapisora.com/blog
こちらのページは、WordPressの表示設定にある「ホームページの表示」項目で「投稿ページ」に設定されているページなのではないでしょうか？
トピックスターター 2019年6月23日 22:28
はい、そのようなページに表示させたいのですが、これはWordPressの仕様上不可能なのですね。
WordPressの表示設定で確認したところ、アイキャッチが表示されていないページが投稿ページに設定されていました。
わいひら reacted
2019年6月23日 23:47
.public-pageのmain前にCSSで装飾すれば無理やりでもそれっぽい風に出来ると思いますよ。
ただアイキャッチ自体存在しないページなので、任意の文字列を入れて、その背景に好きな画像を置けばイケそうかもです。
始めのページだけ指定できる（class属性）指定方法はないっぽいですけど。
トピックスターター 2019年6月24日 07:14
cssで装飾すればそれっぽくできるのですね。
WordPressの標準機能でできないことが分かったので、cssでやってみようと思います。
ありがとうございます。
2019年6月24日 07:40
.public-page #main:before {
content: "記事一覧"; /*文字は任意*/
display: block;
text-align: center;
font-size: 1.5em;
font-weight: bold;
color: #000; /*opacityの影響で文字色を真っ黒に*/
text-shadow: 1px 1px 1px #fff; /*背景画像によって文字が見にくい場合*/
background: url( https://hapisora.com/wp-content/uploads/2019/03/6adcba16cf75782feed3b81cc719f653.png ) no-repeat top center #fff;
background-size: contain;
background-position: center;
padding-top: 100px;
height: 120px;
opacity: 0.5;
}
https://gyazo.com/918821d805b7eed80e90c90a5468dbbe
https://gyazo.com/20d304b7a26fcc03543cbb23ee0cf16d
適当ですが、こんなイメージにしてみましたが、お好きなようにカスタマイズを行ってくださいね。
わいひら reacted
トピックスターター 2019年6月24日 22:04
おぉ、自分のやりたいようなカスタマイズに近づきました！
ありがとうございます！
ご提示いただいたコードを元に自分の方でも色々といじって理想の形に近づけてみます！
ありがとうございますmm
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。