現在デフォルトスキンとして「Season(Spring)」適用中。

自由度の高い「引用」ブロックがあったらな… | Cocoon Blocksに関する質問・不具合報告・要望 | 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

しょぼーん
(@syobooon)
Eminent Member
参加: 6か月 前
投稿: 27
2019年4月20日 20:55  

私が方法を知らないだけかも知れませんが、Gutenberg標準の引用ブロックでは画像挿入は出来ないと思います。

企業のニュースリリースなどから引用する場合、ニュースリリース本文と一緒に掲載されている商品画像も引用として、同じ引用エリアに掲載したい事が多々あるのですが、引用ブロックをHTML編集して画像を挿入するのでは手間が…。

クラシックブロックなどを使ってHTML挿入でコピペして編集すると言う方法も有りますが、それではGutenbergを使う利点が…。と、言うか面倒で…。

例えば、Cocoonの「見出しボックスブロック」などを流用し、「div」で囲っている部分を「blockquote」に変更して、引用元を表示するための「cite」を下部に追加すれば、出来そうかなっと素人考えで思ったのですが可能でしょうか。

見出しボックスブロックのような感じで編集出来れば理想なのですが。

プラグインの「Blok Lab」でも、それなりの実装はできるのですが、プラグインを外すと表示されなくなるので外部のプラグインに依存するよりも、Cocoonの機能として実装して頂ければ有り難いです。

カスタムブロックの仕組みを軽く調べただけですが、結構面倒な事を言ってるだろうという自覚はあります 😓

ご負担にならない程度で構いませんので一度考えて頂ければ幸いです。


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 5039
2019年4月20日 22:40  

デフォルトの引用ブロックでは、ブロック内にブロックを挿入できないんですね…。
ここら辺は、画像挿入するために同じようなブロックをもう一つ作るのかというところが焦点ですね。
うーん、悩むところです。検討はしてみようと思います。

ただ、そういう人用の使い方をする場合は、クラシックブロックを利用するというのではダメなのでしょうか?


しょぼーん
(@syobooon)
Eminent Member
参加: 6か月 前
投稿: 27
2019年4月21日 01:34  

お忙しい中ご回答ありがとうございます!

私が試してるクラシックブロックで引用に画像を追加する方法ですが、クラシックブロックを作り、「HTML挿入」で引用の為のテンプレを流し込み、画像を挿入する場所にカーソルを置いて、一度「メディアを追加」を開き、画像をアップロードして使用したい画像を指定すると言う方法で行っています。このクリックやメディアのポップアップが地味に手間でストレスでブロックエディタの利点が損なわれてるなと感じています。  😥 

「HTMLで編集する」などが、旧エディタのテキストみたいに、画像を入れたい場所にカーソルを置いて、ブロック内に画像をドラッグアンドドロップすれば画像がアップされると言う仕様ならまだ良かったですが、それをすると今のGutenbergの仕様では、指定のブロック外に画像ブロックが作られるんですよね…。

そこで、Cocoonの見出しボックスブロックみたいな仕様で、「blockquote」タグ内に画像や段落など任意のブロックを追加できるような引用ブロックが有れば便利だなと思いご相談しました。

色々な方法で希望の見た目になるように手動の編集は出来ますし、クラシックブロックを利用する方法が現状では一番簡単で、わいひらさんにご負担をかけない方法だと思います。

ただ、それを言い出すと最終的には「やっぱりクラシックエディタ方が便利で良くない?」と言う結論に行き着いてしまいますので…。

わいひらさんにお願いして良いモノなのか結構長期間悩んでいたのですが、後々で構いませんのでご対応頂けるなら嬉しいです。たまに試してみて上手く出来たら公開する程度で構いませんので 😓 


ロコ
(@lococo)
Estimable Member
参加: 1年 前
投稿: 140
2019年4月21日 18:26  

引用ブロック内に挿入したいのが画像のみなのであれば、新たに専用ブロックを用意しなくても、インライン要素である「インライン画像」(と必要ならCSSカスタマイズ)で対応可能かと思われます。

一度試してみてください。


しょぼーんわいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 5039
2019年4月21日 19:56  

>「インライン画像」
その手もありましたね。


しょぼーん
(@syobooon)
Eminent Member
参加: 6か月 前
投稿: 27
2019年4月21日 20:52  

ロコさん ありがとうございます!

インライン画像が何のために有るのかよく分かってませんでしたが、よく考えればこちらがブロック要素で囲わないimgタグの記述にあたるモノだったんですね。

これが引用などブロックを選択した時の上部メニューに表示されてたら便利なのに、どうしてブロック選択メニューに置かれているのか^^;

それはさておき。早速、試してみました。

私の環境の問題かも知れませんが感じた問題点としては「画像の大きさを調整した時に、改行(段落)しないとimgタグ内のstyleに反映されず、サイズを変更する度に改行(段落)しないといけない。」「CSSでのセンタリングが反映されない(私の指定方法が間違ってる可能性が高い)」くらいでしたので、私がこれまで行ってたクラシックエディタの利用や、カスタムHTMLブロックで画像ブロックを挟むと言う方法よりもスッキリしていて使いやすい方法でした!

大量の記事を投稿する事が多いので、欲を言えば見出しボックスブロックのようなイメージで、引用ブロックの中に画像ブロックやら段落を通常の手続きで追加出来れば幸せなのですが、WordPress公式でもブロック要素の入れ子の開発はこれからと言う記事を投稿後に読みましたので、わいひらさんの判断を待って対応外の場合はこの方法で頑張ってみます!

情報ありがとうございました!

 

 


しょぼーん
(@syobooon)
Eminent Member
参加: 6か月 前
投稿: 27
2019年4月21日 20:59  

と、言う事で。

個人的には、見出しボックスブロックの様な操作感の引用ブロックが有れば嬉しいのですが、今後WordPress公式からそういった事が出来るようなアップデートが有るかも知れませんし、比較的に楽でスッキリとした方法をロコさんが教えて下さったので、わいひらさんの判断にお任せしたいと思います。

何だかお騒がせしただけになってしまった感じで申し訳ないです 😥 


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 5039
2019年4月21日 22:55  

今回のブロックに関しては、申し訳ないですが以下の理由で導入は見送りさせていただこうと思います。

  • 外観が同じようなブロックが2つできてしまう
  • 今回の件で言えばインライン画像利用すれば簡単なものであれば代用可能
  • 個人的にはWordPress公式の方で対応して欲しい部分(公式に要望を出せば良いかもね)
  • 導入に結構手間もかかる

とりあえず、しばらく公式の動向の様子を見てみることにしようと思います。


しょぼーん
(@syobooon)
Eminent Member
参加: 6か月 前
投稿: 27
2019年4月22日 00:24  

面倒な要望に時間を使って頂き有難うございました!

お手数をお掛けしてしまいましたが、ロコさんからアドバイスを頂け、ある程度の解決に繋がりましたので要望を出して良かったです。

WordPress公式…。リリース段階で対応していてほしかった…。

ともあれ、わいひらさん・ロコさん本当に有難うございました!

 

あと、この方法を使用する際の私が気がついた注意点を書いておこうと思います。

1.インライン画像を挿入した後に画像の大きさを調整した場合、改行(段落)しないと変更が適応されない挙動が有る。

2.blockquote内に挿入した画像と文章は、両方ともPタグで囲まれる。上部メニューで右寄せ・中央寄せ・左寄せなどをすると、画像と文章の両方に適応される。個別にclassを指定して細かく設定したい場合にはHTML編集で。

3.テンプレが決まってて画像だけをセンタリングしたい場合などには、

blockquote img{display:block; margin:0 auto;}

など、予めCSSでimgをブロック要素にしてあげると楽に画像だけセンタリングできる。


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

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

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

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

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

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

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

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:7ヶ月

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

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

Cocoon
  
動作中

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

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