ページとは

Tumblrの「ページ」機能は、ブログとは別に固定された情報を提供するためのページを作成できる機能です。

「About（プロフィール）」「Contact（連絡先）」「FAQ（よくある質問）」など、ブログのメインコンテンツとは独立した情報を整理して提供するのに適しています。

ページを作る

「テーマの編集」画面で、「＋ページの追加」を押します。

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

ページの設定

「ページを編集」画面で、以下の操作を行います。

「このページへのリンクを表示する」を「有効」にします。
- 有効にすると、ヘッダナビゲーションにリンクが追加されます。
- リンクのラベル（文言）を編集できます。
作りたいページのURLを入力します。

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

ページ本文の作成

ページのタイトルと、ページの内容を入力します。

必要な情報を入力したら、保存して公開します。これで、ページとして表示されるようになります。

問い合わせフォームを埋め込む

仕事を受け付けるために、問い合わせフォームを設置してみましょう。

これにより、自分のメールアドレスを公開することなくメッセージを受け取れるようになります。

Googleフォームを例に説明します。

<aside> ℹ️ 埋め込みコードが発行できるサービスであれば、Googleフォームに限らずどのようなサービスでも埋め込めます。

</aside>

Googleフォームを作成

Googleフォームを作成し、必要な項目を追加します。

埋め込みコードを取得

フォームが完成したら、右上の「送信」ボタンを押します。

「<>」アイコン（埋め込み）をクリックします。

埋め込みコードが表示されるので、それをコピーします。

ページに埋め込む

Tumblrのページ編集画面で、ツールバーの「HTML」を押してHTML編集モードに切り替えます。

コピーした埋め込みコードをページに貼り付けます。

「プレビューを更新」ボタンを押して、問題なくフォームが表示されることを確認したら「保存」を押して保存します。

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

ページ内に見出しを入れる方法

<aside> ℹ️ この項目は初級レベルのHTMLの知識を必要とします。

</aside>

ページの編集では、画像の追加・リンクの挿入などがツールバーから行えます。

しかし、下記の画像のような「見出し」はツールバーから入れられません。見出しを入れるには、HTML編集モードに切り替える必要があります。

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

HTMLモードで見出しを入れる

ツールバーの「HTML」を押して、HTML編集モードに切り替えます。

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

HTML編集モードでは、本文内に直接見出しタグを記述できます。例えばこんな感じです：

<h2>中見出し</h2>
<h3>小見出し</h3>

必要に応じて、ほかのHTMLタグも記述できます。

例

以下はページに見出しを入れた記述例です。

<h2>Profile</h2>
<h3>John Smith</h3>
<p>フリーランスのイラストレーター。</p>
<p>ZZ県出身。 スマートフォンゲームのキャラクターデザイン、雑誌イラスト、ライトノベル挿絵などを担当。 個性的なキャラクターや魅力的な場面を描くのが得意です。</p>
<p>第XX回YY社イラストコンテストで優秀賞を受賞。好きなジャンルは「○○○︎」と「□□□︎」と「△△△」</p>
<h2>受賞歴</h2>
<ul>
<li>第XX回YY社イラストコンテスト　ZZZ賞</li>
<li>第XX回YY社イラストコンテスト　ZZZ賞</li>
<li>第XX回YY社イラストコンテスト　ZZZ賞</li>
</ul>
<h2>仕事履歴</h2>
<h3>イラスト</h3>
<ul>
<li>「異世界転生者のスキルハック」（XXX様）表紙・挿絵</li>
<li>「魔法学園の最強賢者」（XXX様）表紙・挿絵</li>
<li>「ダンジョン探索者の冒険記」（XXX様）表紙・挿絵</li>
<li>「転生したら最強の聖女になってました」（XXX様）表紙・挿絵</li>
<li>「オンラインゲームの最強冒険者」（XXX様）表紙・挿絵</li>
</ul>
<h3>ゲーム</h3>
<ul>
<li>「マジカル・キングダム・クエスト」（XXX様）キャラクターデザイン数種</li>
<li>「モンスター・マッドネス」（XXX様）キャラクターデザイン数種</li>
<li>「スターライト・シティ・ショータイム」（XXX様）キャラクターデザイン数種</li>
<li>「ミステリアス・アドベンチャー・メイズ」（XXX様）キャラクターデザイン数種</li>
<li>「アニマル・アドベンチャー・エクスプローラーズ」（XXX様）キャラクターデザイン数種</li>
<li>「ウィザード・アカデミア・クエスト」（XXX様）キャラクターデザイン数種</li>
</ul>

<aside> ℹ️ <h1>タグはページのタイトルで使っているため、<h2> や<h3>を使うのがおすすめです。

</aside>

次のステップへ

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

Illustfolio Lumina ニュースレター

</aside>

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

</aside>