各項目のカスタマイズ

進捗バー

Tokusetsu 3 のカスタマイズ方法について詳しく解説します。

「テーマの編集」画面

Tumblr の「テーマの編集」画面で、Tokusetsu 3 のカスタマイズができます。すべての欄を埋める必要はありません。必要なところだけ埋めてください。

項目が多いので、こまめに保存しながら作業を進めるのがよいでしょう。

外観オプション

タイトル 必須 作品名を入力します。さまざまな場所で使うので必ず入力してください。
ANTHEMS 3
説明 必須 サイトの説明文(meta description)やシェアされたときの文言に影響します。特にこだわりがなければ、後述する「Introduction」のコピペでよいでしょう。
※なお、ここを空欄にすると、Twitterでシェアしたとき(Twitter Cards)の表示がエラーになるようです。なにかしらテキストを入れておくほうが安全です。
トクセツレコーズが2年ぶり3枚目のアルバムをリリース! ...
プロフィール画像 faviconとして表示されます。サイズは特に指定ありませんが、正方形の画像がよいでしょう。

画像素材をアップロードする

ファイル形式は jpg, gif, png など tumblr が読み取れる形式ならなんでもOKです。はじめて Tokusetsu を使う場合は、プレビューを確認しながら少しずつ素材を埋めていく方法をおすすめします。

必須 ラベルがついている欄は必須です。なお、デモページで使っている画像のリンクを設けましたので参考にしてください。(一見なにも見えない画像は白抜き文字です)

Background Image 背景画像。タイル状に敷き詰められるので、継ぎ目のないパターン画像がベターです
Header Image 必須 ヘッダのメイン画像。1800*1000px推奨。ここにタイトルロゴを含めてもよいですが、ロゴは後述する「Title Logo」欄を使ったほうが綺麗に仕上がります。したがって、ここはロゴを省いたメインビジュアルを載せるとよいでしょう
※サンプル画像
Circle Logo あるとよい ヘッダに表示するサークルロゴ画像。透過png推奨。原寸の2倍のサイズで作成すると高解像度ディスプレイで綺麗に見えます(その場合、後述の「Circle Logo Width」に原寸の横幅を入力してください)。
ヘッダが白っぽい場合は暗めの色、黒っぽい場合は白抜きロゴにするとよいでしょう。
※サンプル画像
Jacket 必須 CDのジャケットや同人誌の表紙画像。横900px以上推奨。
※サンプル画像
Title Logo あるとよい ヘッダに表示する作品ロゴ画像。透過png推奨。原寸の2倍のサイズで作成すると高解像度ディスプレイで綺麗に見えます(その場合、後述の「Title Logo Width」に原寸の横幅を入力してください)。
※サンプル画像
Banner バナー画像。サイズは自由。
※サンプル画像
Og Image あるとよい TwitterやFacebookでシェアされたときに表示される画像。1200*630px推奨。
※Twitterにシェアされたときの見え方はこのバリデータ、Facebookはこのデバッガから確認できます。
※なにも入力しない場合、「Header Image」を代替画像として表示します。
※サンプル画像
Introduction Heading Image イントロダクションの見出しの文字を置き換える画像。透過png推奨。ひと味違った個性を出したいときにご利用ください。詳しくはうまく作るコツページをご覧ください。
※サンプル画像

全般

Accent アクセントカラーを指定できます。
デフォルト: #ed1c24
Title 見出し部分のフォントを指定できます。
デフォルト: Helvetica
Body 本文のフォントを指定できます。
デフォルト: Helvetica
Enable Dark Mode テーマカラーを「Dark」にします。無効にすると「Light」となり、白っぽいページになります。
デフォルト: 有効

01 | ヘッダ

以下、編集箇所がわかりやすいように、セクションごとに01などの通し番号を振っています。

このセクションで編集できる箇所
Global Header Color グローバルヘッダ(ページ上部の帯状のヘッダ)の色を選択します。透明だとサークルロゴが読みづらいときに「Dark」「Light」「Accent Color(上記で指定したアクセントカラー)」から選択してください。なお「Transparent」はPCのみ有効です(スマホで見るとロゴがヘッダにかぶりすぎるので)
デフォルト: Transparent(透明)
Enable Share Buttons Twitter, Facebookのシェアボタンを表示するか選択します。有効にした場合はページ下部にもシェアボタンが表示されます。
デフォルト: 有効
Header Title Logo Position タイトルロゴ画像の位置を「Top」「Middle」「Bottom」から選べます。
デフォルト: Bottom
Circle Logo Width サークルロゴの横幅を数値で入力します(単位: px)。何も入力しない場合、画像を等倍で表示します。
150
Header Title Width タイトル画像の横幅を数値で入力します(単位: px)。何も入力しない場合、画像を等倍で表示します。
500

02 | イントロダクション

このセクションで編集できる箇所
Introduction イントロダクション本文を入力します。やや長めに書いたほうが見栄えが良いです。改行タグ(br)が使えます。
トクセツレコーズが2年ぶり3枚目のアルバムをリリース! ...
Introduction Heading イントロダクション見出しを入力します。画像で代替するつもりでも、入力したほうがアクセシビリティが高まるので、できれば入れてください。
あれから2年──待望の3rdアルバム遂に完成!!
Introduction Heading Image Width イントロダクション見出し画像の横幅を数値で入力します(単位: px)。何も入力しない場合、画像を等倍で表示します。
500

03 | スペック

このセクションで編集できる箇所
Circle Name サークル名を入力します。
トクセツレコーズ
Circle URL サークルURLを入力します。
http://www.sanographix.net
Spec 仕様を入力します。
プレスCD + ブックレット8ページ
Release Date 発売日を入力します。
20xx年x月x日
Booth Number 即売会の配置番号を入力します。
201x年W3 第一展示場 X-00
Price 価格を入力します。
1,000円
Store 01-03 Name 販売先のストア名をそれぞれ入力します(3箇所まで)
A Store
Store 01-03 URL 各ストアの販売ページURLをそれぞれ入力します(3つまで)
http://example.com/item/0000000
Store Buttons Heading ストアへの誘導ボタンを表示するセクションの見出しを指定できます(※ "Store 01 Name"に何も入力していない場合は表示されません)
AVAILABLE NOW

ブックモード

同人誌・合同誌の告知用セクションです。

※ブックモードと言いつつも、特にモードの切り替え機能などはありません。同人CDの告知にもこのセクションは使えます。

Sample Image 01-06 本のサンプル画像をアップロードします(6枚まで)。サイズは自由ですが、あまり大きいファイルサイズになりすぎないほうがよいでしょう。
Book Sample Heading サンプル表示セクションの見出しテキストを指定できます。
SAMPLE

04 | 貼付けコード

Soundcloud Embed Code Soundcloudの貼り付けタグを入力します。貼り付けタグは、各楽曲の「Share」をクリックした先の「Embed」タブで、書いてあるコードの https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/<<ここの9桁くらいの数字>>&auto_play=false&... です。
78607110
Youtube Embed Code Youtubeの貼り付けタグを入力します。貼り付けタグは、「共有」-> 「埋め込みコード」の中に書いてあるコードの、http://www.youtube.com/embed/<<ここの文字列>> です。
hQPbpjdfbJM
Nicovideo Embed Code ニコニコ動画の貼り付けタグを入力します。貼り付けタグは動画のURLに記載されているsm12345678のような文字列です。
sm12345678

※ブログの設定画面の「常にブログをSSLで処理する」が有効になっていると正しく表示されません。無効にしてください。

05 | トラックリスト

このセクションで編集できる箇所
Track01-10 Title 曲名を入力します。10曲まで入力できます
DELTA
Track01-10 Description 曲に補足説明がある場合は入力します。二次創作の場合は原曲など書くと良さそうです。
feat.RIVERSIDE GIRLS

※曲を11曲以上入力したい場合は、「うまく作るコツ」ページをご覧ください。

06 | 追加の情報

このセクションで編集できる箇所

ページ下部に「追加の情報」セクションを表示できます。ノベルティ情報や、当日のおしながき画像など、補足する情報がある場合にご利用ください。

Footer Additional Content 「追加の情報」セクションを表示するか選べます。
デフォルト: 有効
Footer Additional Heading 「追加の情報」セクションの見出しを入力します。
会場特典
Footer Additional Text 「追加の情報」セクションの本文を入力します。
会場来場者に特典として、特製ステッカーをプレゼントします
Footer Additional Image 「追加の情報」セクションに表示できる画像をアップロードできます。
※サンプル画像

07 | クレジット

このセクションで編集できる箇所
Staff01-06 Name スタッフの名前を入力します。6人まで入力できます。
TOKU SETSUKO
Staff01-06 Role 各スタッフの役割を入力します。
Vocal
Staff01-06 URL 各スタッフのウェブサイトURLを入力します。サイトを持っていないスタッフは空欄で良いです。

※スタッフを7人以上入力したい場合は、「うまく作るコツ」ページをご覧ください。

08 | フッタ

このセクションで編集できる箇所
Footer Text ページの最後に表示するテキストを入力します。二次創作の場合は注意書きとかあると良いかもです。
当作品は二次創作作品であり、すべての企業・団体とは一切関係ありません。

これでカスタマイズは終了です。お疲れ様でした。

いよいよ公開……の前に、動作確認しておきましょう。次ページの確認事項をお読みください。

次のページへすすむ