記事一覧とも言えるサイトマップを作成している最中なのですが、記事数が増えてくると、記事タイトルのリストが延々と、下へ下へと続くようになります。 これを何とかもっと見やすくできないかと模索中です。
考えられる方法
各記事をカードタイプで表示する
ちょっとわたしにはハードルが高そうなので保留。 それと、レスポンシブデザインを使用していて、スマホ画面でも見やすいか心配なため。
記事一覧ページにカテゴリ一覧を作成する
サイドバーにあるようなカテゴリの一覧をサイトマップページに作成するという方法もあり、そうやっているサイトを見かけたことがあります。 でも、各記事のタイトルができるだけぱっと見れるようにしたいので、この方法も保留。
表を作成する
これならできそうかなと。 イメージとしては、Wordの2段組のような体裁にし、枠線などは無いデザイン。 こうすれば、下へ下へと伸びてしまうリストを多少は短くできるのではないかと。
記事内に表を作成する
今まで、記事内で表を活用したことがなかったので、まずは表を作成する方法から調べました。
記事内に表を表示させる方法はいくつかあります。
大まかに書き出すと
１）HTMLで記述する
２）はてな記法を使う
３）エクセルで作成した表を貼り付ける
４）Googleスプレッドシートを使う
５） テーブルタグ作成ツール - 無料ツール.netを使う
などです。
２）と３）は表をまず作成し、コピペすればよいというもの。 これが一番簡単かなと思います。
ただ今回は、記事一覧表ということで、後々、そしてちょくちょく手を加える機会があることを考え、できればHTML編集ページに書き込んで作成する方法のほうがいいかなと思ったのと、はてな記法を使ったことがなかったのでちょうどいい機会かと思い、１）のはてな記法という方法でやってみました。
はてな記法
はてな記法で表を作成する方法は上記サイトさんにも詳しい説明がありますが、「|」と「*」を使います（記号は共に半角）。
例：
１）ブログ管理画面の「設定」ページではてな記法を選択
２）編集はてな記法モードで
|*果物|*野菜|*穀類|
|りんご|キャベツ|小麦粉|
|みかん|キュウリ|米|
を記述。 すると、プレビュー画面では 
のように表示されます。
枠線を消すなど細かい設定も必要ですが、とりあえずこれでいこうと思い、固定ページで作ってみました。
ところが、固定ページで「ヘッダ・フッタレイアウト」を選択しているにもかかわらず、サイドバーの部分が空白のままとなり、メイン部分が広がりません。
先日の記事にも書きましたが（→はてなブログの固定ページ：サイトマップをカスタマイズ - Someday Somewhere）、「ヘッダ・フッタレイアウト」を選択した場合、サイドバー部分にもテキストがいくように
<style>
#main {
max-width: 1200px;/*各テーマのコンテンツ幅に合わせる */
width: 100%;
float: none;
margin: 60px auto 30px;/* 各自調整2つ目に必ずauto */
}
</style>
というコードを書き込んでいるのですが、このコードとの関係でうまくいかないのかちょっとわかりませんでした。
結果として、はてな記法を使う方法は避けることにしました。 HTMLで記述するよりシンプルで書きやすかったので残念ですが。
HTMLで記述
ということで、結局HTML編集のページに記述していくことになりました。
試しに固定ページで「記事一覧」というページをもう一つ作り、やってみたのがこれ（↓）（現在、下書き保存状態なので、ブログ上からアクセスできるサイトマップは下へ下へと伸びているリスト状のものです）。
例ですが、記事編集画面の「HTML編集」ページに以下のようなコードを書き込みます。
<table>
<tbody>
<tr>
<td style="border-style: none;">果物</td><td style="border-style: none;">野菜</td>
</tr>
<tr><td style="border-style: none;">りんご</td>
<td style="border-style: none;">キャベツ</td>
</tr>
<tr><td style="border-style: none;">みかん</td>
<td style="border-style: none;">キュウリ</td>
</tr>
</tbody></table>
上記コードをプレビュー画面で見ると、次のように表示されます。
果物 野菜 りんご キャベツ みかん キュウリ
何とか2段組の体裁で、記事一覧リストができあがりました。 当分の間は、下書き状態で更新しつつ、使い勝手などを確認してみたいと思います。
－追記－
後からスマホ画面で2段組の記事一覧ページを確認したところ、レスポンシブデザインということもあり、崩れることもなく「見れる」レベルになっていました。 ただ、画面自体が小さいので、各記事タイトルが2～3行で表示されていましたが。
