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カスタマイズ依頼

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

画像挿入についての相談
 
共有:
通知
すべてクリア

[解決済] 画像挿入についての相談

7 投稿
4 ユーザー
4 Reactions
3,147 表示
(@kazuaki)
Estimable Member Registered
結合: 7年前
投稿: 192
トピックスターター  

TinyMCE Advancedを使用しているのですが、記事に画像を追加する際にキャプションを仕様しているのですが、2連続でキャプションが入る画像を挿入すると<p>タグが入りません。何かいい方法はありますでしょうか?

例えば、 https://car-repo.jp/blog-entry-bmw-individual-m850i-night-sky.html

な記事など起きています。よろしくお願い致します。


   
タスカム
(@tascam)
Trusted Member Registered
結合: 6年前
投稿: 77
 

2連続でキャプションが入る画像を挿入すると<p>タグが入りません。

画像と画像の間に隙間を開けたいということでしたら、子テーマの style.css に記述されている

.wp-caption{margin:auto;}

が、親テーマの style.css に記述されている

.wp-caption {
    margin: 1em 0;
}

を打ち消していることが原因で、画像と画像の間の隙間がなくなっています。以下、改善案です。

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

子テーマ style.css に記述されている内容を消す、もしくは

.wp-caption {
    margin: 1em auto;
}

に書き換えていただければ改善するはずですが、子テーマ style。css に記述した内容に特に深い理由がないのであれば「消す」という選択でも問題は無いでしょう。

以上、ご参考までに。


   
わいひら reacted
(@kazuaki)
Estimable Member Registered
結合: 7年前
投稿: 192
トピックスターター  

ご返答ありがとうございます。すいません。僕の説明不足もありますが、スタイルシートで隙間を空けるということではなく。タグをきちんと入れたいのですが、クラシックエディター、ビジュアル表示でエンターキーで改行してPタグが入らないので入れたいです。

[caption id="attachment_13974" align="alignnone" width="1400"]<a href="https://car-repo.jp/wp-content/uploads/spacia_2017_03.png"><img class="size-full wp-image-13974" src="https://car-repo.jp/wp-content/uploads/spacia_2017_03.png" alt="SPACIA" width="1400" height="776" /></a> 新型スペーシア オフブルーメタリック× ホワイト2トーンルーフ(XAD)[/caption] [caption id="attachment_13975" align="alignnone" width="1400"]<a href="https://car-repo.jp/wp-content/uploads/spacia_custom.png"><img class="size-full wp-image-13975" src="https://car-repo.jp/wp-content/uploads/spacia_custom.png" alt="SPACIA_custom" width="1400" height="788" /></a> 新型スペーシア カスタム ブリスクブルーメタリック×ブラック2トーンルーフ(CZW)[/caption]

やりたいこと。

<p>[caption id="attachment_13974" align="alignnone" width="1400"]<a href="https://car-repo.jp/wp-content/uploads/spacia_2017_03.png"><img class="size-full wp-image-13974" src="https://car-repo.jp/wp-content/uploads/spacia_2017_03.png" alt="SPACIA" width="1400" height="776" /></a> 新型スペーシア オフブルーメタリック× ホワイト2トーンルーフ(XAD)[/caption]</p> <p>[caption id="attachment_13975" align="alignnone" width="1400"]<a href="https://car-repo.jp/wp-content/uploads/spacia_custom.png"><img class="size-full wp-image-13975" src="https://car-repo.jp/wp-content/uploads/spacia_custom.png" alt="SPACIA_custom" width="1400" height="788" /></a> 新型スペーシア カスタム ブリスクブルーメタリック×ブラック2トーンルーフ(CZW)[/caption]</p>

よろしくお願いします。


   
タスカム
(@tascam)
Trusted Member Registered
結合: 6年前
投稿: 77
 

こちらこそ、お手間を取らせてしまい申し訳ございません。
ご質問ですが、私では知識不足のためお答えいたしかねます。他の方の回答をお待ちくださいますようお願いいたします。


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

WordPress公式テーマで、captionショートコードを連続入力しても、同じ用になるようです。

それ自体、WordPressの仕様ではないでしょうか。

変更する方法としては、the_contentをフィルターフックして、本文内容を置換するしかないかもしれません。
詳細な方法については、サポート対象外のものにもあるようにPHP編集となるので、自前で行うか、クラウドソーシングに依頼いただければと思います。


   
タスカム reacted
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
 

WordPressのcaptionショートコードは、旧HTMLでは

https://notepad.pw/ige1p5iz

HTML5では

<figure ...>
<img ... />
<figcaption class="wp-caption-text">caption</figcaption>
</figure>

と記述されるようになっています。

 

タグをきちんと入れたい

に関して、どのような意図かにもよりますが、少なくともキャプション付き画像のHTML5における標準的な記述からは、pタグを入れるのは一般的ではないことを補足しておきます。


   
(@kazuaki)
Estimable Member Registered
結合: 7年前
投稿: 192
トピックスターター  

ご回答ありがとうございます。ご参考にさせて頂きます。


   
共有:

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

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

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

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

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

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

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

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