テーマの購入

Illustfolio Luminaのサイトで、テーマを購入します。

Illustfolio Lumina - イラストレーターのための新しいポートフォリオサイトテンプレート

テーマのダウンロード

ダウンロード

Illustfolio Lumina購入時のEメールレシートを開き、テーマのZipファイルをダウンロードします。

<aside> ℹ️ 複数のファイルがあるときは、バージョンが一番新しいものをダウンロードします。

</aside>

スクリーンショット 2024-07-10 12.21.07.png

解凍

ダウンロードしたZipファイルを解凍（Windowsの場合は右クリック「すべて展開」）します。

index.html ファイルが解凍されます。ほかのファイルは使いません。

Tumblrにインストール

Tumblrアカウントの登録 or ログイン

Tumblrに登録します。

すでにアカウントをお持ちの方は、ログインします。

ブログの作成

<aside> 💡 すでにブログがある方はこの手順をスキップできます。

</aside>

Illustfolio Luminaを適用するためのブログを新規作成します。

テーマのインストール

PCのブラウザでTumblrを開き、次の手順で操作します。

ブログ設定

左メニュー「アカウント」を押して開きます。
「ブログ」一覧から、テーマを適用したいブログを選びます。
右メニュー「ブログ設定」を押します。

スクリーンショット 2024-07-10 13.22.44.png

「表示設定」項目で、次の設定を行います。

「アカウントを持っていないユーザーに[ブログ名]を表示しない」を「無効」
「[ブログ名]をサードパーティと共有しない」を「有効」

スクリーンショット 2024-07-10 13.15.12.png

テーマカスタマイズ画面へ

ブログ設定で「カスタムテーマを有効化」を有効にします。
「テーマを編集」を押して、テーマカスタマイズ画面へ移動します。

スクリーンショット 2024-07-10 13.22.34.png

テーマのコピー

Illustfolio Luminaの index.html を、HTMLファイルを開けるアプリケーション（Windows:メモ帳, Mac:テキストエディットなど）で開き、コードの全文をコピーします。

<aside> ⚠️ Macのテキストエディットを使う場合

ファイルを開くとき、「オプションを表示」を押して、「リッチテキストコマンドを無視」を選択した状態で開いてください。詳しくはAppleのヘルプ「HTML書類を表示する」項を参考にしてください。

https://support.apple.com/ja-jp/guide/textedit/txted0b6cd61/mac

下記のスクリーンショット右側のように表示されるのが正しいです。

</aside>

❌ 正しくない

スクリーンショット 2024-08-13 15.17.41.png

✅ 正しい

スクリーンショット 2024-08-13 15.09.00.png

テーマの適用

Tumblr のテーマカスタマイズ画面で「HTMLを編集」を押します。

スクリーンショット 2024-07-10 12.50.05.png

もとのテーマのコードをすべて削除して、Illustfolio Luminaのコードを貼り付けて保存します。

スクリーンショット 2024-07-10 12.50.54.png

必須の設定を行う

テーマカスタマイズ画面で、左メニュー最下部の「詳細設定」を押します。

スクリーンショット 2024-07-10 13.01.54.png

次の設定を行います。

「デフォルトのモバイルテーマを使用」を「無効」
「Google AMPを有効にする」を「無効」
「ページごとの投稿」を「12」
「Tumblrを広める」を「無効」

「保存」を押して設定を保存します。

スクリーンショット 2024-07-10 13.03.58.png

ブログの見え方を確認する

PCで確認する

ブログ設定の「アドレス」項目で、自分のブログにアクセスします。
Illustfolio Luminaが正しく適用されたか確認します。

<aside> ⚠️ [ブログ名].tumblr.com が正しいアドレスです。

www.tumblr.com/[ブログ名] はTumblr URLと呼ばれるもので、テーマが使えません。

</aside>

スマートフォンで確認する

スマートフォンからPCと同じURLにアクセスし、Illustfolio Luminaが正しく適用されたか確認します。

<aside> ℹ️ まったく違うデザインで表示される場合、デフォルトのモバイルテーマが表示されている可能性があります。「デフォルトのモバイルテーマを使用」が「無効」になっているか確認してください。

</aside>

<aside> ℹ️ スマートフォンでTumblrアプリにリダイレクトされる場合、FAQ「Tumblrアプリにリダイレクトされる」をご覧ください。

</aside>

チェックリスト

<aside> ✅ チェックリスト

[ ] 「[ブログ名]をサードパーティと共有しない」を「有効」にした。
[ ] 「カスタムテーマを有効化」を「有効」にした。
[ ] Illustfolio Luminaの index.html のコード全文を貼り付けて適用した。
[ ] 「デフォルトのモバイルテーマを使用」を「無効」にした。
[ ] 「Google AMPを有効にする」を「無効」にした。
[ ] 「ページごとの投稿」を「12」にした。
[ ] 「Tumblrを広める」を「無効」にした。
[ ] PCとスマートフォン両方でIllustfolio Luminaテーマが正しく適用されたことを確認した。 </aside>

次のステップへ

<aside> ✍️ テーマの更新情報をニュースレターでお知らせしますので、登録をおすすめします。頻度は1ヶ月に1通程度です。登録はいつでも解除できます。

Illustfolio Lumina ニュースレター

</aside>

<aside> 🤯 操作につまづいたと感じたら: どこが分かりにくかったのか、ぜひ教えてください！改善に役立てます。本ドキュメントのトップページ「フィードバック・問い合わせ先」からお知らせください。

</aside>