固定ページを作成・編集する

固定ページ機能を利用すると、投稿した順に時系列で扱われる通常の記事とは別に、固定URLのみで閲覧できる独立した特別なページを作成・更新できます。

「お問い合わせ」や「自己紹介」「注意事項」「リンク集」といった静的なコンテンツを用意したいときに便利です。

固定ページは、有料プラン「はてなブログPro」に加入しているユーザーが運営するブログで利用できます。

固定ページの作成

固定ページは、ブログのダッシュボードの左側にある「固定ページ」メニューから「ページの管理」画面を開いて、作成・管理できます。

ページを作成するには、まずその「URL」を指定します。URLは、はてなブログの通常の記事のカスタムURLと同じように指定できますが、記事の配信ディレクトリー(デフォルトではentryを含まないパスを自由に作成できます。

はてなブログのシステムで使用しているaboutarchiveといったパス名の固定ページを作成することもできますが、表示する際にはシステムのパスが優先されます。また、entry/から始まる固定ページは作成することができません。

ページの編集・更新

「URL」を入力して「ページを作る」ボタンをクリックすると、ページ編集画面が開きます。

ページ編集画面では、通常の記事編集画面と同じようにページを作成・更新できます。編集サイドバーや入力補助ツールバーも使用でき、編集モードも切り替えられます。ページ編集画面の左下にある公開・更新ボタンを押すと、ページが公開されます。下書き保存もできます。

作成した固定ページは、トップページや記事一覧ページ、サイドバーの新着記事モジュールなどにも掲載されず、フィード(ATOMおよびRSS)でも配信されません。どこからも動線のないページとなるため、サイドバーの「リンク」モジュールなどで明示的にリンクしてください。

固定ページへのリンクを記載する

サイドバーの「リンク」モジュールは下記の手順で編集できます。

  1. ブログのダッシュボードからデザイン設定画面に移動します
  2. 画面の左上にあるスパナアイコン(カスタマイズ)をクリックします
    f:id:hatenablog:20190205145133p:plain:w300
  3. 「サイドバー」をクリックします
  4. 「リンク」という項目の横にある「編集」をクリックします
  5. こちらに、固定ページへのリンクを記入します
  6. 「変更を保存する」ボタンを押します

詳細は「サイドバーにモジュールを設置する」を参照してください。

ページの管理と注意点

公開または下書き保存した固定ページは、ページの管理画面の下部に一覧表示されます。「編集」ボタンをクリックして、ページを再編集・更新・下書きに戻すなどができます。通常の記事と同じように編集履歴を確認することもできます。

ページを削除するには、ページ編集画面を開いて、右下にある削除ボタンをクリックしてください。

そのほか、以下の点に注意してください。

  • ページのURLは、編集オプションの「カスタムURL」で変更できます。
  • ブログメンバーもページを作成・編集できます(寄稿者権限のメンバーは下書き保存のみ可能です)
  • 作成できるページ数に制限はありません
  • 下書き共有URLが取得できます

また、次のような制限があります。

  • カテゴリーを設定することはできません
  • ページの公開日時は指定できず、予約投稿もできません
  • IDコールは通知されません
  • ブログ内検索で検索結果に表示されません
  • ブログトップや記事一覧ページに表示されません

ページのレイアウト

固定ページは、通常の記事ページから、時系列の記事に特有の要素を除いたレイアウトになっています。

具体的には、公開日時、執筆者、コメント欄、ソーシャルパーツ、「記事上」「記事下」のカスタマイズ(HTMLの自由記述欄)、関連記事、はてなによる広告(非表示にしていない場合)、本文上の日付、カテゴリー、パンくずリスト(詳細設定で設定できるもの)などを表示しません。

さらに「編集オプション」の「レイアウト」欄で、サイドバーの有無を選択できます。

レイアウト 説明
記事レイアウト 通常の記事と同様のレイアウトで、サイドバーを表示します。
ヘッダ・フッタレイアウト サイドバーを表示せず、タイトルと本文のほか、ヘッダ・フッタが表示要素になります*1

スマートフォンでのレイアウト

スマートフォンのデフォルト表示では、固定ページはPC版に準じたレイアウトになります。本文下の「プロフィール」「注目記事」などスマートフォン版に特有の要素は「記事レイアウト」では表示し、「ヘッダ・フッタレイアウト」では表示されません。

デザイン設定で「レスポンシブデザイン」を有効にしている場合には、スマートフォンでもPCと同じレイアウト、同じデザインテーマで表示されます。

ページのデザイン

固定ページに特有のデザインを施したい場合は、デザイン設定の「デザインCSS」で、ページごとのbodyに付与される次のクラスを使ってスタイルを記述できます。XXXX部分は、ページのURLになります。

static-page-XXXX

*1:詳細編集でヘッダとフッタを非表示にしていれば、タイトルと本文だけになります