現在「イノセンス」スキンを適用中です。

ブロックエディタでクラシックエディタの様にCSSで呼び出したボックスやボタンを表示させる方法 | ブログ相談 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

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

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

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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

スポンサーリンク
ブロックエディタでクラシックエディタの...
 
共有:
通知
すべてクリア

[解決済] ブロックエディタでクラシックエディタの様にCSSで呼び出したボックスやボタンを表示させる方法


かじりんご
 かじりんご
(@かじりんご)
ゲスト
結合: 3年前
投稿: 67
Topic starter  

重い腰を上げてグーテンベルクに移行しようと色々調べております。

そこでいくつもの壁にぶち当たっているのですが、その一つを質問させて下さい。

 

私はお得情報を掲載するブログを運営しています。

その中のクーポン記事は、ほぼ毎日更新しています。

グーテンベルクに移行する際、過去の記事はクラシックエディタのまま触らないほうがいいという情報があったのですが、私のブログの場合触らないわけにはいきません。

という事で、手間はかかりますが、頑張ってブロックに変換していこうと考えています。

 

しかし、今までと同じような表示にするのに苦戦しております。

 

fifth(フィフス)のクーポンの記事では添付画像の様なCSSで呼び出したボックスを使っています。

 

今までなら、style.cssにCSSを記入して、記事にHTMLを呼び出せばすぐに編集できたのですが、グーテンベルくではどのようにして表示させたらいいでしょうか?

不慣れながら、自分で考えてみたのだカスタムHTMLに記入し、それを再ブロックに登録し、ほかの記事にも使うという方法です。

クラシックエディタでAddQuicktagを使って今まで通り入力するという方法も見ましたが、グーテンベルクでクラシックエディタを途中に挟むと表示速度が格段に遅くなるという記事も見たので、嫌煙しています。

cocoonを使っている方は、今までのようにcssで好みのボックスやボタンを記事内に設置したい時どうしていますか?


引用未解決
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11663
わいひら - Facebookわいひら - Twitter
 

クラシックエディタでAddQuicktagを使って今まで通り入力するという方法も見ましたが、グーテンベルクでクラシックエディタを途中に挟むと表示速度が格段に遅くなるという記事も見たので、嫌煙しています。

これの情報元はありますか。
僕はあまり感じたことはないのですが。


返信引用
ろこ
(@lococo)
Prominent Memberサイト
結合: 3年前
投稿: 807
 

今までなら、style.cssにCSSを記入して、記事にHTMLを呼び出せばすぐに編集できたのですが、グーテンベルくではどのようにして表示させたらいいでしょうか?

ブロックスタイルまたはブロックパターンなどを活用して、既存のブロックをカスタマイズすれば比較的簡単に実現できます。

私は自身でカスタマイズを加えていますが、探せば同じことができるプラグインもあるかと。

 

fifth(フィフス)のクーポンの記事では添付画像の様なCSSで呼び出したボックスを使っています。

添付された画像のデザインからだと、リストブロックかアイコンリストブロックをカスタマイズするのがいいと思います。

 

グーテンベルクでクラシックエディタを途中に挟むと表示速度が格段に遅くなるという記事も見たので、嫌煙しています。

格段に遅くなるということはないと思いますが、ブロックエディターにおけるクラシックブロックはどのブロックにも該当しないHTMLの受け皿に過ぎないので、積極的な使用はおすすめしません。

現状、クラシックブロックのためにデフォルトでTinyMCE用JSが別途読み込まれているものの、パフォーマンスに少なからず影響していることから、

  1. クラシックブロックを使用しない限りTinyMCE用JSを読み込まない仕様(非同期など)にする。
  2. クラシックブロックをコアから外し、ブロックディレクトリ等を通してサードパーティー化する。

などが検討されています。

なので、少しでもパフォーマンスを気にするなら、基本的にはクラシックブロックは使用しない方針で記事を作成した方がいいです。


わいひら 件のいいね!
返信引用
かじりんご
 かじりんご
(@かじりんご)
ゲスト
結合: 3年前
投稿: 67
Topic starter  

ろこ様

早速の回答ありがとうございました。

ブロックスタイルまたはブロックパターンなどを活用して、既存のブロックをカスタマイズすれば比較的簡単に実現できます。

とのことなのですが、やっては見たものの私にはなかなか難しかったです。

カスタムHTMLに記入し、それを再ブロックに登録し、ほかの記事にも使うという方法なら私にもできるのですが、それもそれで編集しづらいです。

今までのAddQuicktagを使っていた頃のような、好きなcssをスタイルシートに書いて、htmlで呼び出すようなシステムが恋しいです。

簡単に好みのボックスやボタンが入れられるプラグインをがさしてみようと思います。

なお、「Gutenbergにして表示速度はどうなりましたか?何か注意する事はありますか?  」にも書きましたが、ろこさんが作ったスキンはなかなか素敵ですね。

どうしても自分でのカスタマイズが無理そうならスキンに頼るのも手だなと思い始めました。

ただ、やはりカスタマイズもしたい…

ジレンマです。

 

 


わいひら 件のいいね!
返信引用
かじりんご
 かじりんご
(@かじりんご)
ゲスト
結合: 3年前
投稿: 67
Topic starter  
投稿者:: @yhira

クラシックエディタでAddQuicktagを使って今まで通り入力するという方法も見ましたが、グーテンベルクでクラシックエディタを途中に挟むと表示速度が格段に遅くなるという記事も見たので、嫌煙しています。

これの情報元はありますか。
僕はあまり感じたことはないのですが。

わいひら様

お世話になっております。

どこで読んだ記事か忘れてしまいました。

しかし、クラシックエディアと普通のブロックが混在していると表示速度が遅くなったという記事でした。

しかし具体的な数値などは書かれておらず、自分の実感では…という事だったのでそれほど気にしなくていいのかな…とも思います。

クラシックエディタからGutenbergに移動するにあたって、行き当たりばったりだと後で修正が大変になるので小さなことまで気になってしまっています。

 


わいひら 件のいいね!
返信引用
ろこ
(@lococo)
Prominent Memberサイト
結合: 3年前
投稿: 807
 

なお、「Gutenbergにして表示速度はどうなりましたか?何か注意する事はありますか?  」にも書きましたが、ろこさんが作ったスキンはなかなか素敵ですね。

ありがとうございます。

SILKスキンでもブロックスタイルやブロックパターンを活用していて、

https://github.com/yhira/cocoon/blob/master/skins/silk/functions.php#L21-L113

  ...
  ],
  [
    'name' => 'cocoon-blocks/blogcard',
    'properties' => [
      'name' => 'text',
      'label' => 'テキスト'
    ]
  ],
  [
    'name' => 'cocoon-blocks/iconlist-box',
    'properties' => [
      'name' => 'fifth-coupon',
      'label' => 'fifth(フィフス)のクーポン'
    ]
  ]
];

赤字部分のようにSILKをベースにカスタマイズすれば、アイコンリストブロックに「fifth(フィフス)のクーポン」というスタイル設定が追加されます。

この例でアイコンリストブロックの該当スタイルを設定した場合、アイコンリストにクラス名'is-style-fifth-coupon'が入るので、あとはCSSを書けばカスタマイズできます。


わいひら 件のいいね!
返信引用
かじりんご
 かじりんご
(@かじりんご)
ゲスト
結合: 3年前
投稿: 67
Topic starter  

ろこ様

お世話になっております。

SILKをベースにカスタマイズしていこうかと思っているのですが、

赤字部分のようにSILKをベースにカスタマイズすれば、

というところがわかりません。

どこをいじればいいのでしょうか?

ご教授いただけると嬉しいです。


返信引用
ろこ
(@lococo)
Prominent Memberサイト
結合: 3年前
投稿: 807
 

フックからブロックスタイルを追加できるよう、SILKをアップデートしました。

https://dateqa.com/cocoon/

 

  1. SILK最新版をダウンロード。
  2. ダウンロードしたSILKのZIPファイルを解凍。
  3. サーバーにあるCocoon子テーマ内の'skins'フォルダに、解凍したSILKフォルダをFTP等でアップロード。
  4. Cocoon設定のスキン一覧で[Child]SILK(シルク)を選択し、設定を保存。
  5. Cocoon子テーマのfunctions.phpに以下のコードを追記。
add_filter('silk_block_styles', function ($blockstyles) {
  $blockstyles[] = [
    'name' => 'cocoon-blocks/iconlist-box',
    'properties' => [
      'name' => 'fifth-coupon',
      'label' => 'fifth(フィフス)のクーポン'
    ]
  ];
  return $blockstyles;
});

Cocoon親テーマでカスタマイズすると、テーマのアップデートで全て消えてしまうので、カスタマイズは子テーマに加えてください。

https://wp-cocoon.com/downloads/

 

add_filter('silk_block_styles', function ($blockstyles) {
  $blockstyles[] = [
    'name' => 'ブロック名',
    'properties' => [
      'name' => 'スラッグ',
    'label' => '表示ラベル'
    ]
  ];
  return $blockstyles;
});

の形で複数のブロックスタイルを追加できます。

ブロック名が分からなければ、ブロックエディターで各ブロックHTMLをブラウザのDevToolsから確認すると、添付画像のようにdata-typeという属性(アイコンボックスにブロックスタイルを追加する場合はブロック名に'cocoon-blocks/icon-box'を記述)に書かれています。

スラッグはスタイルを適用したときのクラス名の一部になり、「'is-style-'+'スラッグ'」となります。

表示ラベルはスタイル設定で表示される選択項目の名前になります。

 

あとは、選択したときのクラス名「'is-style-'+'スラグ'」(スラッグが'fifth-coupon'なら'is-style-fifth-coupon')を用いて、CSSを書いていくだけです。


わいひら 件のいいね!
返信引用
かじりんご
 かじりんご
(@かじりんご)
ゲスト
結合: 3年前
投稿: 67
Topic starter  

ろこ様

アップデートまでしていただいて感激です!

FTPソフトの使い方が不安なのですが、勉強してやってみようと思います。

すみませんここであと3つ質問があります。

 

①新しいボックスやボタンを増やす毎に、functions.phpに書き加えていくという理解でよろしいでしょうか?

 

 

②追加するCSSはskins/skin-template/style.cssではなくstyle.cssでいいのでしょうか?

 

 

③今回追加予定のボックスCSSは以下なのですが、■■■の個所にスラッグ名(is-style-fifth-coupon)で間違いないでしょうか。

 

.■■■ {
position:relative;/* 配置に関するもの(ここを基準に) */
padding: 2em 2em 1.7em; /* ボックスの内側余白(上:2em 左右:2em 下:1.7em) */
margin: 2.5em auto;/*ボックス外側余白*/
background-color: #c7ede2; /*ボックス背景色*/
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/
border-radius:4px;/* ボックス角丸 */
max-width:600px;/*ボックス横幅*/
}
.■■■ .box-title {
position: absolute;/* 配置に関するもの(ここを動かす) */
top: -22px;/* 上から(-22px)移動*/
left: 30px;/* 左から(30px)移動*/
padding: 0.2em 2em;/* テープ内側余白*/
color: #58be89; /* テープ文字色 */
font-weight: bold;/* テープ文字太さ*/
font-size:18px;/* テープ文字大きさ*/
background-color: rgba(255,255,255,.1);/* テープ背景色と透過*/
border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ→*/
box-shadow: 0 0 5px rgba(0,0,0,0.2); /* テープ影*/
transform: rotate(-3deg);/* テープの傾き*/
}
.■■■ p{
margin: 0; /* 文字の外側余白リセット*/
padding: 0; /* 文字の内側余白リセット*/
}


返信引用
ろこ
(@lococo)
Prominent Memberサイト
結合: 3年前
投稿: 807
 

①新しいボックスやボタンを増やす毎に、functions.phpに書き加えていくという理解でよろしいでしょうか?

そうです。

add_filter('silk_block_styles', function ($blockstyles) {
  $blockstyles[] = [
    'name' => 'ブロック名',
    'properties' => [
      'name' => 'スラッグ1',
      'label' => '表示ラベル1'
    ]
  ];
  $blockstyles[] = [
    'name' => 'ブロック名',
    'properties' => [
      'name' => 'スラッグ2',
      'label' => '表示ラベル2'
    ]
  ];
  ...
  return $blockstyles;
});

とするか、

add_filter('silk_block_styles', function ($blockstyles) {
  $blockstyles[] = [
    'name' => 'ブロック名',
    'properties' => [
      'name' => 'スラッグ1',
      'label' => '表示ラベル1'
    ]
  ];
  return $blockstyles;
});

add_filter('silk_block_styles', function ($blockstyles) {
  $blockstyles[] = [
    'name' => 'ブロック名',
    'properties' => [
      'name' => 'スラッグ2',
      'label' => '表示ラベル2'
    ]
  ];
  return $blockstyles;
});
...

とすれば複数追加できます。

 

②追加するCSSはskins/skin-template/style.cssではなくstyle.cssでいいのでしょうか?

子テーマのstyle.cssで問題ありません。

 

③今回追加予定のボックスCSSは以下なのですが、■■■の個所にスラッグ名(is-style-fifth-coupon)で間違いないでしょうか。

アイコンリストブロックでカスタマイズする場合、アイコンリストのHTMLに従ってCSSのセレクタを指定する必要があります。

SILKでは、アイコンリストは添付画像のようなデザインになるので、「アイコンリスト」と書かれたテキスト部分を上書きで装飾するなら、

.is-style-fifth-coupon .iconlist-title {
  ...
}

といった感じになります。

Cocoonテーマやスキンで当てはめているスタイルがあるので、そのあたりは臨機応変にカスタマイズする必要があります。


わいひら 件のいいね!
返信引用
かじりんご
 かじりんご
(@かじりんご)
ゲスト
結合: 3年前
投稿: 67
Topic starter  

ろこ様

返信が遅くなり申し訳ありません。

丁寧に教えてくださってありがとうございます。

土日に頑張ってみようと思います。

知識不足なので、頑張って勉強してから取り掛かることにします。

まずはテストサイトで試してみて。。。なので、長い道のりになりそうですが、好みにデザインにできるように試行錯誤してみます。

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

ろこ様が以前書いておられた記事

WordPress5.6~2021年のアップデートについて も読んで、やっぱりそろそろ手を付けないといけないんだなとおしりに火が付きました!

いつも有益な情報を提供して下さりありがとうございます。

 


返信引用

返信する

投稿者名

投稿者メールアドレス

タイトル *

許可された最大ファイルサイズ 5MB

 
プレビュー 0リビジョン 保存しました
共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年7ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2021/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年5ヶ月

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

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

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

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

サービス運営期間:5年

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