CSSファイルを作成、編集、添付して、サイトのスタイルを設定する方法

更新日時 July 1, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise

HubSpotを使用すると、デザイナーは、デザインマネージャー内で簡単にスタイルシートを作成および保守できます。CSS(Cascading Style Sheets)は、ページの要素を選択してそれらの表示方法を制御するコードファイルです。ユーザーは自分が作成しているテンプレートについて、HTMLはウェブサイトの骨格であり、CSSはサイトの皮膚であると考えることができます。

この記事では、HubSpotでCSSファイルを作成、公開、および添付する手順を説明します。CSSの操作に不安がある場合や特定のページのデザインを簡単に変更するような場合は、こちらの記事で[Style(スタイル)]タブの使い方を参照してください

 

Design Manager(デザインマネージャー)に移動する

CSSファイルを作成するか、または既存ファイルを編集するには、デザインマネージャー([Content(コンテンツ)] > [Design Manager(デザインマネージャー)])に移動します。

Navigate to Design Manager
HubSpotの技術サービスチームによってHubSpotに移行された場合は、いくつかのデフォルトのCSSファイルがすでに作成されています。必要な場合は、これらのファイルを変更してサイトの外観を調整するように、デザイナーに指示できます。 技術サービスチームによって追加されたファイルの名前と説明については、こちらを参照してください。 ファイルの場所がわかった場合は、ステップ3にスキップします。

新規コードファイルを作成する

[Coded Files(コードファイル)]フォルダーをクリックし、次に青色の[New coded file(新規コードファイル)]ボタンをクリックします。

New coded file

[Code Editor(コードエディター)]オプションと[Page(ページ)]オプションをクリックします。次に、[Create(作成)]ボタンをクリックします

ファイルに名前を付けて保存する

新しいCSSスタイルシートを作成するフォルダーを選択します。または、新しいフォルダーを作成することもできます。その場合は親フォルダーを選んで[New Folder(新規フォルダー)]をクリックし、そのフォルダーの名前を入力します。 次に、CSSファイルの名前を入力して.cssという拡張子を付加します。最後に、[Save(保存)]をクリックすると、新しいCSSファイルが作成されます。 

Name and save file

CSSを編集する

CSSファイルを作成、または既存のものを編集すると、コードエディターで編集できます。標準的なCSSファイル以外にも、HubSpotのコードエディターはHubL変数とマクロをサポートして、CSSの保守を簡素化します。 

HubSpotテンプレートで使用できる標準CSSセレクターのリストは、Boilerplate CSSを参照してください。 

Edit CSS

ファイルを公開する

[Publish changes(変更を公開)]をクリックして、CSSファイルをコンパイルして縮小します。 

Publish changes

テンプレートに添付する

スタイルシートをテンプレートレイアウトに添付するには、テンプレートを開いて[Actions(アクション)] > [Edit Head(Headの編集)]をクリックします。スタイルシートを開いて、[+Add Stylesheets(+スタイルシートを追加)]をクリックします。 スタイルシートを選択し、[Add(追加)][Save(保存)]、および[Publish Changes(変更を公開)]をクリックします。

HubSpot Help article screenshot
CSSファイルはドメインレベルまたはページレベルで添付できますが、常にテンプレートレベルで添付することをお勧めします。また、コードが競合する可能性を削減するために、ドメインのスタイルシートを無効化することもできます。CSSの添付場所の詳細については、こちらの記事を参照してください

Primary CSS(プライマリCSS)

HubSpot Academy

ベストプラクティス

Primary CSS(プライマリCSS)の最終的な目的は、サイトのデザインによって異なりますが、推奨事項があります。
  • Responsive CSS(レスポンシブなCSS) - HubSpotのrequired_base.cssコードを含めると、テンプレートをレスポンシブにできます。
  • Normalize CSS(CSSを正規化する) - すべてのページに追加するコードで、ブラウザーがページを一貫した外観で表示するためのコードをPrimary CSS(プライマリCSS)に追加します。  
  • Container max-width(コンテナーの最大幅) - HubSpotのCOSは自動的にレスポンシブですが、ページのコンテンツ領域の幅は指定する必要があります。 コンテナーへの最大幅の適用の詳細については、こちらの記事を参照してください
  • Fluid media code(流動的メディアコード) - 画像や動画をレスポンシブにします。画像をレスポンシブにする特定のCSSについては、こちらを参照してください
  • Responsive table code(レスポンシブテーブルコード) - テーブルではレスポンシブが動作しないことがあるため、表形式のデータにスタイルを設定するためのコードは、Primary CSS(プライマリCSS)に追加します。
  • Styling of other standard modules(その他の標準モジュールのスタイル) - 標準モジュールのスタイル設定については、このガイドの最後のセクションを参照してください。 例えば、Primary CSS(プライマリCSS)のスライダーモジュールにスタイルを設定すると、すべてのテンプレートで一貫して同じ外観と動作を示します。
続きを読む

Primary CSS(プライマリCSS)は、すべてのテンプレートに自動的に適用されるCSSファイルです(無効化されている場合を除く)。 Primary CSS(プライマリCSS)を使用すると、特に、複数のテーマを作成してHubSpotの異なるツールにまたがって使用しようとしている場合に、デザイナーが時間を有効に利用できます。

最終的にサイトの外観を複数バージョン作成したり、さまざまなブランドのキャンペーンが必要になったりした場合、多くの基本コードを何度も繰り返して作成していることがあります。そのような場合、Primary CSS(プライマリCSS)を使用すると、すべてのグローバルコードには1つのホームを設定し、キャンペーンごとに異なる固有の外観を設定するには追加スタイルシートを作成して対応できます。

前の記事

次の記事