Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

投稿ページのアイキャッチ設定について
 
共有:
通知
すべてクリア

[解決済] 投稿ページのアイキャッチ設定について

11 投稿
3 ユーザー
3 Reactions
3,502 表示
 taro
(@taro)
Active Member
結合: 6年前
投稿: 17
Topic starter  

スキンを「Bizarre-food(ブルーカレー)  」に変更すると、固定ページの上にアイキャッチ画像の中にページタイトルが入ったエリアが以下のページのように表示されるようになりました。
トップページ

しかし、アイキャッチ画像の中にページタイトルが入ったエリアが表示されない固定ページがあり、その固定ページの種類を見ると、「投稿ページ」になっていました。
以下のページがアイキャッチ画像の中にページタイトルが入ったエリアが表示されないページになります。
ブログページ

なので投稿ページにもアイキャッチ設定を施したいのですが、どのようにすればアイキャッチ設定ができるでしょうか?
ちなみにWordPressの「固定ページを編集」から「アイキャッチ画像」の項目を設定しましたが、依然アイキャッチ画像の中にページタイトルが入ったエリアは画面上に表示されませんでした。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 

申し訳ないですが、書いてあることの意味がちょっとわからないです。
出来れば、キャプチャ画像を交えて説明していただけると助かります。

キャプチャ画像で、どの部分がどのようにおかしいかとか、「固定ページを編集」で、アイキャッチをどのように設定しているかとか。

テキストだと、どうしても曖昧な表記になるので、画像で見せていただけると助かります。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 

こちらのページでいう、ポストの画像がタイトルとかぶらないということであれば、ポストの画像は本文中の画像でアイキャッチではないので、仕様通りの表示になっていると思います。
https://hapisora.com/


   
 taro
(@taro)
Active Member
結合: 6年前
投稿: 17
Topic starter  

添付画像の赤丸で囲った部分が添付画像のように表示されていることが望ましいですが、この部分が表示されていないページがあります。


   
 taro
(@taro)
Active Member
結合: 6年前
投稿: 17
Topic starter  

このページが表示されていないページなのですが、このページの種類が投稿ページになっていました。

なので、投稿ページでも1枚目の添付画像の赤丸で囲ったようなエリアを表示させたいということがこの質問の趣旨になります。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 

インデックスページは、WordPressの仕様上アイキャッチは表示されないと思います。
このようなページに表示させたいということですよね?
https://wp-cocoon.com/?cat=0

https://hapisora.com/blog
こちらのページは、WordPressの表示設定にある「ホームページの表示」項目で「投稿ページ」に設定されているページなのではないでしょうか?


   
 taro
(@taro)
Active Member
結合: 6年前
投稿: 17
Topic starter  

はい、そのようなページに表示させたいのですが、これはWordPressの仕様上不可能なのですね。
WordPressの表示設定で確認したところ、アイキャッチが表示されていないページが投稿ページに設定されていました。


   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

.public-pageのmain前にCSSで装飾すれば無理やりでもそれっぽい風に出来ると思いますよ。

ただアイキャッチ自体存在しないページなので、任意の文字列を入れて、その背景に好きな画像を置けばイケそうかもです。

始めのページだけ指定できる(class属性)指定方法はないっぽいですけど。


   
 taro
(@taro)
Active Member
結合: 6年前
投稿: 17
Topic starter  

cssで装飾すればそれっぽくできるのですね。
WordPressの標準機能でできないことが分かったので、cssでやってみようと思います。
ありがとうございます。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 
.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
 taro
(@taro)
Active Member
結合: 6年前
投稿: 17
Topic starter  

おぉ、自分のやりたいようなカスタマイズに近づきました!
ありがとうございます!
ご提示いただいたコードを元に自分の方でも色々といじって理想の形に近づけてみます!

ありがとうございますmm


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました