はてなブログの固定ページをCSSでカスタマイズする方法

こんにちは。マリ（＠damarino_oheya）です！

はてなブログの固定ページで、プロフィール、プライバシーポリシー、お問い合わせページなどを作りました。

その際、作った固定ページの見出しをカスタマイズしてみました。

固定ページのカスタマイズをすることで、記事ページとは少しだけ違う変化をつけることができます。

この記事では、固定ページの作り方とカスタマイズについてまとめています。

はてなブログの固定ページ

はてなブログの固定ページは、はてなブログporの方だけが利用できるサービスです。

help.hatenablog.com

固定ページは日付やカテゴリーなどの表示がありません。

はじめは真っ白なページです。

このブログの固定ページはこちら

このブログで固定ページを使っているページはこちらです。

• サイトマップ
• プライバシーポリシー
• お問い合わせ
• プロフィール

サイトマップ、プライバシーポリシー、お問い合わせは固定ページから。

プロフィールはaboutページから作っています。

固定ページの作り方と編集方法

作り方は簡単で、記事を書くのと同じように作ることができます。

固定ページの作り方

固定ページは、はてなブログporであれば作成自体はかんたんです。

編集画面にて、固定ページ→「ページを作る」のURLを決めて入力→その横のボタンをクリックするだけです。

そこで作ったページはその下の「ページの管理」に表示され、ここから編集していくことになります。

固定ページの編集方法

編集画面でできることは

• 編集する
• HTMLをいじれる
• プレビューできる

記事を書くときと同じです。

このとき、HTMLにCSSを記入することで、この固定ページだけのカスタマイズをすることができます。

記事ページとは異なるデザインにして変化が作れます。

固定ページをカスタマイズする方法

固定ページのデザイン変更について、はてなブログヘルプでは

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

static-page-XXXX

という説明です。

固定ページにつけたURLが「static-page-XXXX」のXXXXに入るということですね。

そのため、本文のHTMLに＜style type=”text/css”＞＜/style＞（←＜＞は<>で）を入れ、その中に.static-page-auieo .entry-content h3で見出しなどのデザインを変更します。

固定ページをカスタマイズするCSS

というわけで、デモページを固定ページで作ってみました。

https://www.oheya-migaru.com/aiueo

（＊はてなブログのデモページです）（当ブログはワードプレスに移転しております）

CSSを設定していないときはこんな感じ。記事ページと同じです。

CSSを設定することでこの固定ページのみのカスタマイズとなります。

本文のHTMLの下に、こちらのCSSを作っています。

注意点として、固定ページで見出しを変えるときは、記事ページの見出しの要素を消す（ここでは/*記事の見出しの要素を消しています*/の部分です）必要があります。

aboutページをカスタマイズする方法

はてなブログのaboutページも同様にカスタマイズすることができます。（aboutページは無料版でも使えます。）

モードを「HTML」で編集しました。

aboutページをカスタマイズするCSS

aboutページをカスタマイズするCSSは固定ページとは少し違います。

固定ページは.staticから始まっていましたが、aboutページは.page-about〜です。

プレビューがすぐに見れるのが良い！

正直、固定ページのカスタマイズはめんどくさいです。

めんどくさいけどCSSを固定ページのHTMLに書くので、CSSが効いてるか効いてないかをプレビューですぐに確認できることが救いです。

固定ページのカスタマイズは需要はあまり無いみたいですが、固定ページにちょっとした変化をつけたかったのでカスタマイズしてみました。

このような記事もあります

はてなブログ3年目の当ブログで行ってきたカスタマイズまとめ

はてなブログで独自ドメインにして4ヶ月のPV数を公開！PVアップのためにしてきたこと。