新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。サイトサーチ関連記事B!活用ブログTOP【カスタムブロック】ソースコードを表示するブロックの作り方hayase2020.06.16ブロックエディタ【カスタムブロック】ソースコードを表示するブロックの作り方ブロックエディターのカスタムブロック機能では、単純に既存のブロックを組み合わせるだけでなく、カスタムスクリプトを使えば様々な機能を持たせることが可能です。今回は実用的なサンプルとして、ソースコードを表示するブロックの作り方を紹介します。カスタムブロックの作成カスタムブロックは左メニューのカスタムブロック>新規から作成できます。今回は以下で設定してください。カスタムブロックの編集ページの右上の読み込むボタンから以下のファイルを読み込んでも同じものが作成できます。code.jsonをダウンロード名前:コード識別子:codeブロック:テキスト(複数行)を追加。ラベルにソースコード、クラス名にsourceを記述、ブロック要素はPREを選択、フォーマットはなしにする。ドロップダウンを追加。JavaScriptなど言語を記述ルート要素で包む:オフブロックの追加と削除:オフカスタムスクリプトには以下を記述してください。}});</script>テンプレートにスニペットを挿入する実際に出力されるテンプレート内に、以下のソースコードを挿入します。記事・ウェブページの編集画面のブロックエディタのブロックを追加ボタンに、コードというブロックが追加されているので選択します。ソースコード欄には、実際のHTMLなどのソースコードを記述し、ドロップダウンでは表示する言語を選びます。実際に表示された状態は以下になります。以上ソースコードを表示するカスタムブロックのご紹介でした。制作者向けポータルお問い合わせ・FAQ。