kuro6ブログ!

kuro6!発信します!のサブブログです!

スポンサーLink

【カスタマイズ】カテゴリーのページを固定ページ化しました。

f:id:kuro6kuro6:20170825022538j:plain

どうも!kuro6です。

 

当ブログを読むのが2度目以降のあなた。何か違和感が有る事にお気付きだろうか?

そんな訳で、少しカスタマイズを行いました。今回はそのご紹介です。

※主に自分の備忘メモです。

 

カテゴリーページ

少し前に5つの大カテゴリーを設定し、グローバルメニューに追加しました。

www.kuro6.com

グローバルメニューをクリックするとそのカテゴリーページに飛んでこんな感じに表示されます。(例としてレビューをクリック)

 

f:id:kuro6kuro6:20170825020753p:plain

これは・・・自動で生成されるカテゴリーページですが、少しわかりにくいと思っていました。

 

大カテゴリーの中で更にカテゴリー分けをしたい・・・となるとやはり自動で生成されるページでは少し難しそうです。

 

固定ページで作成

カテゴリーページを固定ページで作ってみました。

www.kuro6.com

固定ページを採用した理由はいくつかあります。

  • 記事を追加しても更新通知がいかない
  • 総記事数にカウントされない
  • カテゴリ指定が不要
  • 余計な情報が表示されない

 

5つのカテゴリー

作成した5つのページがこちらです。

レビュー

趣味

ブログ運営

日記

kuro6

 

例としてレビューをクリックするとこんなページになります。

 

f:id:kuro6kuro6:20170825020830p:plain

目次で各カテゴリーに飛べるようにしました。

 

f:id:kuro6kuro6:20170825020857p:plain

 だいぶ見やすくなったかと思います。

 

デメリット

固定ページのタイトルの文字サイズを大きくする方法がわかりませんでした。

試行錯誤した結果、背景色を付ける事が出来たので、少しタイトルっぽさが出たかな?

(副作用として、全ページでタイトルに背景色が付きました。ただこれはこれで見やすい気がするのでプラスの副作用と受け取っています。)

 

メンテナンス性。新しい記事を追加する毎に毎回手作業でリンクを追加する必要が有ります。これは追加忘れしないように頑張るしかないです。

 

表示速度対応

先日投稿した記事の中で当ブログの表示速度が酷すぎるという事をお伝えしたところ、それは早く対応した方が良いというアドバイスを頂いたので対応してました。

(はちみつちゃん(id:Hachi32TK) ご指摘ありがとうございます!)

 

 

  対応前 対応後
モバイル 38 63
パソコン 45 74

 

対応方法ですが速度測定サイト(PageSpeed Insights)で測定するとどういった対策を行えば良いか教えてくれます。

 

f:id:kuro6kuro6:20170825020932p:plain

 

でも正直、「画像を最適化する」以外は難しくてよくわかりませんでした。

画像のリサイズですが、元々写真をアップする際には幅を小さくリサイズをしていました。これ以上写真を小さくするのは難しい!

 

で、調べて見ると、見た目はほぼ一緒でサイズだけ圧縮する必要があるようです。

私が使ったサイトはこちら:Compressor.io

このサイトを指摘のあった画像を圧縮する事で速度がかなり改善しました。

※海外のサイトですのでファイル名に日本語は使用出来ません。

 

これ以上の速度については画像以外を対処していく必要が有りそうですが、今回は保留で。

 

終わりに。

カテゴリーページは投稿の度にメンテナンスをする必要があるので、誰にでもオススメって感じでは有りませんが、こういったやり方もあるよーって事で。

 

それでは。