Someday Somewhere

A little something to say in my everyday life

はてなブログの固定ページ:サイトマップをカスタマイズ

f:id:tsukisai:20190316100944p:plain

 

固定ページ

当ブログでは、「サイトマップ」、「お問い合わせフォーム」、「プライバシーポリシー」を固定ページで作成しています。 (固定ページは、はてなブログProを利用している場合に使用できます)

staff.hatenablog.com

要するに、固定ページとは
・通常の記事ページのように時系列で表示されない / 扱われない
・独立したURLを持ち、独立したページを作成することができる
ということになり、

だから、サイトマップ、お問い合わせフォーム、プライバシーポリシーなどを作成するときに使われることが多く、他にも色々と工夫して利用されている方もいるようです。

固定ページのレイアウト

最近、サイトマップ作成進行中なのですが、マップ上の記事タイトルがだんだん増えてくると、サイトマップとは言うものの、ただのなが~いリストみたいになってきています。 そして、画面右側にはいつも見慣れたサイドバーが…。

サイトマップなので、せめてサイドバーの無いデザインにしたいのにと思い、ふと固定ページ編集画面を見ると、「編集オプション」にレイアウトの選択肢があるじゃないですか。 あまり気にせず固定ページを利用していたので、気づきませんでした。

固定ページレイアウトの選択肢は二つ
記事レイアウト:通常の記事と同じレイアウト
ヘッダ・フッタレイアウト:通常の記事から、サイドバーを無くしたレイアウト

さっそく「ヘッダ・フッタレイアウト」を選択してみました。

結果は、ただ単にサイドバーが表示されないレイアウトでした。

サイドバーが表示されていないだけなので、サイドバーがあった箇所は空白となります。

せめて、画面全体を使う感じにしたかったので、下記サイトさんの方法を使わせて頂きました。

blog.minimal-green.com

<style>
#main {
    max-width: 1200px;/*各テーマのコンテンツ幅に合わせる */
    width: 100%;
    float: none;
margin: 60px auto 30px;/* 各自調整2つ目に必ずauto */
}
</style>

上記コードを固定ページの記事編集画面(HTML編集画面)に直接書き込みます。 記事編集画面に直接書き込むことにより、他のページのデザインが崩れたりする心配もありません。

ひとまず、画面全体をサイトマップとして使えるようにはしました。 ただ、使える面積を広くしたというだけで、なが~いリスト状態は変わっていません。 次は、もっと見やすいサイトマップのレイアウトにトライしてみようと思っています。

*後でスマホ画面を確認したところ、画面の左右いっぱいになっており、ぱっつんぱっつんといった感じでスペースが全く無い状態になっていました。 これもなんとかしたほうがよさそうです。