サイドバーでスキン動作を確認できます。

画像挿入についての相談 | カスタマイズ相談 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。

  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ環境情報とともに書き込んでいただけると助かります

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
Share:

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

  RSS

kazuaki
(@kazuaki)
Trusted Memberサイト
参加: 1年 前
投稿: 89
2019年4月3日 00:35  

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

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

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


Thanks!
(@thanks)
Trusted Member
参加: 5か月 前
投稿: 58
2019年4月3日 08:27  

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

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

.wp-caption{margin:auto;}

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

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

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

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

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

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

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

以上、ご参考までに。


わいひら 件のいいね!
kazuaki
(@kazuaki)
Trusted Memberサイト
参加: 1年 前
投稿: 89
2019年4月3日 11:39  

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

よろしくお願いします。


Thanks!
(@thanks)
Trusted Member
参加: 5か月 前
投稿: 58
2019年4月3日 15:50  

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4512
2019年4月3日 19:34  

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

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

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


Thanks! 件のいいね!
ロコ
(@lococo)
Trusted Member
参加: 1年 前
投稿: 75
2019年4月3日 20:35  

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

https://notepad.pw/ige1p5iz

HTML5では

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

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

 

タグをきちんと入れたい

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

This post was modified 2週間 前 3 times by ロコ

Thanks!わいひら 件のいいね!
kazuaki
(@kazuaki)
Trusted Memberサイト
参加: 1年 前
投稿: 89
2019年4月4日 01:56  

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


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:2年8ヶ月

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
△新しいのでサービス運営櫪がまだ短い
サービス運営期間:8ヶ月

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

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

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

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

Cocoon
  
動作中

ログイン または 登録 してください

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