テーマで必要なファイルについて

更新日時 July 13, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise
テーマを適切に表示し機能させるには、さまざまなCSSファイルやJavascriptファイルが必要です。 この記事では、HubSpotデフォルトテーマの利用に必要なアセットについて説明します。
HubSpotのデフォルトのテーマは、新しいHubSpotアカウントでのみご利用いただけます。既存のアカウントに標準的なHubSpotテーマをインストールする場合は、こちらの手順に従って、ご利用のアカウントがこれらのテーマに対応していることを確認してください。

テーマのカスタムクラス

HubSpotテーマの外観をデザインするには、特定のグループやモジュールにカスタムクラスを適用する必要があります。テーマテンプレートの変更時に、カスタムクラスを損なわないよう、既存のグループ内のモジュールを追加する方法がお勧めです。よく使われるカスタムクラスのリストを確認するには、ここをクリックしてください。

必須のテーマスタイルシート

HubSpotテーマには、デフォルトでそのテーマの名前を持つマスタースタイルシートが1つあり、各テンプレートにこのスタイルシートが添付されます。CSSファイルの名前はテーマに由来します。たとえば、StratusテーマのCSSファイルは、stratus-style.cssという名前になります。このスタイルシートはテーマの美的側面に関係し、デザインの変更が必要な場合に第一に編集すべきファイルです。 

各CSSファイルをテンプレートレベルで添付すると([Edit(編集)] > [Edit Head(Headの編集)])、グローバルCSSファイルは無効になります。この構成で、正確にテーマのスタイルを設定することができます。 

Edit head tag
HubSpotテーマが、対応するスタイルシートだけを適用するよう設定されていても、Content Setttings(コンテンツ設定)のサイトヘッダーHTMLでリンクタグとしてハードコードされているCSSファイルは、これらのテンプレートに適用されます。これらのファイルがテーマCSSと競合する場合は、表示に問題が発生することがあります。 Content Settings(コンテンツ設定)でリンクタグを含む競合的なスクリプトをなくす方法については、これらの手順をご覧ください

取り込まれるCSSファイル

theme-name(テーマ名).css(velocity.css、clarity.cssなど)ファイルエディターには他にも、最終的な単一のCSSファイルに取り込まれコンパイルされるCSSファイルがいくつか存在します。以下のファイルが含まれます。

  • required-base.css - HubSpotのレスポンシブグリッド用のコードを格納するCSSファイル。
  • theme-foundation-v1-0.cssフォントアイコンとCSS3アニメーションに関するCSSをすべて格納するファイル。このファイルには、font-awesomeアイコンCSSとアニメーション用animate.cssのコードが含まれます。
  • hubtheme-modules.cssCOSモジュールのベースとなるスタイルを格納し、style.cssファイルに含まれる必須のファイル。このファイルは編集不要です。
  • recommended.css - HTML5要素に対して推奨される修正とスタイル設定を格納するCSSファイル。

これらのファイルを編集する場合は、更新されたファイルが最終的な統合CSSファイルに含まれるよう、マスターのtheme-name(テーマ名).cssを再公開する必要があります。 

Included CSS files

取り込まれるフォント

HubSpotのデフォルトテーマは、CSSファイルの先頭で@importタグを使用して、さまざまなGoogleフォントを取り込みます。HubSpot CSSファイルにカスタムGoogleフォントを取り込む方法については、この記事をご覧ください

@import tag for fonts

色変数

テーマCSSファイルを使用すると、スタイルシートでアクセントカラー変数のコンセプトを用いて、オンブランドのコンテンツをすばやく立ち上げ、作成できます。と聞いてわからなくても、ご心配なく。ちっとも難しくありません。 企業カラー(16進値)さえ決まっていれば、すぐに企業のブランドとカラーに沿ったウェブサイトができあがります。

色を変更するには、デザインマネージャtheme-name(テーマ名).css(stratus.css、clarity.cssなど)を編集します。色は、CSSファイル上部のHubL変数で定義されます(下図参照)。二重引用符で囲まれたHEX値("#666"など)を変更し、CSSファイルを再公開することで、テーマ全体で使用する色を変更できます。

Color variables
これらのHubL変数に構文エラーがあると、CSSファイルのコンパイルに失敗する場合があるので、注意してください。色変数を編集する際には、二重引用符で囲まれた値だけを変更するようにします。

必要なJavascriptファイル

HubSpotデフォルトテーマは、theme-name(テーマ名)-main.js(stratus-main.js、velocity-main.jsなど)とtheme-foundation-v1-0.jsという2つの主要なJavascriptファイルにも依拠します。 これらのファイルは、HTMLモジュールのグローバルフッターにこの順番で含まれています。このグローバルフッターは、テーマテンプレートごとに含まれており、削除しないようにしてください。

Javascript footer module

theme-name(テーマ名)-main.js

このJavascriptファイルは、モバイルメニューの作成と起動や、テーマバナー背景画像の設定に関係し、さらにアイコンモジュールのショートコードをfont-awesomeアイコンとして表示するコードを設定します。

theme-foundation-v1-0.js

このJavascriptファイルは、スクロールでトリガーされるアニメーション用のwow.jsに由来するコードと、アイコンモジュールのショートコードをfont-awesomeアイコンとして表示するコードを含みます(後者はtheme-name(テーマ名)-main.jsにも含まれます)。 

theme-name(テーマ名)-main.jsまたはtheme-foundation-v1-0.jsを削除すると、テーマのさまざまな機能に支障を来します。テーマテンプレートからグローバルフッターやフッターのJavascript HTMLモジュールを削除しないでください。詳細は、こちらの記事をご覧ください。

前の記事

次の記事