Migaru-Days

身軽に暮らす、考える。

ーおすすめ記事ー

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

スポンサーリンク

f:id:damarin:20180523230757p:plain

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

 

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

 

はてなブログのカスタマイズ記事は、検索すればすぐに沢山の記事が見つかります。

ただ、固定ページのカスタマイズ記事があまり無いようなので、ここでは固定ページの作り方とカスタマイズについてまとめています。

 

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

 

 

固定ページについて

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

help.hatenablog.com

固定ページは日付やカテゴリーなどの表示がありません。はじめは真っ白なページです。

 

固定ページを作ってみました

f:id:damarin:20180523233655j:plain

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

サイトマップ、プライバシーポリシー、お問い合わせは固定ページから。プロフィールはaboutページから作っています。

 

 

固定ページの作り方

f:id:damarin:20180523084414p:plain

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

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

 

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

 

 

固定ページを編集する

f:id:damarin:20180523084430p:plain

編集画面でできることは

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

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

 

ここでHTMLにCSSを記入していくことで、この固定ページだけのカスタマイズをすることができ、記事ページとは異なるデザインにすることができます。

 

 

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

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

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

static-page-XXXX

という説明です。

 

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

つまり固定ページのURLをaiueoにした場合はCSSで「static-page-auieo」を使ってデザインを変更します。

 

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

 

 

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

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

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

(*デザインや固定ページでCSSを扱うときは、必ずバックアップを取ってください!)

 

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

f:id:damarin:20180523092355p:plain

 

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

f:id:damarin:20180523095056p:plain

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

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

 

 

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

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

f:id:damarin:20180523233342p:plain

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

 

 

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

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

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

 

 

 

プレビューがすぐに見れる

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

 

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

aboutページはプレビューができないのでめんどくさいですね。

 

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

 

 

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

www.oheya-migaru.com

はてなブログの「not found」ページもカスタマイズしています。not foundを「お探しの記事は見つかりませんでした」で終わらせない方法。

キーワードで探す