Tumblrにオプション機能を追加する方法

2014-07-23

Tumblrではオプションを設定することで、編集画面からHTMLやCSSを変更することなく簡単に背景画像などを変更することができます。

オプションを設定するためにはhead部分にオプションのmetaタグを入れた状態で、オプションで設定した値を出力するためのタグをCSSやHTML内に設置します。

詳しい方法は以下のようになります。

Tumblrにオプションを作成する方法

headタグ内にオプションタグを設置

オプションを利用するにはheadタグ内にオプションタグを設置します。デフォルトでは以下のようになっています。

<head>

    <!-- オプションタグの設置 -->
    {block:Hidden}
    
    <!-- if文で入力値を判定 -->
    <meta name="if:Sliding header" content="1">    
    <meta name="if:Collapse navigation" content="1">
    <meta name="if:Endless scrolling" content="1">
    
    <!-- レイアウトの選択 -->
    <meta name="select:Layout" content="regular" title="Regular">
    <meta name="select:Layout" content="narrow" title="Narrow">
    <meta name="select:Layout" content="grid" title="Grid">
    
    <!-- DisqusとGAの設定 -->
    <meta name="text:Disqus shortname" content="">
    <meta name="text:Google analytics ID" content="">

    {/block:Hidden}

</head>

デフォルトで使用されているように、Hiddenタグを使うことでブラウザのソースから見えなくすることもできます。head内に設置したものは自由にタグ名を決めることが可能。

デフォルトではhead内で設定できるオプションの他にも外観オプションが設定されています。

外観オプションはheadタグ内で設定しなくても、標準で搭載されているのでそのまま使用可能。使えるタグは公式リファレンスのGlobal Appearanceを参照してください。

オプション値の出力先にタグを設置

オプションを設定できたら、オプションで入力された値を出力するためのタグを設置します。オプションタグは他のTumblrタグと同じように使用できます。

<style>
    
    <!-- 外観オプションのタグ -->
    body {
        background: {BackgroundColor};
    }

    h1 {
        font-family: {TitleFont}, "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
        font-weight: {TitleFontWeight};
    }

    h1 a,
    .description,
    .search-header {
        color: {TitleColor};
    }


    <!-- headで設定したオプション -->
    #header{
      padding: 40px 0;
      border-bottom: 3px dotted {color:Divider Color};
      text-align: center;
      background-color: {color:Header Background Color};
    }
    #header .title{
      margin: 0;
    }
    #header .title a{
      color: {color:HeaderTitle Color};
      font-family: {font:Title};
    }

</style>

if文はPHPのif文のようにtrue,falseの判定が可能。オプションでセレクトボタンによって選択された値（on=true,off=false）で判定します。

<!-- headでオプション設置 -->
<meta name="if:Collapse navigation" content="1">


<!-- bodyで出力 -->
<a class="selector">

    <!-- trueならblockの中身を表示 -->
    {block:IfCollapseNavigation}
        <div class="bar-icon-wrapper">
            <span class="bar-icon"></span>
            <span class="bar-icon"></span>
            <span class="bar-icon"></span>
        </div>
    {/block:IfCollapseNavigation}
    
    <!-- falseならblockの中身を表示 -->
    {block:IfNotCollapseNavigation}
        <span class="icon icon-search_16"></span>
        <span class="icon icon-close"></span>
    {/block:IfNotCollapseNavigation}

</a>