Tumblrのテーマカスタマイズ

独自タグについて

Tumblrのテーマは「HTMLコード」＋「独自タグ」で生成されており、テーマのカスタマイズは、「HTMコード」を編集することで行います。

独自タグは、以下の公式ドキュメントに一覧が記載されています。

参照：カスタムHTMLテーマを作成するには
https://www.tumblr.com/docs/en/custom_themes

テーマオプションについて

テーマオプションを設定することで、ユーザーが「htmlコード」を編集することなくテーマ編集画面にて、設定値の変更やON/OFF等を容易に変更することが可能となります。

例：レイアウト／テーマカラー／フォントの変更、要素の表示非表示、変数設定、任意箇所のテキスト更新など

テーマオプションの設定

テーマオプションの設定は、テーマに「メタタグ」を記載することで、設定値等のオプション項目が表示され、セットされた「メタタグ」の値を「html/css/JavaScript」側で反映する記載を行うことで、独自のテーマオプションを実装することが可能となります。

GoogleAnalytics

下記のコードをテーマへ設定し、テーマオプションの画面で「GoogleAnalytics」のIDをセット（入力）することでトラッキングコードの設定ができます。

{block:Hidden}
    <meta name="text:Google analytics ID" content="">
{/block:Hidden}

セットしたIDを反映

{text:Google Analytics ID}
※ 文字列として反映箇所へ設置

If文を使って「IDが設定してある時」に限定する

{block:IfGoogleAnalyticsID}〜{/block:IfGoogleAnalyticsID}
※ メタタグで設定した項目名のスペースを詰めて記載する
※ IfNotも利用可能:{block:IfNotxxx}〜{/block:Ifxxx}

{block:IfGoogleAnalyticsID}
 <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', '{text:Google Analytics ID}', 'auto');
    ga('send', 'pageview');
 </script>
{/block:IfGoogleAnalyticsID}