Tumblrのカスタマイズ

 

最近、英語のBlogを書こうと思い海外でよく使われてるTumblrというのを使っています。色々と自分好みに変えれるので少し調べたことを適当に書いてみます。

 

 

最初に

オプションを設置するのとか面倒くさかったら「HTMLを編集」のページで body { color: #ff0000; } みたいな感じで値を直接指定してもいいと思います。

 

 

HTMLの編集

f:id:omochin4eve:20170524163227j:plain

①自分のTumblrのトップページの右上の"Edit theme"

 

 

f:id:omochin4eve:20170524163234j:plain

または、設定画面の右上のアカウントアイコンをクリック→①外観を編集→②テーマを編集をクリックする。

 

 

f:id:omochin4eve:20170524163237j:plain

①テーマを編集できるページに飛ぶので、そこの「HTMLを編集」をクリック。HTMLが表示され、直接編集することができます。

 

 

オプションの作成

Tumblrでは独自にオプションを作ることができます。微調整したい項目(位置や色など)をオプション化するとサイトデザインする時に楽になります。

 

liginc.co.jp

 

オプションについての説明はこのページが分かりやすいです。今回は試しにサイトのテキストの色を変えるオプションを作成してみます。まず先ほどの「HTMLを編集」ページに行くと、ずらずらとHTMLが表示されていると思います。

 

 

f:id:omochin4eve:20170524170956j:plain

①html > body の中の{block:Hidden}と{block:Hidden}の間に沢山のmetaタグがあると思いますが、ここでオプションを設定します。

 

②ここに"<meta name="color:Text Color" content="#444">"と追記してみます。これは色を設定するText Colorという名前のオプションで、デフォルトの値は#444(灰色ぐらい)というオプションです。

 

 

オプションを設置

次にこのオプションを実際に設置してみます。これは文字の色を設定するオプションなのでスタイルシートに反映させます。

 

先ほどのオプションを設定するmetaタグ群の少し下に<style>とスタイルシートを指定するところがあると思います(使用しているテーマによっては別の場所かもしれません)

 

f:id:omochin4eve:20170524171031j:plain

①ここのbodyのcolor要素に {color:Text Color}; という感じで{オプションの種類:オプションの名前}というように記述します。これで設置は完了です。

 

 

オプションの調整

左上の←アイコンから「テーマの編集」ページに戻ると「テーマオプション」の項目に先ほどのオプションが追加されていると思います。

 

f:id:omochin4eve:20170524171047j:plain

こんな感じでリアルタイムに調節できて微調整したい時とかはわりと便利だと思いました(小並感)

 

おわり

 

 参考サイト 

https://www.tumblr.com/docs/en/custom_themes

https://tumblr.zendesk.com/hc/ja/categories/203334747-Tumblr%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA

 

追記

omochin4eve.hatenablog.com