サイバーパンク2077 記事一覧
ウィッチャー 記事一覧
サブノーティカ 記事一覧
FF14 記事一覧

【Blogger】サイトマップをリニューアルしました(QooQ)

2021/10/25

ブログ運営

t f B! P L

このたび当ブログのサイトマップを一新しました。

>>新サイトマップ

本記事ではサイトマップを変えようと思った理由、変更後のサイトマップの紹介、参考元のコードから自分で調整した部分のメモを書いています。

当ブログはBloggerで運営、テーマはQooQを使用中です。

サイトマップ変更の理由

以前のサイトマップはラベルごとに記事一覧が作成される仕様でした。

参考:How to Create a Sitemap or Table of Contents in Blogger - Helplogger

導入当時は記事数が少なくて気にならなかったのですが、

  • ラベルが2つ以上ついている記事はラベルの数だけ記事一覧に表示される
  • 記事の順番がバラバラ

という点が引っかかるようになりました。

同じ記事が何回もリストに出てくる…。

記事の順番はあいうえお順でも投稿日順でもない…(あいうえお順っぽくはなっていたけど100%そうではない)。

我ながら分かりにくい記事一覧だなと思っていたので、見やすいものに変更しました。

変更後のサイトマップについて

新しいサイトマップは下記サイトを参考にしました。

参考:HTML サイトマップウィジェット - ふじろじっく

こちらの記事で紹介されているコードを、新規ページのHTML編集モードにコピペするだけでサイトマップが作成できます。

このサイトマップは英語サイトの情報を日本語ローカライズしてくださったものということで、試しに英語サイトのコードでも作ってみたのですが、

英語サイトのものはヘッダーが英語表記で、タイトルが3行以上になると記事番号に食い込むなど、「もうちょっと見栄えをよくしたい」という感じ。

そこが見事に調整されている上に、CSSにある日本語メモのおかげで自分でもカスタマイズしやすくなっているのが「ふじろじっく」さんのローカライズ版です。とても助かりました。


このサイトマップの特徴は、ラベルを選ぶとそのラベルの記事のみに絞り込めること。

ラベルが2つ以上ついている記事でも、重複して一覧に表示されることがないのが個人的にうれしい。

ほかにもタイトルや投稿日でも昇順・降順で並び替えできます。

わざわざタイトル順にすることあるかなと思ったのですが、このブログだとゲーム関連記事をタイトルごとに並べたいときに使えそう。

しかしカンペキにタイトル順になるわけではないのと、「ゲーム」のラベルで絞り込むと「ゲームオブスローンズ」も一緒に絞り込まれて「GoTは海外ドラマッ」となったので、ゲームタイトルごとの記事一覧は別に用意したほうがよさそうだなと思いました。

調整したところ

以下はサイトマップ設置にあたり、コードをいじった部分の自分用メモ。

(人によっては「わざわざ書くこと?」というレベルかもしれませんが、私の場合これらの作業でもけっこう手間取ったので書いておくことにしました)

  • ヘッダーの色を変更
    → コードの「ヘッダー」部分のbackground
  • 奇数行の背景色を変更
    →「奇数行の背景色」部分のbackground
  • ブログタイトルにカーソルをあわせると背景色が変わるのを、文字色が薄くなるよう変更
    → コードの「タイトルホバー時の背景色」部分を下記に置き換え


.toc-entry-col1 a:hover {
    opacity: .7;
    text-decoration: none;
}

  • 各カラムの横幅を調整
    → コードの「タイトル(番号含む)枠の幅」「投稿日枠の幅」「ラベル枠の幅」のwidth
  • 記事番号が3桁のとき、スマホだと1の位で改行されるのを調整
    → コードの「記事番号枠の幅」のwidth:2.6emをmin-width: 2.6emに書き換え&「記事番号」のfont-sizeを11pxに変更
  • ラベルにカーソルをあわせると文字色が薄くなるよう変更
    → コードの「ラベル」部分の下に下記を追加


.toc-entry-col3 a:hover {
    opacity: .7;
    text-decoration: none;
}

このブログを検索

最新記事

プロフィール


Seina

イギリス滞在経験あり。元フォワーダー業界勤務。吹奏楽経験者。英検1級取得者。ドラクエでひらがなを覚え、FFと青春を過ごしたゲーマー。

QooQ