2019-08-17こんにちは。マリ(@damarino_oheya)です!はてなブログの固定ページで、プロフィール、プライバシーポリシー、お問い合わせページなどを作りました。その際、作った固定ページの見出しをカスタマイズしてみました。マリはてなブログのカスタマイズ記事は、検索すればすぐに沢山の記事が見つかりますが、固定ページのカスタマイズ記事ってあまり無いんですよね。固定ページのカスタマイズをすることで、記事ページとは少しだけ違う変化をつけることができます。この記事では、固定ページの作り方とカスタマイズについてまとめています。関連記事ブログデザインをリニューアルしました!カスタマイズまとめ。はてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。固定ページをカスタマイズするCSSaboutページをカスタマイズする方法aboutページをカスタマイズするCSSプレビューがすぐに見れるのが良い!はてなブログの固定ページはてなブログの固定ページは、はてなブログporの方だけが利用できるサービスです。help.hatenablog.com固定ページは日付やカテゴリーなどの表示がありません。はじめは真っ白なページです。このブログの固定ページはこちらこのブログで固定ページを使っているページはこちらです。サイトマッププライバシーポリシーお問い合わせプロフィールサイトマップ、プライバシーポリシー、お問い合わせは固定ページから。プロフィールはaboutページから作っています。作り方は簡単で、記事を書くのと同じように作ることができます。固定ページは、はてなブログporであれば作成自体はかんたんです。編集画面にて、固定ページ→「ページを作る」のURLを決めて入力→その横のボタンをクリックするだけです。そこで作ったページはその下の「ページの管理」に表示され、ここから編集していくことになります。編集画面でできることは編集するHTMLをいじれるプレビューできる記事を書くときと同じです。このとき、HTMLにCSSを記入することで、この固定ページだけのカスタマイズをすることができます。記事ページとは異なるデザインにして変化が作れます。固定ページのデザイン変更について、はてなブログヘルプでは固定ページに特有のデザインを施したい場合は、デザイン設定の「デザインCSS」で、ページごとのに付与される次のクラスを使ってスタイルを記述できます。XXXX部分は、ページのURLになります。static-page-XXXXという説明です。固定ページにつけたURLが「static-page-XXXX」のXXXXに入るということですね。マリつまり固定ページのURLをaiueoにした場合はCSSで「static-page-auieo」を使ってデザインを変更します。h3で見出しなどのデザインを変更します。固定ページをカスタマイズするCSSというわけで、デモページを固定ページで作ってみました。https://www.oheya-migaru.com/aiueo(*はてなブログのデモページです)(当ブログはワードプレスに移転しております)参考・見出しデザインCSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選CSSを設定していないときはこんな感じ。記事ページと同じです。CSSを設定することでこの固定ページのみのカスタマイズとなります。本文のHTMLの下に、こちらのCSSを作っています。注意点として、固定ページで見出しを変えるときは、記事ページの見出しの要素を消す(ここでは/*記事の見出しの要素を消しています*/の部分です)必要があります。aboutページをカスタマイズする方法はてなブログのaboutページも同様にカスタマイズすることができます。(aboutページは無料版でも使えます。)モードを「HTML」で編集しました。aboutページをカスタマイズするCSSaboutページをカスタマイズするCSSは固定ページとは少し違います。固定ページは.staticから始まっていましたが、aboutページは.page-about〜です。プレビューがすぐに見れるのが良い!正直、固定ページのカスタマイズはめんどくさいです。めんどくさいけどCSSを固定ページのHTMLに書くので、CSSが効いてるか効いてないかをプレビューですぐに確認できることが救いです。マリaboutページはプレビューができないのでちょっと面倒なんですよね・・・。固定ページのカスタマイズは需要はあまり無いみたいですが、固定ページにちょっとした変化をつけたかったのでカスタマイズしてみました。カテゴリーを表示するカスタマイズはてなブログ3年目の当ブログで行ってきたカスタマイズまとめはてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。2020-02-13お忙しい中失礼します。はてなブログでブログ運営をしている、LLENNと申します。先日、はてなブログで固定ページを作成しました。そのページでは、PC版のcssは反映されるものの、スマホ版が全く反映されません。マリさんのカスタマイズも導入させて頂いたのですが、同様の結果でした。運営にも問い合わせたのですが、「カスタマイズは自己責任」の一点張りです。リンクを貼りますので、可能な範囲で解決策を提示して頂けないでしょうか?場違いなコメントなのは分かった上でのお願いです。2020-02-13LLENNさまはじめまして。サイト拝見いたしました。▼こちらのサイトの「自作CSSが反映されない」に記載されているCSSをHTMLに記入してみてはいかがですか??(styleで囲って固定ページのHTMLに記入)https://koblog.hatenablog.jp/entry/2019/06/04/160000すみません、今ははてなproではないので固定ページを増やせず私では検証しようがなく、よろしくお願いいたします。▼どうしても無理な場合は、デフォルトのトップページ上におすすめ記事を表示する方法もあるので、検討されてみてください。https://www.oheya-migaru.com/entry-customize-header-recommendコメントありがとうございました。2020-02-14お返事ありがとうございます。タグで囲う方法、1度試してみます。第2,3の解決策まで御教授頂き本当に助かります。コメントをキャンセルメールアドレスが公開されることはありません。=前の記事ブログデザインをリニューアルしました!カスタマイズまとめ。雑記Aboutマリ身軽に暮らす日々のことを書いています。育児中だからこそシンプルな暮らしで楽するヒントを綴ります。長所を知って好きな自分を知ろう!私の長所100個一覧にしてみた。