サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
09/07/2018 12:24 am
自由度が高く、フォーラムもあってコクーンテーマに本当に感謝しております。
質問なのですが、記事内の画像を横幅いっぱいに表示させることは可能でしょうか。
Yahooニュースなどの大手サイトで左右に余白なく画像を表示されているのを見かけまして、実装してみたく色々調べたのですが、うまくできず、、、
こちらの記事を参考にしてはみたのですが、ちょっとうまくいかず。
https://moriawase.net/img-space-0
記事を包んでいる要素っていうのは.entry-contentになるのでしょうか。
https://baito-matome.xyz/%E3%83%86%E3%82%B9%E3%83%88%EF%BC%92/
こちらのページが私のページになります。
すみませんが、よろしくお願いいたします。
Topic starter
10/07/2018 10:13 am
囲み枠がありになっていたので、なしにしてみましたが、まだ左右の余白はあるようです。
記事内の画像のみmarginを調整していくのでしょうか。
10/07/2018 1:23 pm
1 番簡単な方法は、まず HTML を下記のように書きます。
<p class="max-img">
ここに画像を挿入
</p>
そして、 CSS を下記のように指定します。
@media screen and (max-width: 480px) {
.max-img {
margin: 1em -10px;
}
}
わいひら reacted
Topic starter
10/07/2018 3:37 pm
Akiraさん、ありがとうございます。
左右の余白を無くし表示することができました。
jQuery で自動的にクラス名をつけたい場合は以下の内容で良いのでしょうか。
jQuery( function($) {
$('.entry-content>p>img').parent().addClass('max-img');
});
10/07/2018 4:00 pm
こんにちは。
functions.phpに書いて、画像だけpタグで囲わないように
置き換えするのもありですよ。
▼ご参考までに
http://kachibito.net/wp-code/stop-wordpress-wrapping-images-in-a-p-tag
ラクな方で試したくださいませ。
わいひら reacted
10/07/2018 4:15 pm
画像を挿入される際に、「メディアを追加」の「添付ファイルの表示設定」で「リンク先」を「なし」にされる場合には、その jQuery で大丈夫です。
「リンク先」を「メディアファイル」などにされる場合には、下記の jQuery に変更します。
jQuery( function($) {
$( '.entry-content > p > a > img' ).parent().parent().addClass( 'max-img' );
});
ただし、いずれであっても JavaScript が使えない AMP では、 class 名が付きません。
記事数によりますが、最も良いのは手動での class の追加です。
わいひら reacted
Topic starter
11/08/2018 3:32 am
みなさん、教えていただきありがとうございました。
手動でクラス追加で対応しようと思います。
ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。