はてなブログでトップページをカテゴリーの紹介ページに

はてなブログのトップページをカテゴリー紹介ページにしました。
記事一覧ではなくカテゴリーを紹介してブログに興味を持ってもらいましょう。
テンプレートを用意しました。簡単にカスタマイズできますよ。

目次

◆はじめに

以前、このような記事を公開しました。

• 📖 はてなブログ無料版でトップページのまま記事一覧風にする 🔗
• 📖 はてなブログ無料版でトップページに記事一覧を作る 🔗

今回は、以前の記事を踏まえ、トップページをカテゴリーの紹介ページにしました。
以降、カテゴリー紹介ページと呼んで説明します。

カテゴリーの紹介文を考える必要はありますが、割と簡単に実現できます。
同じように実現してみたい方に向けてテンプレートを用意しました。
カスタマイズ方法を紹介します。
まず、出来上がるページのサンプルをご覧ください。

◆サンプル表示（テンプレートをそのまま使用）

テンプレートをそのまま使うと次の様な表示になります。
見出しはレベルを一つ下げてあります。
画像は表示可能な画像を使っています。
実際の表示はお使いのテーマにより変わります。
ここでは、全体が見えるように小さくして表示しています。

以降がサンプルです。

---

ブログ訪問者へのメッセージ

カテゴリーいろいろ

カテゴリー名 カテゴリーの説明

• 記事の簡易タイトル
• 記事の簡易タイトル
• 記事の簡易タイトル

---

カテゴリー名 カテゴリーの説明

• 記事の簡易タイトル
• 記事の簡易タイトル
• 記事の簡易タイトル

---

その他のカテゴリーも興味があればご訪問ください。
カテゴリー名　 カテゴリー名　 カテゴリー名

すべての記事一覧はこちらをクリックしてください

新しい記事

新しい記事のタイトルとリンク

記事の紹介

新しい記事のタイトルとリンク

記事の紹介

---

ここまでがサンプルです。

◆カテゴリー紹介ページの作り方（テンプレート使用）

とにかく同じようにやってみようという方に向けて作り方を説明します。
大前提として、作成するカテゴリー紹介ページは Markdown 記法で記述します。
普段、見たままモードやはてな記法モードで記事を書かれていてもカテゴリー紹介ページだけを Markdown 記法にできるのでそうして編集します。

カテゴリー紹介ページの中身としてテンプレートを用意しました。
このカテゴリー紹介ページに必要なスタイルやスクリプトも一緒に入れてあります。
ですのでテンプレートを使えば、簡単にあなた独自のカテゴリー紹介ページを作れます。

スタイルというのは、表示の仕方を制御するコードです。
「ここから CSS です」とある行以降がそれに当たります。
基本的に変更する必要はありませんが、CSS が分かるのであれば変更することもできます。
CSS のことがよく分からない場合は、変更しないでください。

【作り方】

1. 「記事を書く」をクリックして編集画面を表示
2. 編集タブの をクリックして「Markdown」を選択　別記事で詳細説明 🔗
   後からは変更できないので初めに実施してください
3. 本記事の テンプレート のソースコードの次にある「テンプレートをコピー」ボタンをクリック
4. コピーできると「コピーしました」とダイアログが出ます
5. 編集エリアに貼り付け
6. タイトルを入力（例：ホーム）
7. 投稿日時を指定（例：ブログ開始日）　別記事で詳細説明 🔗
8. ブログ訪問者へのメッセージを編集
   テンプレートの「ブログ訪問者へのメッセージ」を編集します
   改行する時は末尾に半角スペースを2つ挿入します
9. アイキャッチ画像の指定（詳細説明 ⤵）
10. カテゴリー紹介部分の更新（詳細説明 ⤵）
11. 新しい記事部分の更新（詳細説明 ⤵）
12. アドセンスの対応（詳細説明 ⤵）
13. ブログの設定変更
    • トップページの先頭に記事を固定　別記事で詳細説明 🔗
    • トップページの記事数を「１」に設定　別記事で詳細説明 🔗
      ※忘れても今回作成したページのみの表示になりますが、設定すれば表示速度が速くなります

◆カテゴリー紹介ページの編集

テンプレートを使えば簡単に自分のブログ用のカテゴリー紹介ページを作れます。
テンプレートの編集内容を詳しく説明します。

◇画像と記事のURLの指定

画像は、カテゴリー紹介ページのアイキャッチ画像、カテゴリーをイメージした画像、新しい記事のアイキャッチ画像を登録します。
画像は元のサイズに関わらず縦横比を変えずに幅を 120px にして表示します。
既にある記事やフォトライフで画像を表示して、右クリックして「画像のリンクをコピー」で URL を取得すると簡単です。
参考までにフォトライフにアップした画像の URL を示します。
 例：https://cdn-ak.f.st-hatena.com/images/fotolife/x/xxx/yyyymmdd/yyyymmddnnnnnn.png

【テンプレート】

<!-- URL -->
[topi]:画像のURL#ai
[catAi]:画像のURL#air
[catA1]:記事のURL "記事のタイトル"

[new1i]:画像のURL#ai

【説明】

• 「画像のURL」に表示する画像のURLを記述します
  • [topi]:にはカテゴリー紹介ページのアイキャッチ画像を指定します
  • [catAi]:には一つ目のカテゴリーを表す画像を指定します
    二つ目以降は catBi, catCi と変えていきます
  • [new1i]:には一つ目の新しい記事のアイキャッチ画像を指定します
• 「記事のURL」にリンクさせる記事の URL を記述します
  「記事のタイトル」にその記事のタイトルを記述します
  リンクにカーソルを合わせるとタイトルが出てきます
  ※タイトルを省略することもできます
• #ai #air はそのまま残してください
  これは、画像の横幅を120pxにして左寄せ、または右寄せにするための記述です

◇カテゴリー紹介部分の更新

サイドバーにあるカテゴリーと同じように修飾されたカテゴリーへのリンクとカテゴリー内のいくつかの記事の紹介を載せます。

【テンプレート】

<span class="entry-categories categories">
[カテゴリー名](/archive/category/カテゴリー名)
</span>
![][catAi]
カテゴリーの説明

- [記事の簡易タイトル][catA1]
- [記事の簡易タイトル][catA2]
- [記事の簡易タイトル][catA3]

【説明】

• 「カテゴリー名」にカテゴリーの名前を記述します
• 「カテゴリーの説明」にカテゴリーの簡単な説明を記述します
  改行する時は末尾に半角スペースを2つ挿入します
• 「記事の簡易タイトル」にリンクさせる記事のタイトルを記述します
  長い場合は１行に収まるように短縮します
  前述の catA1 で指定した URL にリンクされます
• 前述の catAi で指定した画像が表示されます

※画面を２つに段組みしています。カテゴリーAとカテゴリーBの行数を同じにしてください。

※段組みをやめたい場合は <section class="columns"> とそれ以降に出てくる最初の </section> を削除してください。

※カテゴリーを増やす場合

1. テンプレートにある「<!-- ここからコピー開始 -->」から「<!-- ここまでコピーして下に繰り返す -->」までをコピーします
2. すぐ下に貼り付けます
3. catA や catB は catC や catD などに変更します
4. あわせて、画像と記事の URL も追加します

◇新しい記事部分の更新

はてなブログには「新着記事」というサイドバーに表示されるものがあります。¹
したがって、カテゴリー紹介ページに新しい記事を載せる必要がない場合は削除してください。
削除する場合、テンプレートの ##新しい記事 の行から <!-- ここから CSS です --> の行の前までを削除してください。

テンプレートには新しい記事２つ分を用意しています。
テーマによって横に並ぶ記事の数が変わります。
テーマにあった記事数分を作成します。

【テンプレート】

#####[新しい記事のタイトルとリンク](記事のURL)  

[![][new1i]](記事のURL)
記事の紹介

【説明】

• 「新しい記事のタイトルとリンク」に記事のタイトルを記述します
• 「記事のURL」に記事の URL を記述します（２カ所）
• 「記事の紹介」に記事の紹介文を記述します
  オリジナルのトップページに表示される「続きを読む」が表示される前までの分をコピペすると楽です
• ##### は見出しのレベルを表します。テーマに合わせて数（２以上）を調整してください
  無くても大丈夫です

※新しい記事を増やす場合

1. テンプレートにある「<!-- ここからコピー開始 -->」から「<!-- ここまでコピーして下に繰り返す -->」までをコピーします
2. すぐ下に貼り付けてます
3. new1 や new2 は new3 や new4 などに変更します
4. あわせて、画像と記事の URL も追加します

記事を新たに投稿した場合、こちらも更新が必要です。
その場合、一番古い記事をカットして先頭に貼り付けます。
その後、内容を新たに投稿した記事にあわせて修正すると簡単です。

◇アドセンスの対応

【テンプレート】

<script>
var element = document.head.querySelector('link[rel="canonical"]');
element.setAttribute("href", "ブログのURL");
</script>

【説明】

• 「ブログのURL」にブログの URL を記述します

※これは作成したカテゴリー紹介ページとブログの URL で表示されるページの内容が重複しているとグーグルに判断されてブログの信頼性が下がるのを防ぐための対応です。
 今回作成したカテゴリー紹介ページは、はてなが作るトップページと同じだと教えています。

◆技術的な説明

◇カテゴリーへのリンク

使用しているテーマと同じデザインでカテゴリーへのリンクを記述できます。
テーマによっては機能しないかもしれません。

【テンプレート】

<span class="entry-categories categories">
[カテゴリー名](/archive/category/カテゴリー名)
</span>

【説明】

• <span class="entry-categories categories">：
  カテゴリーへのリンクの記述がテーマと同じ修飾が施されるようにクラスを付加しました
• [カテゴリー名](/archive/category/カテゴリー名)：
  Markdown 記法で記述したカテゴリーへのリンクです
  [] の中が表示され、() の中が URL です
  「カテゴリー名」を実在するカテゴリー名に変えて使用します
  URL にドメインを付加しなくても機能します

◇トップページをカテゴリー紹介ページだけにする

テンプレートのスタイルにはトップページをカテゴリー紹介ページだけにする CSS も記述しています。
はてなブログのトップページは、記事数を１にしただけだとトップページに固定した記事と最新記事の２つが出ます。
従って２つ目の記事を出さないように CSS を追加しています。　別記事で詳細説明 🔗
更に、「次ページ」ボタンをクリックすると２番目に新しい記事が表示されます。
最新の記事が無くなったように感じてしまいます。
したがって、「次ページ」ボタンを表示しないように CSS を追加しています。²

【テンプレート】

.page-index article ~ article {display: none;} /*2つ目以降の記事を非表示*/
.pager {display: none;} /*「次ページ」を非表示 */

◇アドセンスに重複記事と判断されることの回避

作成するカテゴリー紹介ページは、トップページにその記事一つだけを表示するように設定変更します。
そうするとカテゴリー紹介ページとトップページがほぼ同じものになります。
グーグルアドセンスは、重複記事があるとそのブログの信頼度を低くみるようになります。
それを回避するための対処方法がグーグルに紹介されています。³
具体的には、HTML の head タグ内に「rel="canonical" link アノテーション」を施すことです。
はてなブログの各ページには既にこの設定が施されていてリンク先が自ページの URL になっています。
そこで、カテゴリー紹介ページのこの部分のリンクをカテゴリページの URL からトップページ（ブログ）の URL に書き換えます。
書き換えには JavaScript を使用します。

【テンプレート】

<script>
var element = document.head.querySelector('link[rel="canonical"]');
element.setAttribute("href", "ブログのURL");
</script>

【説明】

• querySelector で head タグ内の link タグで rel 属性が canonical のエレメントを取得します
• 取得したエレメントの href 属性にブログの URL を設定します
• この script は記事の中に記述しているのでカテゴリー紹介ページとトップページで動作します
  どちらのページも設定したい URL は同じなので問題ありません

◇新しい記事の表示

本ブログの別記事で紹介した「おすすめ記事の表示」を元にして、説明文を入れられるように拡張しています。

◆テンプレート

<script>
var element = document.head.querySelector('link[rel="canonical"]');
element.setAttribute("href", "ブログのURL");
</script>
![][topi]
ブログ訪問者へのメッセージ
<br style="clear: both;">

<!-- URL -->
[topi]:画像のURL#ai
[catAi]:画像のURL#air
[catA1]:記事のURL "記事のタイトル"
[catA2]:記事のURL "記事のタイトル"
[catA3]:記事のURL "記事のタイトル"
[catBi]:画像のURL#air
[catB1]:記事のURL "記事のタイトル"
[catB2]:記事のURL "記事のタイトル"
[catB3]:記事のURL "記事のタイトル"
[new1i]:画像のURL#ai
[new2i]:画像のURL#ai

## カテゴリーいろいろ
<!-- ここからコピー開始 -->
<section class="columns">
<span class="entry-categories categories">
[カテゴリー名](/archive/category/カテゴリー名)
</span>
![][catAi]
カテゴリーの説明

- [記事の簡易タイトル][catA1]
- [記事の簡易タイトル][catA2]
- [記事の簡易タイトル][catA3]

---

<span class="entry-categories categories">
[カテゴリー名](/archive/category/カテゴリー名)
</span>
![][catBi]
カテゴリーの説明

- [記事の簡易タイトル][catB1]
- [記事の簡易タイトル][catB2]
- [記事の簡易タイトル][catB3]

---

</section>
<!-- ここまでコピーして下に繰り返す -->

<br>

その他のカテゴリーも興味があればご訪問ください。  
<span class="entry-categories categories">
[カテゴリー名](/archive/category/カテゴリー名)　
[カテゴリー名](/archive/category/カテゴリー名)　
[カテゴリー名](/archive/category/カテゴリー名)
</span>

**[すべての記事一覧はこちらをクリックしてください](/archive)**

##新しい記事
<section class="osusume" markdown="1">
<section class="osusumeitem" markdown="1">
#####[新しい記事のタイトルとリンク](記事のURL)  

[![][new1i]](記事のURL)
記事の紹介
</section>
<!-- ここからコピー開始 -->
<section class="osusumeitem" markdown="1">
#####[新しい記事のタイトルとリンク](記事のURL)  

[![][new2i]](記事のURL)
記事の紹介
</section>
<!-- ここまでコピーして下に繰り返す -->
</section>

<!-- ここから CSS です -->

<style>
.page-index article ~ article {display: none;} /*2つ目以降の記事を非表示*/
.pager {display: none;} /*「次ページ」を非表示 */
.osusume {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.osusume a {
    flex: 0 0 24%;  /*幅が狭すぎるので対策が必要*/
    border: solid 1px lightgray;
    text-align: center;
}
.osusume img {
    max-height: 120px;
}
.osusume img:hover {
    filter: drop-shadow(5px 5px 10px #666);
}
.osusumeitem {
    flex: 0 0 24%;  /*幅が狭すぎるので対策が必要*/
    border: solid 1px lightgray;
    text-align: center;
}
.osusumeitem a{
    border: none;
}
/*段組み(カラム)*/
.columns {
    columns: 4 24em;
    column-rule: 1px solid darkgray/*#f7f7f7*/;
}
/*フロートの解除は別途にすればこれだけでいける*/
/*↓左アイキャッチ用*/
img[src$="#ai"] {
  width: 120px;       /*画像サイズ*/
  float: left;
  margin: 0 1em 1em 0; /* 右と下*/
}
/*↓右アイキャッチ用*/
img[src$="#air"] {
  width: 120px;       /*画像サイズ*/
  float: right;
  margin: 0 0 1em 1em;     /* 左と下*/
}
</style>

テンプレートをコピー

◆さいごに

はてなブログのトップページをカテゴリーの紹介ページにする方法を紹介しました。

はてなブログのトップページは、７記事の内容をすべて表示するのがデフォルトです。
記事の中に「続きを読む」の設定を入れるとそこまでの内容をトップページに表示します。
無料版でできるのはここまでで、有料版であればトップページを記事一覧にすることができます。
そんな有料版に近づこうと無料版でできる記事一覧を考えました。

一方、新しく見つけたブログの記事を読んでスターを付けた時に、自分も似たような記事を書いているということを気づいてもらう方法がないかなと思っていました。
もちろん、コメントなどを残せはいいのですが、そのためのコメントは図々しく感じてできません。
せめて自分のブログに訪問していただけた時に、似たような記事を書いているのかもしれないと気付いてもらえたらと思いました。
それには、トップページをカテゴリーの紹介記事にするのがいいのではないかと思いついたのです。

自分の思惑通りのトップページになったのかどうかは分かりません。
しばらく様子を見てみます。

そして、せっかく作ったので、同じようなことを考えている方に使ってもらえるようにテンプレートを用意してみました。
大きなお世話かもしれませんが・・・

試してみて疑問などがあればお問い合わせください。

あわせて読みたい 📖 はてなブログでMarkdown記法を使う 🔗

◇免責事項

ご利用に際しては、『免責事項』をご確認ください。
お気づきの点がございましたら『お問い合わせ』からお問い合わせください。

◆参考

• はてなヘルプ：ブログのトップページに常に表示させたい記事を固定する - はてなブログ ヘルプ
• javascript：はてなブログでnoindexを設定する方法（特定の記事を検索結果に表示させない方法）【コピペOK】 | まろりかの自由帳

投稿：2024-09-24 、更新：2025-01-21

---

1. 私が使用しているテーマはサイドメニューをグローバルメニューとしているので普段は表示されません。そのため記事内に新しい記事を載せています。↩
2. こちらの「simadzu’blog」ブログの記事にページャーの消し方が紹介されています
   はてなブログの無料版で固定ページを作ってトップページに表示 ↩
3. グーグルヘルプ：rel="canonical" などを利用して正規ページを指定する方法 – Search Console Central ↩