サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021-02-14 21:17
重い腰を上げてグーテンベルクに移行しようと色々調べております。
そこでいくつもの壁にぶち当たっているのですが、その一つを質問させて下さい。
私はお得情報を掲載するブログを運営しています。
その中のクーポン記事は、ほぼ毎日更新しています。
グーテンベルクに移行する際、過去の記事はクラシックエディタのまま触らないほうがいいという情報があったのですが、私のブログの場合触らないわけにはいきません。
という事で、手間はかかりますが、頑張ってブロックに変換していこうと考えています。
しかし、今までと同じような表示にするのに苦戦しております。
fifth(フィフス)のクーポンの記事では添付画像の様なCSSで呼び出したボックスを使っています。
今までなら、style.cssにCSSを記入して、記事にHTMLを呼び出せばすぐに編集できたのですが、グーテンベルくではどのようにして表示させたらいいでしょうか？
不慣れながら、自分で考えてみたのだカスタムHTMLに記入し、それを再ブロックに登録し、ほかの記事にも使うという方法です。
クラシックエディタでAddQuicktagを使って今まで通り入力するという方法も見ましたが、グーテンベルクでクラシックエディタを途中に挟むと表示速度が格段に遅くなるという記事も見たので、嫌煙しています。
cocoonを使っている方は、今までのようにcssで好みのボックスやボタンを記事内に設置したい時どうしていますか？
2021-02-15 22:11
今までなら、style.cssにCSSを記入して、記事にHTMLを呼び出せばすぐに編集できたのですが、グーテンベルくではどのようにして表示させたらいいでしょうか？
ブロックスタイルまたはブロックパターンなどを活用して、既存のブロックをカスタマイズすれば比較的簡単に実現できます。
私は自身でカスタマイズを加えていますが、探せば同じことができるプラグインもあるかと。
fifth(フィフス)のクーポンの記事では添付画像の様なCSSで呼び出したボックスを使っています。
添付された画像のデザインからだと、リストブロックかアイコンリストブロックをカスタマイズするのがいいと思います。
グーテンベルクでクラシックエディタを途中に挟むと表示速度が格段に遅くなるという記事も見たので、嫌煙しています。
格段に遅くなるということはないと思いますが、ブロックエディターにおけるクラシックブロックはどのブロックにも該当しないHTMLの受け皿に過ぎないので、積極的な使用はおすすめしません。
現状、クラシックブロックのためにデフォルトでTinyMCE用JSが別途読み込まれているものの、パフォーマンスに少なからず影響していることから、
- クラシックブロックを使用しない限りTinyMCE用JSを読み込まない仕様（非同期など）にする。
- クラシックブロックをコアから外し、ブロックディレクトリ等を通してサードパーティー化する。
などが検討されています。
なので、少しでもパフォーマンスを気にするなら、基本的にはクラシックブロックは使用しない方針で記事を作成した方がいいです。
わいひら reacted
Topic starter
2021-02-16 15:06
ろこ様
早速の回答ありがとうございました。
とのことなのですが、やっては見たものの私にはなかなか難しかったです。
カスタムHTMLに記入し、それを再ブロックに登録し、ほかの記事にも使うという方法なら私にもできるのですが、それもそれで編集しづらいです。
今までのAddQuicktagを使っていた頃のような、好きなcssをスタイルシートに書いて、htmlで呼び出すようなシステムが恋しいです。
簡単に好みのボックスやボタンが入れられるプラグインをがさしてみようと思います。
なお、「Gutenbergにして表示速度はどうなりましたか？何か注意する事はありますか？ 」にも書きましたが、ろこさんが作ったスキンはなかなか素敵ですね。
どうしても自分でのカスタマイズが無理そうならスキンに頼るのも手だなと思い始めました。
ただ、やはりカスタマイズもしたい…
ジレンマです。
わいひら reacted
Topic starter
2021-02-16 15:08
クラシックエディタでAddQuicktagを使って今まで通り入力するという方法も見ましたが、グーテンベルクでクラシックエディタを途中に挟むと表示速度が格段に遅くなるという記事も見たので、嫌煙しています。
これの情報元はありますか。
僕はあまり感じたことはないのですが。
わいひら様
お世話になっております。
どこで読んだ記事か忘れてしまいました。
しかし、クラシックエディアと普通のブロックが混在していると表示速度が遅くなったという記事でした。
しかし具体的な数値などは書かれておらず、自分の実感では…という事だったのでそれほど気にしなくていいのかな…とも思います。
クラシックエディタからGutenbergに移動するにあたって、行き当たりばったりだと後で修正が大変になるので小さなことまで気になってしまっています。
わいひら reacted
2021-02-17 00:06
なお、「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を書けばカスタマイズできます。
わいひら reacted
Topic starter
2021-02-17 10:01
ろこ様
お世話になっております。
SILKをベースにカスタマイズしていこうかと思っているのですが、
赤字部分のようにSILKをベースにカスタマイズすれば、
というところがわかりません。
どこをいじればいいのでしょうか？
ご教授いただけると嬉しいです。
2021-02-17 12:34
フックからブロックスタイルを追加できるよう、SILKをアップデートしました。
- SILK最新版をダウンロード。
- ダウンロードしたSILKのZIPファイルを解凍。
- サーバーにあるCocoon子テーマ内の'skins'フォルダに、解凍したSILKフォルダをFTP等でアップロード。
- Cocoon設定のスキン一覧で[Child]SILK（シルク）を選択し、設定を保存。
- 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を書いていくだけです。
わいひら reacted
Topic starter
2021-02-17 13:57
ろこ様
アップデートまでしていただいて感激です！
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; /* 文字の内側余白リセット*/
}
2021-02-17 17:12
①新しいボックスやボタンを増やす毎に、functions.phpに書き加えていくという理解でよろしいでしょうか？
そうです。
add_filter('silk_block_styles', function ($blockstyles) {
$blockstyles[] = [
'name' => 'ブロック名',
'properties' => [
'name' => 'スラッグ１',
'label' => '表示ラベル１'
]
];
$blockstyles[] = [
'name' => 'ブロック名',
'properties' => [
'name' => 'スラッグ２',
'label' => '表示ラベル２'
]
];
...
return $blockstyles;
});
とするか、
add_filter('silk_block_styles', function ($blockstyles) {
$blockstyles[] = [
'name' => 'ブロック名',
'properties' => [
'name' => 'スラッグ１',
'label' => '表示ラベル１'
]
];
return $blockstyles;
});
add_filter('silk_block_styles', function ($blockstyles) {
$blockstyles[] = [
'name' => 'ブロック名',
'properties' => [
'name' => 'スラッグ２',
'label' => '表示ラベル２'
]
];
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テーマやスキンで当てはめているスタイルがあるので、そのあたりは臨機応変にカスタマイズする必要があります。
わいひら reacted
Topic starter
2021-02-19 08:19
ろこ様
返信が遅くなり申し訳ありません。
丁寧に教えてくださってありがとうございます。
土日に頑張ってみようと思います。
知識不足なので、頑張って勉強してから取り掛かることにします。
まずはテストサイトで試してみて。。。なので、長い道のりになりそうですが、好みにデザインにできるように試行錯誤してみます。
ありがとうございました！
ろこ様が以前書いておられた記事
WordPress5.6～2021年のアップデートについて も読んで、やっぱりそろそろ手を付けないといけないんだなとおしりに火が付きました！
いつも有益な情報を提供して下さりありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。