ここ数日、記事一覧とも言えるサイトマップの基本的な構成を作っていましたが、どうにか出来上がりました。 まだ、全ての記事を網羅しているわけではないので、時間をみつけて仕上げていくつもりです。
サイトマップの体裁
作成の過程は先日の記事（↓）に書いたものとほぼ変わりませんが、まとめということで。 www.tsukisai.net www.tsukisai.net
固定ページのレイアウト
固定ページの編集画面にレイアウトを選択できるようになっているので、「ヘッダ・フッタレイアウト」を選択する。
ここで注意！
ヘッダ・フッタレイアウト：通常の記事から、サイドバーを無くしたレイアウトです。
となっていますが、これを選択した場合、サイドバーが表示されなくなり空白になるだけです。 メインの領域がサイドバーがあった箇所まで広がるというわけではありません。
そこで、軽量CSSフレームワークではてなブログの固定ページにグリッドシステムを導入する - Hatena Blog Theme Customで紹介されているコードを記事内に直接書き込みます。
<style>
#main {
max-width: 1200px;/*各テーマのコンテンツ幅に合わせる */
width: 100%;
float: none;
margin: 60px auto 30px;/* 各自調整2つ目に必ずauto */
}
</style>
上記サイトさんの記事に
※注：（はてな記法モード、Markdownモード、HTMLモードで編集すること、見たままモードでは上手くいかない）
という注意書きがあります。 普段「みたままモード」を使用しているので、「みたままモード」の編集画面内にある「HTML編集」というページを開き、そちらに記述したところ、問題なくメイン領域が広がりました。 ところで、試しにと思い、「はてな記法モード」と「Markdownモード」でもやってみたのですが、両方ともうまく機能しませんでした。 サイドバーの空白はそのままでした。 今のところ、理由はよくわかりません。
表を活用
記事タイトルをリスト化するにあたり、Wordの2段組のようにしたいと思い、表を使うことにしました。
例ですが、表は以下のようなコードを「HTML編集」画面に書き込みました。
画面上はこんな（↓）表になります。
| 果物 | 野菜 |
| りんご | キャベツ |
| みかん | キュウリ |
＊枠線を消す為に追加：<td style="border-style: none;">りんご</td>
＊リストの行間を狭めるために、「ヘッダ・フッタレイアウト」を選択した際に利用した上記のstyleコードに行間指定を加えました： table td { line-height: 50%; }
当分、サイトマップはこの形で書き加えていこうと思っています。
－修正（2019年1月24日）－
スマホ画面で確認したところ、行が完全に重なってしまっていたので修正しました。
修正後：line-height: 1.1;
2019年2月17日
結構必死でサイトマップを仕上げたにもかかわらず、サイトマップの構成を変えました。
記事数やカテゴリが増えてくると、1ページに全ての記事タイトルを表示し、尚且つ見渡せるように作るのは無理と悟り、ワンクリック、過程が増えてしまいますが、リンクを貼ったページを作りました。
