サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019-04-20 20:55
私が方法を知らないだけかも知れませんが、Gutenberg標準の引用ブロックでは画像挿入は出来ないと思います。
企業のニュースリリースなどから引用する場合、ニュースリリース本文と一緒に掲載されている商品画像も引用として、同じ引用エリアに掲載したい事が多々あるのですが、引用ブロックをHTML編集して画像を挿入するのでは手間が…。
クラシックブロックなどを使ってHTML挿入でコピペして編集すると言う方法も有りますが、それではGutenbergを使う利点が…。と、言うか面倒で…。
例えば、Cocoonの「見出しボックスブロック」などを流用し、「div」で囲っている部分を「blockquote」に変更して、引用元を表示するための「cite」を下部に追加すれば、出来そうかなっと素人考えで思ったのですが可能でしょうか。
見出しボックスブロックのような感じで編集出来れば理想なのですが。
プラグインの「Blok Lab」でも、それなりの実装はできるのですが、プラグインを外すと表示されなくなるので外部のプラグインに依存するよりも、Cocoonの機能として実装して頂ければ有り難いです。
カスタムブロックの仕組みを軽く調べただけですが、結構面倒な事を言ってるだろうという自覚はあります ?
ご負担にならない程度で構いませんので一度考えて頂ければ幸いです。
Topic starter
2019-04-21 01:34
お忙しい中ご回答ありがとうございます！
私が試してるクラシックブロックで引用に画像を追加する方法ですが、クラシックブロックを作り、「HTML挿入」で引用の為のテンプレを流し込み、画像を挿入する場所にカーソルを置いて、一度「メディアを追加」を開き、画像をアップロードして使用したい画像を指定すると言う方法で行っています。このクリックやメディアのポップアップが地味に手間でストレスでブロックエディタの利点が損なわれてるなと感じています。 ?
「HTMLで編集する」などが、旧エディタのテキストみたいに、画像を入れたい場所にカーソルを置いて、ブロック内に画像をドラッグアンドドロップすれば画像がアップされると言う仕様ならまだ良かったですが、それをすると今のGutenbergの仕様では、指定のブロック外に画像ブロックが作られるんですよね…。
そこで、Cocoonの見出しボックスブロックみたいな仕様で、「blockquote」タグ内に画像や段落など任意のブロックを追加できるような引用ブロックが有れば便利だなと思いご相談しました。
色々な方法で希望の見た目になるように手動の編集は出来ますし、クラシックブロックを利用する方法が現状では一番簡単で、わいひらさんにご負担をかけない方法だと思います。
ただ、それを言い出すと最終的には「やっぱりクラシックエディタ方が便利で良くない？」と言う結論に行き着いてしまいますので…。
わいひらさんにお願いして良いモノなのか結構長期間悩んでいたのですが、後々で構いませんのでご対応頂けるなら嬉しいです。たまに試してみて上手く出来たら公開する程度で構いませんので ?
Topic starter
2019-04-21 20:52
ロコさん ありがとうございます！
インライン画像が何のために有るのかよく分かってませんでしたが、よく考えればこちらがブロック要素で囲わないimgタグの記述にあたるモノだったんですね。
これが引用などブロックを選択した時の上部メニューに表示されてたら便利なのに、どうしてブロック選択メニューに置かれているのか＾＾；
それはさておき。早速、試してみました。
私の環境の問題かも知れませんが感じた問題点としては「画像の大きさを調整した時に、改行（段落）しないとimgタグ内のstyleに反映されず、サイズを変更する度に改行（段落）しないといけない。」「CSSでのセンタリングが反映されない（私の指定方法が間違ってる可能性が高い）」くらいでしたので、私がこれまで行ってたクラシックエディタの利用や、カスタムHTMLブロックで画像ブロックを挟むと言う方法よりもスッキリしていて使いやすい方法でした！
大量の記事を投稿する事が多いので、欲を言えば見出しボックスブロックのようなイメージで、引用ブロックの中に画像ブロックやら段落を通常の手続きで追加出来れば幸せなのですが、WordPress公式でもブロック要素の入れ子の開発はこれからと言う記事を投稿後に読みましたので、わいひらさんの判断を待って対応外の場合はこの方法で頑張ってみます！
情報ありがとうございました！
Topic starter
2019-04-21 20:59
と、言う事で。
個人的には、見出しボックスブロックの様な操作感の引用ブロックが有れば嬉しいのですが、今後WordPress公式からそういった事が出来るようなアップデートが有るかも知れませんし、比較的に楽でスッキリとした方法をロコさんが教えて下さったので、わいひらさんの判断にお任せしたいと思います。
何だかお騒がせしただけになってしまった感じで申し訳ないです ?
Topic starter
2019-04-22 00:24
面倒な要望に時間を使って頂き有難うございました！
お手数をお掛けしてしまいましたが、ロコさんからアドバイスを頂け、ある程度の解決に繋がりましたので要望を出して良かったです。
WordPress公式…。リリース段階で対応していてほしかった…。
ともあれ、わいひらさん・ロコさん本当に有難うございました！
あと、この方法を使用する際の私が気がついた注意点を書いておこうと思います。
1.インライン画像を挿入した後に画像の大きさを調整した場合、改行（段落）しないと変更が適応されない挙動が有る。
2.blockquote内に挿入した画像と文章は、両方ともPタグで囲まれる。上部メニューで右寄せ・中央寄せ・左寄せなどをすると、画像と文章の両方に適応される。個別にclassを指定して細かく設定したい場合にはHTML編集で。
3.テンプレが決まってて画像だけをセンタリングしたい場合などには、
blockquote img{display:block; margin:0 auto;}
など、予めCSSでimgをブロック要素にしてあげると楽に画像だけセンタリングできる。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。