現在「イノセンス」スキンを適用中です。

インデックスのアイキャッチ画像をコンテンツ幅いっぱいに表示させたい | カスタマイズ相談 | Cocoon フォーラム

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

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

相談内容:

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

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

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

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

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

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

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

スポンサーリンク
インデックスのアイキャッチ画像をコンテ...
 
共有:
通知
すべてクリア

[解決済] インデックスのアイキャッチ画像をコンテンツ幅いっぱいに表示させたい


angepasse
(@angepasse)
New Member
結合: 2週間前
投稿: 2
Topic starter  

初めてのワードプレスですが、こちらで提供して下さるテーマのお陰で楽しくサイト作りを進めさせていただき感謝しております。

質問ですが、

インデックス表示「大きなカード」にしていますが、すべての「アイキャッチ画像」をカラムの「コンテンツ幅(※707に設定しています)」いっぱいに表示させることは可能でしょうか。
本文中も同様にコンテンツ幅いっぱいに表示される形を希望しております。
ちなみに、アイキャッチ画像はすべて16:9の画像を使用する予定です。

**

ちなみに、cocoon設定の「画像」から「アイキャッチをカラム幅に引き伸ばす」にチェックを入れても、はコンテンツ幅ではなく、本文幅で表示されるのですが、これはエラーではなく、カラム幅=本文幅ということで宜しいのでしょうか。

初めての質問になります。お力お貸しいただけましたら大変有難いです。
どうぞ、宜しくお願いいたします。


mk2
(@mk2_mk2)
Reputable Member
結合: 1か月前
投稿: 367
 

angepasseさん

只今スマホからですので、調べることは厳しいですが。

おそらく反映されていないのではなく、仕様通りと思われます。

Cocoonではコンテンツ余白幅を設定できるようになっており、その最小値は10pxのようです。

ただ、子テーマのfunctions.phpに追記することで、余白幅をゼロにすることは、できるようです。

過去にそのようなご質問があったようです。

メインカラム、コンテンツ余白幅を0pxにしたい

https://wp-cocoon.com/community/postid/26329/

それだけで、ご要望通りになるかは分かりませんが、まずはお試しいただければと。

 

別件ではございますが、フォーラムのガイドラインをご一読いただけますと、より円滑に進んでいくと思いますので、ご協力お願い致します。


わいひら, angepasseYamachan11 件のいいね!
リフィトリー
(@leafytree)
Illustrious Member
結合: 2年前
投稿: 5096
 

前略、angepasse さん

Cocoon設定の各設定に記載されている名称自体も統一されていないのかもしれません。

 

一応、Cocoon設定の「カラム」設定のところでは、以下のような各部の呼び名を使っているようです。

 

Cocoon設定の「カラム幅変更」で変わる場所の説明。

https://wp-cocoon.com/column-settiongs/

 


わいひらangepasse 件のいいね!
リフィトリー
(@leafytree)
Illustrious Member
結合: 2年前
投稿: 5096
 

angepasse さん

ただ、各部の名称も文字だけでは、齟齬が生じる場合が多々ありまして、トップページのエントリーカードに表示される画像は、フォーラムでは、インデックスカードの「サムネイル画像」と呼んだりしています。

 

それに対して記事本文の一番上に表示される画像を、このフォーラムでは「アイキャッチ画像」と呼んだりしています。

 

ただ前述しましたとおり、言葉のやり取りだけですと、誤解が生じることがありますので、お差し支えがなければ、フォーラム冒頭の案内にありますとおり、対象ページのURLをご提示いただき、該当部分のキャプチャ画像に赤字等で場所を示していただいたものを「参照」ボタンから添付していただければと思います。

 

サイトが、ローカルのテスト環境等の場合は、該当部分のキャプチャ画像に赤字等で場所を示していただいたものを添付していただければと思います。

 

反映されないという「アイキャッチをカラム幅に引き伸ばす」は、「アイキャッチ画像をコンテンツ幅に引き伸ばす」の間違いかもしれません。

 

This post was modified 2週間前 2回 by リフィトリー

angepasse 件のいいね!
リフィトリー
(@leafytree)
Illustrious Member
結合: 2年前
投稿: 5096
 

angepasse さん

Webサイト各部の名称で、どこをどのように呼ぶか、ということの共通認識ができるまで、言葉のやり取りを繰り返すより、実際のWebサイトのキャプチャ画像で示していただくのが一番良い方法かと思います。

 

実際のWebサイトが見られれば、なお、わかりやすくなるかと思います。

This post was modified 2週間前 2回 by リフィトリー

angepasse 件のいいね!
リフィトリー
(@leafytree)
Illustrious Member
結合: 2年前
投稿: 5096
 

angepasse さん

例えばですが、間違っているかもしれませんが、例としては、以下のような感じです。

 


わいひらangepasse 件のいいね!
リフィトリー
(@leafytree)
Illustrious Member
結合: 2年前
投稿: 5096
 

angepasse さん

Cocoonの「コンテンツ余白幅」は、様々な幅の端末、例えばタブレットなどで表示した際にも、表示のバランスがとれるように、工夫して設計されているようです。

 

ですので、ブラウザの幅を広げたり縮めたりするか、デベロッパーツールのモバイル表示のエニュミレータ等を利用して、どのような端末でもバランスよく表示されるかを含めて考慮した方が良いかもしれません。

 


わいひら, angepasseYamachan11 件のいいね!
angepasse
 angepasse
(@angepasse)
ゲスト
結合: 2週間前
投稿: 2
 

mk2様、リフィトリー様。
質問に反応して下さり、丁寧なご対応に心から感謝申し上げます。

希望していることは、リフィトリー様が「例えば」で挙げてくださった通りです。

アイキャッチに指定した画像のみを元画像と同じ比率で
横幅いっぱいに表示させたいと考えております。

----------------

mk2様に教えていただいた過去のご質問
「リフィトリー様メインカラム、コンテンツ余白幅を0pxにしたい」
https://wp-cocoon.com/community/postid/26329/

試しに、こちらにある通りfunctions.phpに追記したのですが、当方の環境では
なぜか何も反応せず、変わりませんでした。
(ブラウザのキャッシュも数回クリアし、PCの再起動も試みました)

----------------

もし、希望するようなカスタマイズが可能であれば
ご教示いただけましたら幸いです。
どうぞ、宜しくお願いいたします。

***

ちなみに、現状、コンテンツ幅707px、コンテンツ余白幅47pxに設定しております。
サイトは http://birthdaytarot.net/です。


mk2
(@mk2_mk2)
Reputable Member
結合: 1か月前
投稿: 367
 

angepasseさん

どうやらゼロでは上手くいかないようです。

1で試してください。

function get_main_column_padding() {
    return 1;
}

 

投稿ページは、これでご希望通りになると思います。

トップページのエントリーカードは、カード自体にpaddingがありますので、ご希望とは少し違うかも知れません。

 

【追記】

本文の幅は、そのままがご希望なんですね。
となると、上記では両方の余白がなくなってしまうので、ご希望どおりではないですね。

 

 


わいひらangepasse 件のいいね!
mk2
(@mk2_mk2)
Reputable Member
結合: 1か月前
投稿: 367
 

angepasseさん

ちょっと良い方法が思いつきませんので、他の方のお返事をお待ちください。

上記のようにfunctions.phpで、メインカラムの余白を1pxにはできると思います。
ただ、メインカラムには、アイキャッチや本文だけではなありませんから、そのすべての余白が1pxになります。

本文のエリアでpaddingを指定すれば、angepasseさんのご希望とおりになる気はしますが、本文の下には、更に他のモノも表示されているはずです。

それらの余白をどう考えるのかによって、指定する箇所が更に増えていくではないかと思います。

 

そうではなく、アイキャッチだけを大きくすることも可能だとは思います。

ただ、その場合は、要素からはみ出しているという指摘をGoogleなどから受けてしまう気がします。

ですので、私が思いついた方法は書き込まないことにします。

 

と、ここまで書いて思いました。

私が今まで書いたのは、投稿ページのことです。

angepasseさんがご提示になったのは、トップページのイメージですね。
となると、話しがまた別になってきそうです。

 

すみません、ちょっと頭がこんがらがってきました。

私がいろいろ書いてしまいましたが、それだけ影響があって、angepasseさんがそれを1つ1つどうしたいのかということを、かなり詳細にお伝えいただく必要があるかも知れません。

私が細かいことを気にし過ぎている気もしますし、やはりご本人のご希望がどうであるか、だと思いますので。

一旦、functions.phpの方法をお試しいただいて、どれくらいご納得していただけるかをお試していただいて、ご希望を詳細にお伝えいただくのが良い気がします。

functions.phpの方法では、トップページ、投稿ページ、固定ページ、カテゴリーページ、アーカイブページなどなど、すべてに影響が出ると思います。

 

長々と混乱気味に書いてしまい、申し訳ありません。


わいひらangepasse 件のいいね!
Yamachan11
(@yamachan11)
Estimable Memberサイト
結合: 1年前
投稿: 201
Yamachan11 - FacebookYamachan11 - Twitter
 

(@angepasse) さん

 

ごくごく、シンプルな方法で

本文の前に、もう一度画像ブロックを置き、

その画像を、アイキャッチと同じ画像(元々のサイズ)を指定する

 

では、いかがですか?

 

 

This post was modified 2週間前 by Yamachan11

わいひらangepasse 件のいいね!
angepasse
 angepasse
(@angepasse)
ゲスト
結合: 2週間前
投稿: 2
 

>mk2様

お早いご丁寧な対応に感謝いたします。
早速、教えていただいたコードを書き込んだところ、
本文の幅については、画像も本文も空白なしで設定することが出来ました。

私がこれまで書き込んだ内容に問題があって動作しないのではと焦っていたので
コードが反映され、安心できました。

――

»「googleから要素がはみ出しているという指摘」

おっしゃる通りです。
他のブログで、そのような指摘を受けたことがあります。
強引に希望通りに出来たとしても、どんな弊害が生じるか分かりませんよね。

――

»私が細かいことを気にし過ぎている気もしますし、

とんでもないです。無償でこのように丁寧なご回答をいただけて
感激しております。
生じ得る問題点についても、ご経験からアドバイスいただき大変有難いです。
本当にありがとうございます!

-----------------------------------

>Yamachan11様

ご教示くださった方法で画像を設置しましたがサイズは変わらず、でした。
ブロックエディターを使用していない為、操作に慣れておらず、もしかしたら操作方法が
他にあるのかもしれませんが。
ご丁寧な提案に感謝いたします。

***

とても自由度の高いcocoonですが、トップページにおいて
インデックス幅いっぱいのアイキャッチのサイト様をほとんどお見掛けしないので、
私のような初心者には、かなり敷居の高いカスタマイズなのではないかと、
思い知っております。
ですので、現状で有難く使用させていただく事にいたします。

ご回答下さった方々に心よりお礼申し上げます。


mk2, わいひらYamachan11 件のいいね!
共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年8ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2021/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年6ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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