m's blog

備忘録とかメモとか

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

今回は、「Googleタグマネージャー」を使って、はてなブログでCSSデザインを使用する方法 を紹介したいと思います!

CSSデザインは、はてなブログでの設定からでも使用できますが、Googleタグマネージャーを使うと、適用先を詳細に切り分けたり、CSSを一か所で一元管理することができます。

Googleタグマネージャーを使う方法は、少し面倒ですが、一度設定してしまえば、なにかと便利な事が多いので、オススメの方法です。

↓ はてなブログの設定からCSSデザインを使用する方法についてはこちら

目次

はじめに

この記事の内容は、2020/07/20 時点のものです。

解説中の表示や、ボタンの位置などが変わっていることがあるので、注意してください。

Googleタグマネージャーの登録

まだ、Googleタグマネージャーの登録をしていない場合は、にアクセスして、Googleタグマネージャーの登録が必要です。

以下のページからGoogleタグマネージャーの登録をすることができます。

2020/07/20 の時点だと、右上に「無料で利用する」というボタン があるので、そのボタンをクリックしてください。

※ 直接、ログインページにアクセスしたい場合は、Googleタグマネージャにアクセスしてください。

「無料で利用する」ボタンをクリックすると、アカウント選択ページ(Googleでログインしていない場合は、アカウント入力ページ)が表示されます。

アカウントを選択(または入力) して、ログインしてください。

アカウントを選択すると登録が完了します。

アカウントを作成

はじめてGoogleタグマネージャーを使用する場合は、以下のようなページが表示されます。

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

右上の方にある、「アカウントを作成」ボタンをクリック してください。

すると、以下のような表示に切り替わります。

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

アカウント名には適当な名前を設定 してください。

コンテナ名はなんでもOK ですが、ブログのドメインを設定しておくと、わかりやすいかもしれません。

ターゲットプラットホームは「ウェブ」 を選択してください。

入力が完了したら、一番下の 「作成」ボタンをクリック してください。

「Google タグ マネージャー利用規約」が表示されるので、問題なさそうであれば 「はい」ボタンをクリック してください。

CSSの追加

タグ設定ページを開く

「アカウントの追加」が完了すると、以下のようなページが表示されます。

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

左サイドバーにある、「タグ」項目をクリック して、「タグ」ページへ移動してください。

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

画像右上の方にあるような、「新規」というボタン を押してください。

すると、以下のような表示が現れます。

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

「タグの設定」、「トリガー」という2つのボックスが表示されていると思います。

ここで、「タグの設定」項目でCSSを追加 します。

また、「トリガー」項目でCSSが適用されるページやタイミングを指定 します。

タグの追加

まずは、「タグの設定」項目からCSSを追加 していきます。

「タグの設定」ボックスの枠内をクリック してください。

すると、「タグタイプの選択」エリアが表示されるので、少し下の方にある「カスタム HTML」を選択 してください。

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

HTML入力欄が現れるので、以下のコードをコピーして貼り付け てください。

<style>
/* 記事タイトルのカスタム */
h1.entry-title {
  border-bottom: double 5px orange;
}

/* 付箋風ボタン */
.button.tag {
    display: inline-block;
    text-decoration: none;
    padding: 0.5rem;
    background: #f7f7f7;
    border-left: solid 6px #58ad5a;
    color: #58ad5a;
    font-weight: bold;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.22);
}

.button.tag:active {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.11);
    transform: translateY(2px);
}
</style>

ここでサンプルとして、記事タイトルのデザインカスタムと、以下の記事で紹介した付箋風ボタンデザインを使用しています。

入力したあとは、以下のような感じになっていると思います。

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

以上で、タグの追加は完了です!

他のCSSを追加したい場合は、ここで追加したタグに追加するか、同様の方法で別のタグを追加することで設定してください。

トリガーの追加

続いて、トリガーを追加します。

先述の通り、「トリガー」項目では、CSSが適用されるページやタイミングを指定 します。

今回は 連携したブログの全てのページで、先ほど追加したCSSが適用されるように設定 します。

先ほどの「タグの設定」ボックスの下に「トリガー」ボックスがあります。

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

「トリガー」ボックスの枠内をクリック してください。

すると、以下のような「トリガーの選択」エリアが表示されるので、リストされているトリガーの中から 「All Pages」をクリックして選択 してください。

※ 初めての設定の場合は、「All Pages」トリガーだけが表示されていると思います。

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

以上で、トリガーの追加は完了です。

ここまでの入力内容は、以下のようになっていると思います。

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

最後に、左上のタグの名前(「名前のないタグ」と表示されている部分)に適当なタグ名を入力 してください。

入力内容に問題がなければ、右上の「保存」ボタンをクリック して、設定内容を保存してください。

以上でCSSの追加は完了です。

公開

追加した設定は「公開」するまで更新されないので、設定した内容を「公開」 したいと思います。

ページ右上にある青色の「公開」ボタンをクリック してください。

以下のようなページが表示されるので、バージョン名に適当な名前を入力 して、右上の「公開」ボタンをクリック してください。

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

以上で、Googleタグマネージャーでの設定は完了です!

コンテナIDのコピー

続いて、はてなブログとの連携に使用するコンテナIDを取得 しておきます。

ページ左上にある「←」のマークをクリック してください。

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

アカウント・コンテナリストが表示されるので、今追加したコンテナの コンテナIDをコピー してください。

次は、いよいよ、はてなブログとの連携を進めて行きます。

はてなブログでの設定

コンテナIDの設定

続いて、はてなブログでの連携設定 を行います。

連携設定といっても、あとは簡単で、規定の場所に、先ほどコピーしたGoogleタグマネージャーのコンテナIDを貼り付けるだけです。

はてなブログのダッシュボードを開いて、設定 > 詳細設定 > 解析ツール > Google タグマネージャ へ移動してください。

「Google タグマネージャ」のコンテナID入力欄があるので、そこに先ほどコピーした コンテナIDを貼り付け てください。

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

コンテナIDを貼り付けたら、ページの一番下に「変更する」というボタンがあるので、そのボタンをクリック して、変更を完了してください。

以上で、はてなブログとGoogleタグマネージャーの連携設定は完了です!

動作チェック

サンプル投稿(動作チェック用)

最後に、追加したCSSがちゃんと適用されているか確認 しておきます。

動作確認用に 以下のような記事をはてなブログに投稿 してください。

<div class="button tag">サンプルボタン</div>

動作確認は下書き&下書きプレビューでもOKです。

下書きプレビュー(または公開記事)に、下線付きのタイトルと付箋風ボタンのボタンが表示されれば、CSSの適用に成功です!

【CSS】はてなブログでCSSデザインを使う方法【Googleタグマネージャー編】

実際に利用する時のメモ

CSSを適用するには、CSSでカスタム対象のHTML要素を指定する必要があります。

CSSを使うときの、より詳細な要素の指定方法は、以下の記事を参考にしてください。

また、ブログの構成要素をカスタムしたい場合、カスタムしたい構成要素のID名やクラス名などを知る必要があります。

構成要素のID名やクラス名の確認方法については、以下の記事を参考にしてください。

まとめ

以上、Googleタグマネージャーを使って、はてなブログにCSSデザインを追加する方法を紹介しました。

CSSを新たに追加または変更する場合は、Googleタグマネージャーで今回作成したタグを調整するか、新しいタグを作成して追加してください。

本ブログでも、CSSに関する記事を複数投稿しています。

今後も順次、CSS関連の記事を追加していく予定なので、今回(または前回)紹介した方法を使って、ぜひ試してみてください!