Teaprog.com

とあるエンジニアの日々の記録。エンジニアと関係のないようなことも書きます。

はてなブログの固定ページの活用方法

f:id:tk0137:20210702082457j:plain

固定ページのイメージ

目次

はじめに

 

前回の記事ではてなブログに問い合わせフォームを作成する方法を紹介させていただきました。

 

teaprog.com

 

そこでは、固定ページを使用する場面がありましたが、細かい説明はしていませんでした。

 

説明に行を費やして主題から逸れてしまうかもしれないと思いましたので、別の記事にまとめて詳しく書こうと思いました。

 

今回補足の意味も兼ねて改めてはてなブログの固定ページの活用の仕方を書いてみようと思います。

 

固定ページとは

 

固定ページについては、公式サイトであるはてなブログヘルプに記載がありますので、その内容を簡単にまとめます。

 

はてなブログヘルプへのリンク↓↓↓↓↓

 

固定ページを作成・編集する - はてなブログ ヘルプ

 

固定ページは、投稿した順に時系列で扱われる通常の記事とは別に扱われます。

 

固定ページのURLのみで閲覧できる独立した特別なページを作成・更新できます。

 

以上の特性を利用して、「お問い合わせ」や「自己紹介」、「注意事項」、「リンク集」といった静的なコンテンツを設置したいときに使用すると良いでしょう。

 

  固定ページを利用するには?

 

まず、固定ページを使えるようにするには、「はてなブログPro」へ加入している必要があります。

 

ちなみに、プランごとの料金は以下の通り。(2021年7月1日現在)

 

  • 1ヶ月コース:1008円
  • 1年コース:8434円(703円/月)
  • 2年コース:14400円(600円/月)

 

f:id:tk0137:20210701175712j:plain

図1

 

私は現在1年コースで契約していますが、機能の制約に縛られずに使用できているので、満足しています。

 

1年で8000円程度なら、長い目で見れば気にならない程度ではないかと、。

 

 固定ページの作成方法

 

まず固定ページを作成します。

 

はてなブログの左のメニューから「固定ページ」をクリックします。

 

「ページを作る」という項目に任意のURLを入力します。

 

このURLは固定ページをサイトからリンクなどで指定したいときに使用します。

 

固定ページが増えたときのことも考えて、URLのアルファベット列からどのような固定ページの内容かおおよそ推測できるようなものが良いでしょう。

 

URLをクリックし、「ページを作る」をクリックすると、 記事編集画面に移ります。

 

f:id:tk0137:20210701211913j:plain

図2

 

編集画面は下の図のように、通常の記事の編集とあまり変わりません。

 

下の図では、私が実際にお問い合わせページを作成していた様子です。

 

f:id:tk0137:20210701195903j:plain

図3

 

1つ気をつけなければならない点があります。

 

固定ページも通常の記事のように下書きで記事を保存したり、公開する事ができます。

 

ところが、公開しただけではサイト上のどこにも表示されないのです。

 

つまり、公開はされているものの、閲覧する事ができません。

 

これは覚えておきたい固定ページの特徴の1つでもあります。

 

ではどのようにして固定ページを閲覧できるようにするのか。

 

その方法とは、自分で固定ページのURLをHTML内に組み込んでリンクを作成することです。

 

そうして初めて固定ページへの道が開けます。

 

 例:サイドバーへ貼り付け方法

 

以下に、実際にはてなブログのサイドバーへ貼り付けるまでの手順を示します。

 

今回は、下の図にあるようにお問い合わせページのリンクをサイドバーに貼り付けてみます。

 

まず「固定ページ」の画面より、貼り付けたい固定ページのURLをコピーなどして控えておきます。

 

f:id:tk0137:20210701224521j:plain

図4

 

貼り付けたい固定ページのURLを控えておいたら、次ははてなブログの左側のメニューから「デザイン」をクリックします。

 

f:id:tk0137:20210701225423j:plain

図5

 

レンチのアイコンの「カスタマイズ」をクリックし、その配下のメニューから「サイドバー」をクリックします。

 

f:id:tk0137:20210701230441j:plain

図6

 

「サイドバー」をクリックしたら、その一番下にある「モジュールを追加」をクリックします。

 

f:id:tk0137:20210701230503j:plain

図7

 

そうすると「モジュールを追加」というポップアップが出てきます。

 

今回は固定ページへのリンクを貼り付けたいので「リンク」を選択します。

 

f:id:tk0137:20210701231432j:plain

図8

 

少し上のものと画面が若干違いますがご了承ください。

 

まず、サイドバーの「タイトル」を入力します。

 

今回は「お問い合わせ」のほかに「プライバシーポリシー」の固定ページのリンクも貼り付けたいので「About This Site」とします。

 

そうしたらいよいよ固定ページのリンクの出番です。

 

「リンク」というフォームの左側にリンク名、右側に固定ページのURLを入力します。

 

入力し終わったら左下の「適用」をクリックします。

 

f:id:tk0137:20210701225500j:plain

図9

 

以上の作業が終了したら、実際にサイトを見に行って確認します。

 

以下は実際のサイトの画面です。

 

サイドバーに確かに「About This Site」というスペースができており、その中に「Priacy Policy」、「Contact(お問い合わせ)」というリンクが表示されました。

 

f:id:tk0137:20210701233025j:plain

図10

 

以下の図は実際に「Contact(お問い合わせ)」のリンクをクリックしてみた様子です。

 

リンクをクリックすると、確かにお問い合わせフォームが現れ、正しくリンクが設定できている事がわかります。

 

f:id:tk0137:20210701233610j:plain

図11

 

以上でサイドバーにリンクを貼り付ける作業は終了です。

 

固定ページを利用する事でさらにサイトが良いものになりますように。

 

最後に

 

冒頭に述べたように、前回記事の補足的な記事にしようと思いましたが、それなりのボリュームのある記事になりました。

 

書く事が少ないという予想に反して、図を多用することになり、寝る直前まで焦って書くことになってしまいました。

 

意図せずとも、サイトの内容を豊富にできたという成長を感じる反面、コンテンツ量を制御できていなかったのではないかという思いもあります。

 

ですが、記事で書く事がないと悩んでいたことの方が多かったので、今回は前向きに捉えたいと思います。

 

最近は何気ない日常的なことをここに書く事が増えてきましたが、堅苦しくなりがちな技術系の記事に対して、良いバランスを保てているのではないのかと思っております。

 

以上、最後までありがとうございました。