サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2020年4月25日 18:29
サイトurl： https://www.ginger-pepper.net/
お世話になります。
Cocoon設定ー画像ーアイキャッチの表示で設定できる「本文上のアイキャッチの表示」ですが、特定の古い記事には適用させず、これから投稿する新しい記事のみアイキャッチを表示させたいと思っています。
恐縮ですがどのようにすればよいかお教えください。
Cocoonを使わせていただき、Stinger5で構築した470記事ほどあるブログを移設しました。
せっかくなので本文上のアイキャッチ機能を使いたのですが、既存の記事はレイアウトや画像の大きさの関係でアイキャッチを使いたくありません。
よろしくお願いします。
2020年4月25日 22:27
せっかくなので本文上のアイキャッチ機能を使いたのですが、既存の記事はレイアウトや画像の大きさの関係でアイキャッチを使いたくありません。
これの詳細を実際のページのURLのページとともに説明していただければ幸いです。
トピックスターター 2020年4月26日 07:16
返信ありがとうございます。以下捕捉します。
参考url： https://www.ginger-pepper.net/camper/camper-recommend-howto_03-2.html
stingerで書いていた過去記事は、
H1 タイトル
画像A
H2 サブタイトル
本文
サムネイルは画像Aという構成でした。
このため、Cocoonでアイキャッチの表示をonにすると、
H1 タイトル
アイキャッチの画像A
もともとの画像A
目次
H2 サブタイトル
と表示されてしまい、同じ画像がすぐに連続してしまいます。
もともとの画像Aを本文中から削除すれば良いのですが、作業が面倒なことからうまく記事ごとに制御できないものかお尋ねした次第です。
画像の大きさについてですが、古い記事はwidth480px程度のものも多く、Cocoonにアイキャッチをカラム幅に引き延ばす機能があるのは承知していますが、いかがなものかと思っています。
なお、過去記事はメディアファイル内に大きな画像がなく、再度画像を見つけてきてアップロードをする必要があり、負担が大きいと感じています。
現在の表示だと、H1タイトルのすぐ下にSNSボタンがあり目立ちすぎるので、少なくとも新しい記事からはアイキャッチ表示を有効にし、古い記事は当面レイアウトを変えず、アクセスの多いページから徐々に直せていけたらベストなのですが。
お手数をおかけして申し訳ありませんが、よろしくお願いします。
2020年4月26日 08:37
Cocoon設定ー画像ーアイキャッチの表示で設定できる「本文上のアイキャッチの表示」ですが、特定の古い記事には適用させず、これから投稿する新しい記事のみアイキャッチを表示させたいと思っています。
設定を有効にしてお待ちいただけますか❦
参考url： https://www.ginger-pepper.net/camper/camper-recommend-howto_03-2.html
2020年4月26日 17:19
Cocoonには、覚えきれないほどのオプションがあり、数年使っていても、こんな機能もあったのか・・、と私は、気づくことも多いです。
アイキャッチを使うには、「アイキャッチの自動設定を有効にする」方法もありますが、自動設定は使わずに、個別の記事の編集画面で、設定するこもできるみたいです。
つまり、新しい記事を書くときに、記事個別にアイキャッチ画像を設定すれば良い訳です。
そうすれば、過去の記事には影響しないのではないかと思います。
また、「アイキャッチをカラム幅に引き伸ばす」のオプションをOFFにすることもできるみたいです。
さらにまた、アイキャッチ下に表示される、SNSシェアボタンも非表示にすることも可能です。
私は、アイキャッチ画像は、カラム幅ちょうどでアップしていますが、過去のフォーラムのトピックを見ると、カラム幅の２倍程度のサイズがいいみたいです。
アイキャッチの設定は、Cocoon設定の「画像」というタブで行え、SNSシェアボタンの設定は、やはり、Cocoon設定の「SNSシェア」タブで操作できます。
それぞれ、設定を変えたときは、「変更をまとめて保存」のボタンをクリックして設定を保存して確定します。
トピックスターター 2020年4月26日 18:26
2020年4月26日 18:34
@たらばかに男 さん
過去の記事で画像が重複して表示されているようなので、もしかしたら、「アイキャッチ自動設定を有効にする」にチェックが入っているのではないかと、推測した次第です。
もし、入っていないようでしたら、私の推測ちがいということなので、ごめんなさい。
2020年4月26日 18:50
@たらばかに男 さん
逆に、もし、「アイキャッチ自動設定を有効にする」にチェックが入っていますと、本文中に最初に出てくる画像がアイキャッチとして自動的に設定されてしまうので、画像がダブって表示されてしまうかと思われます。
2020年4月26日 19:43
このため、Cocoonでアイキャッチの表示をonにすると、
H1 タイトル
アイキャッチの画像A
もともとの画像A
目次
H2 サブタイトル
と表示されてしまい、同じ画像がすぐに連続してしまいます。
もともとの画像Aを本文中から削除すれば良いのですが、作業が面倒なことからうまく記事ごとに制御できないものかお尋ねした次第です。
これだとしたら、全ての過去の最初の画像を非表示にするということでも良いのではないでしょうか。
画像サイズが気になっておられるようですが、これは書かれている通りアクセスの多いページのアイキャッチを修正するというので、ある程度訪問者が見るものの8割～9割ほどは制御出来るかと思います。
例えば、以下のようにCSSを子テーマのstyle.cssに追記すると、本文中の最初の「キャプションつき画像」と「画像」がある場合は、非表示にできるかと思います。
.wp-caption:first-of-type,
img[class*="wp-image-"]:first-of-type {
display: none;
}
2020年4月26日 19:50
現在の表示だと、H1タイトルのすぐ下にSNSボタンがあり目立ちすぎるので、少なくとも新しい記事からはアイキャッチ表示を有効にし、古い記事は当面レイアウトを変えず、アクセスの多いページから徐々に直せていけたらベストなのですが。
SNSボタンも気になるということであれば、上に書いた方法を適用して、アクセスの多いものからアイキャッチの大きさを変更するというのでも良いような気がします。
新しい記事からアイキャッチを表示する方法を採用した場合、古い記事の「SNSボタン」位置の問題は改善されないので。
トピックスターター 2020年4月26日 21:42
わいひら 様
お忙しいところご回答ありがとうございます。
なるほど、cssレベルで"最初"の画像を非表示にすることができるのですね。
目から鱗で勉強になりました。
ただし、これだと元々サムネイルに設定されているアイキャッチ画像が小さいため、間抜けなレイアウトもしくは無理に拡大された粗いアイキャッチ画像になりはしないか危惧しています。（サムネイルの画像設定のやり直しが必要）
とはいえ、最初の画像を表示しないやり方をお教えいただきましたので、当サイトでどのようなやり方、手順がベストかもう一度考えてみます。（頑張って画像を差し替えます。）
ちなみに、追加の質問のようになってしまい恐縮ですが、 display: none の多用はグーグル先生的に問題はないのでしょうか。大昔のうっすらした記憶ですが、なにか良くないような話を聞いた覚えがあるような気がしましたので。
いずれにいたしましても、ご多忙の中、ご回答ありがとうございました。またお手を煩わすことがあるかもしれませんが、今後ともよろしくお願いします。
2020年4月26日 22:37
@yhira さん
.wp-caption:first-of-type,
img[class*="wp-image-"]:first-of-type {
display: none;
}
上記のCSSについて質問なのですが、たらばがに男さんが既に新しくCocoonで書かれた記事は、画像がダブっていないようなのですが、その場合でも、適用されてしまうということはないのでしょうか？
例えば、以下の記事で、お肉の画像が非表示になってしまうというような・・・
https://www.ginger-pepper.net/trip/sfc/ana-status-extension.html
アイキャッチの設定方法が統一されていないようなので。
トピックスターター 2020年4月26日 23:09
@leafytree さん
たらばかつ男です。現在の当ブログは、かうたっくさんの指摘で「本文上のアイキャッチの表示」をonにしています。
それに伴い、最近の記事（注目され多くのアクセスが見込まれる記事）は、「本文上のアイキャッチの表示」使用に合わせて、サムネイルに指定した画像を本文中にには使用しておりません。そのため、画像のダブりはありません。
しかし、古い記事は、本文最初の画像＝サムネイル画像のため、ダブりが発生しています。（まだ、わいひらさんに教えていただいたcssは使ってません）
なお、ご指摘のとおり、わいひらさんに教えていただいたcssを使うと、今後の新しい記事には、display: none 用の表示されないのを前提とした「捨て画像」を用意しなければならないのかもと、私も感じたところです。
皆様に教えていただいたことも含め、どう対処するか考えます。
ご指摘ありがとうございました。
2020年4月26日 23:17
@たらばかに男 さん
なるほど、Cocoon設定の「本文上にアイキャッチを表示する」の下の方にある、「アイキャッチの自動設定を有効にする」にチェックを入れていなくても、過去記事で「サムネイル画像」に設定されていたものがダブって表示されているという訳だったのですね。
「Stinger5」を使ったことがないため、そのあたりの理解ができていませんでした。
「捨て画像」まで、ご検討されておられたのでしたら、まったく余計な心配でした。
2020年4月27日 20:26
ただし、これだと元々サムネイルに設定されているアイキャッチ画像が小さいため、間抜けなレイアウトもしくは無理に拡大された粗いアイキャッチ画像になりはしないか危惧しています。（サムネイルの画像設定のやり直しが必要）
これは前回書いたように、アクセスの多い記事だけでも、高解像度の画像に差し替えることである程度対応できるかと思います。
それが面倒となれば、それまでですが。
2020年4月27日 20:30
ちなみに、追加の質問のようになってしまい恐縮ですが、 display: none の多用はグーグル先生的に問題はないのでしょうか。大昔のうっすらした記憶ですが、なにか良くないような話を聞いた覚えがあるような気がしましたので。
1ページにつき1つの要素を非表示にすることが多用になるとは僕は思いません。
Googleについて詳しいことはわかりません。もしそのようなことが書かれているページのURLがありましたら、貼り付けていただければと思います。
「多用」の詳細を見てみないとちょっと何とも言えないです。
ただ、いずれにせよ冒頭で書かれた方法をCSSで行ったとしても、同じことかと思います。
PHPを編集すれば可能だとは思いますが、PHPの編集方法までサポートとなると負担が大きすぎるので、当フォーラムではサポート外とさせていただいています。
https://wp-cocoon.com/not-supported/
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。