【HubSpot】「このテーマとそのコンテンツはデザインマネージャーで編集できません」と言われてしまった場合の方法／子テーマを作ってみよう
はじめに
HubSpotではHubSpotテーマの他にマーケットプレイスでのテーマも用意されており、大抵のことはページ編集画面やテーマ編集画面でカスタマイズすることができます。
ただ、たまーーにいじれないことがあるんですよね。
例えばHubSpotテーマ「Growth」でブログ記事を作ると記事を共有するための場所がでてくるんですが、なんとなくダサいので消したい・・・
けど、ここはテーマ編集画面でも消せないのです ι(´Д｀υ)
なぜかというとテンプレートで直に定義されてるので、ここを書き換えないといけないのです。
なんかmodule "social_sharing"っていうそれっぽいやつがいますね
じゃあここ消せばいいじゃん って思うじゃないですか。
でもGrowthのテンプレート（今回は /@hubspot/growth/templates/blog-post.html ）って編集できないんですよね (｡ŏ﹏ŏ)
なにやら謎のバナーが編集を妨げています
「このテーマとそのコンテンツはデザインマネージャーで編集できません」って何、なにもできないの？
このメッセージ、一見すると打つ手なし、、って感じにみえますが、その次の文がヒントになります。
子テーマを作成することはできます
なるほどわからん な感じですが どうやら子テーマとやらを作れば良さそうですね
いや、子テーマとは・・・なので次のセクションにて補足します。
子テーマとは
HubSpotにおける子テーマとは、親テーマ（元のテーマ）の設定を引き続ぎつつ カスタマイズを加えることができるものです。
今回は blog-post.html を子テーマの中でカスタマイズしますが、それ以外は元の親テーマの設定が継承されるためイチからテーマ作成をせずともカスタマイズできちゃうのがお得ポイントです v(｡･ω･｡)
詳細については公式ドキュメントをご参照ください：
子テーマを作ってみよう
ではでは早速作っていきましょう～～
今回は以下の手順で進めます：
- 子テーマを作る
- 編集したいテンプレートを子テーマに複製する
- 子テーマ内のテンプレートを編集する
- ブログ記事につかうテンプレートを差し替える
1. 子テーマを作る
まずはバナーの言われるがままに［子テーマを作成］をクリックして、子テーマを作ります。
ぽちっとな
作成する子テーマにお名前をつけてあげましょう。既定では"growth copy"となっていましたが、お子さま感を出すために"growth child"としました。（なんでもいいです）
"growth child"のテーマファイルが無事作成されました～
2. 編集したいテンプレートを子テーマに複製する
よーしこれでカスタマイズすっぞ～と思いますよね。まだ早いです
子テーマは作り立ての状態では必要最低限のファイルしか入ってません。例えばテンプレートだと base.html しかいない状態です。
さみしい
そのため、今回編集したいテンプレートを子テーマにコピーしてあげる必要があります。
<方法>
編集したいテンプレート(/@hubspot/growth/templates/blog-post.html)を見つけます。
ファイルを見つけたら ファイル名を右クリックして［子テーマに複製］を選択しちゃいます
すると選択可能な子テーマがでてくるのでさきほど作成した"growth child"を選択します。
無事に子テーマの中に blog-post.html を作ることができました (｢･ω･)｢
ちなみにパスは /growth child/templates/blog-post.html の形になります。
3. 子テーマ内のテンプレートを編集する
満を持してテンプレートをいじりたいと思います。
今回はなんかダサい「共有：」の部分（以下：）を消してやります！
{% module "social_sharing"
path="../modules/social-sharing",
styles={
"spacing": {
"spacing": {
"margin": {
"bottom": {
"value": 22,
"units": "px"
}
}
}
}
}
%}
葬りさったらテンプレートをプレビューして、やつがでてきていないことを確認します。
無事消えてくれてますね
確認が取れたらテンプレートを公開して反映させましょう。
4. ブログ記事につかうテンプレートを差し替える
ここで満足しちゃいがちなのですが、ブログ記事はまだ親テーマのテンプレートを使用しています。
（ので公開ページが反映されてなくても慌てないでください）
最後にブログ記事に使用するテンプレートを今回カスタマイズした子テーマのテンプレートに差し替えてあげましょう～
<方法>
設定＞コンテンツ＞ブログの画面にアクセスし、対象のブログを選択＞［テンプレート］タブをクリックします。
［ブログ記事テンプレート］という部分があるので、［アクション］＞［テンプレートを変更］をクリックし、今回作成したテンプレートを選択します。
変更後、ブログ記事の編集画面にアクセスし 無事に「共有：」の箇所が消えてることを確認できれば完了です！✨
📖参考記事
まとめ
子テーマを活用することでUI上からは変更ができない部分にも手を加えることができます。実際のカスタマイズにはHTMLやCSS、HubLの知識が必要になってきますが カスタマイズの幅がぐんと広がりますのでぜひチャレンジしてみてください✧◝(⁰▿⁰)◜✧
ここまで読んでめんどいと思った？
ちなみに今回は子テーマの作成がめんどい方はCSSから非表示にすることもできます。
有：」の部分をデベロッパーツールで確認すると <div class="social-sharing"> で記述されていることがわかります。
なので、設定＞コンテンツ＞ブログ＞テンプレート＞［ヘッダーHTML］なんかに
<style>
.social-sharing {
display :none;
}
</style>
とかいれちゃうとCSS上から非表示にすることができます。
Discussion