Illustfolio Lumina - イラストレーターのための新しいポートフォリオサイトテンプレート
テーマのカスタマイズを進めていきましょう！
こまめに保存しながら作業を進めるのがよいでしょう。
全体的な外観を設定します。
| オプション名 | 説明 |
|---|---|
| タイトル | * 必須 |
| ブログの名前です。 |
例: John’s Portfolio | | 説明 | Tumblrのサービス内（スマホアプリ含む）でのブログの説明文です。 Illustfolio Luminaでは表示されませんが、Tumblr内で表示されたときの見栄えが良くなるので設定しておくことをおすすめします。
例: イラストレーターJohn Smithのポートフォリオサイト | | ヘッダ画像 | Tumblrのサービス内（スマホアプリ含む）でのヘッダ画像です。 Illustfolio Luminaでは表示されませんが、Tumblr内で表示されたときの見栄えが良くなるので設定しておくことをおすすめします。 また、SNSでトップページがシェアされたときの画像にも使われます。
2048 x 1152px (アスペクト比 16:9) 、ファイルサイズ10MB以下を推奨。 | | プロフィール画像 | プロフィール画像です。ヘッダとフッタに表示されます。 | | プロフィール画像の形 | 現時点では対応していません。 | | タイトルのフォント | 「Name」のフォントを変更できます。
Tumblrにないフォントを使うこともできます。 | | 背景色 | ヘッダの背景色を変更できます。
暗い背景色で文字が見えにくい場合、テーマオプション「Invert Header Text Color」を「有効」にしてください。 | | タイトル色 | 「Name」の文字色を変更できます。 | | 強調色 | 強調色（リンク文字色など）を変更できます。 | | ヘッダ画像を表示 | 現時点では対応していません。 | | ヘッダ画像を拡大する | 現時点では対応していません。 | | プロフィール画像を表示 | 現時点では対応していません。 | | タイトルを表示 | 現時点では対応していません。 | | 説明文を表示 | 現時点では対応していません。 |
<aside> ℹ️ 上記の設定に限り、「ブログ設定」の「外観を編集」ボタンからも編集することができます。
</aside>
| オプション名 | 説明 |
|---|---|
| タイトル | SNSでシェアされたときに表示される、ブログの名前です。 |
例: John’s Portfolio | | 説明 | SNSでシェアされたときに表示される、ブログの説明文です。
例: イラストレーターJohn Smithのポートフォリオサイト |
| オプション名 | 説明 |
|---|---|
| Cover | * 必須 |
| カバー画像（ヘッダに大きく表示される画像）です。 |
1024 x 1024pxの正方形、ファイルサイズ1MB以下を推奨。 ※ファイルサイズが大きいとページ表示速度が低下します。 | | Cover 2, Cover 3 | カバー画像に2枚目, 3枚目の画像を指定し、スライドショー形式で表示します。
1024 x 1024pxの正方形、ファイルサイズ1MB以下を推奨。 ※ファイルサイズが大きいとページ表示速度が下がる場合があります。 | | Body | 本文のフォントを指定できます。
デフォルト: Favorit
Tumblrにないフォントを使うこともできます。 | | Gallery layout | ギャラリーの表示方法を選択します。
Masonry: イラストをトリミングせず表示します。 Grid: イラストを正方形状に揃えて表示します。 | | Corner Style | 画像やボタンの角を丸くするか選択します。
Square: 角丸にしません。 Rounded: 角丸にします。 | | Cover Size | カバー画像の表示サイズを選択します。
Square: 正方形に表示します。(デフォルト) Portrait: Squareよりも幅と高さを大きくとって表示します。 Landscape: ブラウザ幅一杯に表示します。 Full: ブラウザ幅と高さ一杯に表示します。
※ [Landscape], [Full] は画像の一部を切り取って表示します。PCとスマートフォン両方で表示確認をおすすめします。 以下のサイズでカバー画像を作成すると、切り取られる領域を抑えることができます（切り取りを完全に防ぐことはできません）。 [Landscape] 1200 x 400px [Full] 1200 x 1000px | | Hide Tumblr menu | サイトに表示されるTumblrのメニューを非表示にします。すっきりした表示にしたい場合、有効にすることをおすすめします。
デフォルト: 有効 | | Enable Infinite Scroll | 無限スクロールを有効にします。 画面下までスクロールすると、次のページを自動的に読み込みます。有効にすることをおすすめします。
デフォルト: 有効 | | Enable Quick Preview | クイックプレビュー（投稿をその場で開く機能）を有効にします。 トップページでサムネイルをクリックしたとき、投稿をその場で素早く確認できます。
デフォルト: 有効 | | Invert Header Text Color | ヘッダの文字色を反転（白文字に）します。背景色が暗い色で文字が読みにくい場合、有効にしてください。
デフォルト: 無効 | | Show Illustfolio Lumina Branding | フッタに小さく「Made with Illustfolio Lumina」のラベルを表示します。 表示するかは完全に任意ですが、有効にしていただけると作者が喜びます。
デフォルト: 有効 |
プロフィール部分を設定します。
| オプション名 | 説明 |
|---|---|
| Position | 職業・肩書を入力します。 |
例: Illustrator | | Name | * 必須 名前を入力します。
例: John Smith |
| Biography | 自己紹介を入力します。
文字数制限はありませんが、150字程度がバランスがよくおすすめです。
改行として<br>タグが使えます。
例: フリーランスのイラストレーター。ZZ県出身。<br> スマートフォンゲームのキャラクターデザイン、雑誌イラスト、ライトノベル挿絵などを担当。 個性的なキャラクターや魅力的な場面を描くのが得意です。<br> 第XX回YY社イラストコンテストでZZZ賞を受賞。<br> 好きなジャンルは「○○○︎」と「□□□︎」と「△△△」。 |
ソーシャルアカウント部分を設定します。
| オプション名 | 説明 |
|---|---|
| X URL | 入力すると、Xアカウントへのリンクを表示できます。 |
例: https://x.com/example | | Instagram URL | 入力すると、Instagramアカウントへのリンクを表示できます。
例: https://instagram.com/example | | Pixiv URL | 入力すると、pixivアカウントへのリンクを表示できます。
例: https://pixiv.net/users/example | | Bluesky URL | 入力すると、Blueskyアカウントへのリンクを表示できます。
例: https://bsky.app/profile/example | | Threads URL | 入力すると、Threadsアカウントへのリンクを表示できます。
例: https://threads.net/example | | Facebook URL | 入力すると、Facebookアカウントへのリンクを表示できます。
例: https://facebook.com/example | | YouTube URL | 入力すると、YouTubeチャンネルへのリンクを表示できます。
例: https://youtube.com/channel/example | | Website URL | 入力すると、自分のWebサイトへのリンクを表示できます。
例: https://example.com | | Custom link 1 label | 入力すると、その他のソーシャルアカウントを最大2つまで表示できます。 ここでは、1つめのソーシャルアカウントのラベル（文言）を入力します。
例: Twitch | | Custom link 1 URL | 1つめのソーシャルアカウントのURLを入力します。
例: https://twitch.tv/example | | Custom link 2 label | 2つめのソーシャルアカウントのラベル（文言）を入力します。
例: Misskey | | Custom link 2 URL | 2つめのソーシャルアカウントのURLを入力します。
例: https://misskey.io/@example |
<aside> 🚨
[Custom link 1], [Custom link 2] はクリックするまで開きません。
そのため、訪問者にアクセスを促したいサイトへの誘導（例: コミッションや通販サイト）には適していません。かわりにCTAボタンやヘッダナビゲーションの利用をおすすめします。
</aside>
CTAボタンを設定します。ボタンは最大2つまで表示できます。
<aside> ℹ️ CTAボタンとは、ページの訪問者に対して何かしらの行動を促すものを指します。 詳しい自己紹介ページへの誘導、問い合わせページへの誘導などの用途がおすすめです。
</aside>
| オプション名 | 説明 |
|---|---|
| CTA button 1 label | ヘッダに表示する1個目のボタンのラベル（文言）を入力します。 |
| 詳しくは「ページを作る」をご覧ください。 |
例: 自己紹介 | | CTA button 1 path | 1個目のボタンのリンク先を入力します。 詳しくは「ページを作る」をご覧ください。
例: about | | CTA button 2 label | ヘッダに表示する2個目のボタンのラベル（文言）を入力します。 詳しくは「ページを作る」をご覧ください。
例: お仕事のご依頼 | | CTA button 2 path | 2個目のボタンのリンク先を入力します。 詳しくは「ページを作る」をご覧ください。
例: contact |
カテゴリーナビゲーション（作品をカテゴリーごとに分けて表示できる機能）の設定をします。
イラストの整理に役立つほか、自分がどんな種類のイラストが描けるのかアピールできるメリットも備わっています。
<aside> ℹ️ 本機能は、投稿につけられたタグをもとに分類します。 投稿にタグをつけていない場合は、「作品を投稿する」を参考に、まずタグをつけてください。
</aside>
| オプション名 | 説明 |
|---|---|
| Category 1 ~ 10 label | カテゴリーナビゲーションのラベル（文言）を入力します。最大10個まで入力できます。 |
例: Original Character Design Fanart … | | Category 1 ~ 10 tag | 「Category 1 ~ 10 label」のカテゴリーと紐づけたいタグを入力します。 各カテゴリーに紐づけられるタグは1つだけです。
例: Original Character Design Fanart … |
これでカスタマイズは終わりです。お疲れ様でした！
「せっかくサイトを作ったのに、ボタンのリンク先が間違っていた…」といったミスは、冗談でなく本当によく起こります。
そんなうっかりミスを防ぐために、動作確認はしっかり行いましょう。以下のチェックリストを使って確認してください。
<aside> ℹ️ チェックのコツは、「リンクやボタンを実際に押す」「PCとスマートフォン両方で確認する」です。
</aside>
<aside> ✅ チェックリスト