ブログの記事が増えてくると、「他の記事も読んでみたい」と思ってくれる読者さんも増えてきます。
でも、どこに何があるのか分かりにくいと、迷っちゃうかも…
そんなときに大切なのが、サイドバーのカテゴリー表示です。
カテゴリーは、ブログの中を案内する「案内板」のようなもの。
今回は、カテゴリーにアイコンをつけて見やすく整える方法を初心者向けにやさしく解説します。
※ 作業前に「デザインCSS」の内容をメモ帳などにコピーして、バックアップを取っておきましょう。
- 完成イメージ
- なぜカテゴリーを整えるといいの？
- アイコンをつけるメリット
- 今回の方法について
- コード（コピペOK）
- 変更するのはこの3か所
- 新しいカテゴリーを追加する方法
- よく使うアイコン一覧
- 色を変更したい場合
- まとめ
- サイドバーをもっと整えたい方へ
完成イメージ
カテゴリーにアイコンをつけると、サイドバーはこのように整います。
アイコンがあるだけで、パッと見て分かりやすくなります。
なぜカテゴリーを整えるといいの？
ブログは、記事が増えるほど情報が豊かになります。
でも同時に、「どこに何があるのか分かりにくい」状態にもなりやすいです。
- 似たテーマの記事を探したい
- 初心者向けの記事だけ読みたい
- 収益化の記事をまとめて見たい
カテゴリーが整っていると、
- ブログの中を迷わず歩ける
- 過去記事が読まれやすくなる
- きちんと運営している印象になる
なるほど…案内板みたいなものなんだね。
アイコンをつけるメリット
文字だけのカテゴリーは、毎回読まないと区別できません。
でもアイコンがあると、ひと目で違いがわかります。
- 🏠 ホーム
- ✍ 記事作成
- 💰 収益化
- 📝 知恵袋
人は文字よりも「形」を先に見ます。
- パッと見で伝わる
- 探しやすくなる
- ごちゃごちゃ感が減る
その結果、ブログが“整っている”印象になります。
今回の方法について
今回の方法は、サイドバーの「＜/＞HTMLモジュール」を使います。
- 標準のカテゴリーモジュールは使いません
- コードを消せば元に戻せます
- 難しい設定はありません
まずはコピペで大丈夫ですよ。
コード（コピペOK）
下のコードをサイドバーの「＜/＞HTML」に貼り付けてください。
※デザイン → カスタマイズ →サイドバー → 「モジュールを追加」→「＜/＞HTML」
<ul class="side-category">
<!-- ▼① 自分のトップページURLに変更 -->
<li>
<a href="https://あなたのブログURL.com/">
<i class="blogicon-home"></i>
<span class="category-title">ホーム</span>
</a>
</li>
<!-- ▼② カテゴリーURLに変更 -->
<li>
<a href="https://あなたのブログURL.com/archive/category/カテゴリー名">
<i class="blogicon-pen"></i>
<!-- ▼③ 表示する名前を変更 -->
<span class="category-title">カテゴリー名</span>
</a>
</li>
</ul>
<style>
.side-category {
list-style: none;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
padding: 0;
}
.side-category li {
width: 50%;
height: 100px;
box-shadow: 0 0 0 1px #6fbcbf, inset 0 0 0 1px #6fbcbf;
}
.side-category li:hover {
box-shadow: 0 0 0 2px #6fbcbf, inset 0 0 0 2px #6fbcbf;
background: rgba(111,188,191,0.1);
transition: .1s ease-in-out;
}
.side-category li a {
display: flex;
flex-direction: column;
text-align: center;
text-decoration: none;
color: #6fbcbf;
height: 100%;
justify-content: center;
}
.side-category i {
font-size: 40px;
}
.category-title {
font-size: 15px;
font-weight: bold;
}
</style>
変更するのはこの3か所
① 自分のブログURLに変更
「https://あなたのブログURL.com/」の部分を、自分のトップページURLに変更します。
② カテゴリーURLに変更
カテゴリーページを開き、上に表示されているURLをコピーして貼り付ければOKです。
③ 表示する文字を変更
「カテゴリー名」の部分を、表示したい名前に書き換えます。
新しいカテゴリーを追加する方法
追加したい場合は、下の1セットを丸ごとコピーして増やすだけです。
<li>
<a href="ここにURL">
<i class="blogicon-pen"></i>
<span class="category-title">カテゴリー名</span>
</a>
</li>
コピーして増やすだけなら、できそう！
よく使うアイコン一覧
「blogicon-○○」の○○を書き換えるとアイコンが変わります。
- blogicon-home（家）
- blogicon-pen（ペン）
- blogicon-yen（お金）
- blogicon-search（虫眼鏡）
- blogicon-help（はてな）
- blogicon-star（星）
- blogicon-heart（ハート）
- blogicon-mail（メール）
※ほかのアイコンを探したい場合は、「はてな blogicon 一覧」で検索すると確認できます。
色を変更したい場合
下の「#6fbcbf」の部分を好きな色に変更してください。
box-shadow: 0 0 0 1px #6fbcbf;
color: #6fbcbf;
同じ色コードがいくつかありますが、すべて同じ色に変更すると統一感が出ます。
色選びに迷ったら、こちらのサイトでお気に入りのカラーコードを探してみてください。
▶ 原色大辞典
まとめ
カテゴリーは、ただのリンクではありません。
ブログの中を迷わず歩けるようにする、大切な案内板です。
- 見やすくなる
- 探しやすくなる
- きちんとした印象になる
少し整えるだけで、ブログの印象は大きく変わりますよ。
サイドバーをもっと整えたい方へ
プロフィールの整え方や、おすすめ記事の表示方法などもまとめています。
