当サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告を利用しているものがあります
こんにちは。こももです。
昨年11月に宣言したものの、停滞していたブログトップページのリニューアルですが
![](https://comomoblog.com/wp-content/uploads/2023/09/diary-0383-160x160.jpeg)
先日「進まない!」と記事にしたことにより一念発起(笑)
ようやくリニューアル完了しました!
自分用にビフォアアフターを記録したいと思います。
よろしければお付き合いください。
![](http://image.moshimo.com/af-img/1762/000000038399.png)
開設当時からヘッダーのすぐ下にスライダータイプの記事一覧を設置していました。
![](https://comomoblog.com/wp-content/uploads/2023/09/diary-0390-1024x552.jpg)
このスライダー記事一覧は、私が使用しているWordPressの有料テーマSANGOにあらかじめ用意されている機能。
初心者の私でも簡単に作成・設置出来て、イッキに「らしい」トップページになって嬉しかったなぁ。
が、今回は撤去することを決意。今までありがとう!
スライダータイプは決まった記事数しか表示されないので、その下にも記事一覧を設置していました。
これまたSANGOオリジナルのタブ切替の記事一覧。
![](https://comomoblog.com/wp-content/uploads/2023/09/diary-0391-1024x539.jpg)
新着記事に加えて、見せたいカテゴリーやタグの記事一覧を表示することができる優れモノ。
このブロックはすごく気に入っているので、見せ方を変えて残すことにしました。
2つの記事一覧の下にはビュー数の多い記事をピックアップして紹介していましたが、こちらはサイドバーへ移動させました。
![](https://comomoblog.com/wp-content/uploads/2023/09/diary-0396-1024x533.jpg)
![](http://image.moshimo.com/af-img/1762/000000030602.png)
さてリニューアル後ですが、ヘッダーのすぐ下に新着記事(記事一覧)を設置。
![](https://comomoblog.com/wp-content/uploads/2023/09/diary-0392-1024x916.jpg)
左上にカテゴリーを表示させ、カードは大きめの横長のものに変更しました。
表示数は6、その下にはすべての記事一覧に飛べるボタンを設置。
カードが大きくなったことで見やすくスッキリした印象になったかな?
そしてその下にはおすすめカテゴリーのスペースを作りました。
![](https://comomoblog.com/wp-content/uploads/2023/09/diary-0393-1024x892.jpg)
画像と簡単な説明、それぞれのカテゴリーへのリンクを貼って、カテゴリーTOPに飛べるボタンも設置しました。
これは今回のリニューアル一番のお気に入りです。
その下にはタブブロックを。4つのカテゴリー(タグ)を設定しています。
![](https://comomoblog.com/wp-content/uploads/2023/09/diary-0394-1024x778.jpg)
![](https://comomoblog.com/wp-content/uploads/2023/09/diary-0395-1024x798.jpg)
上部のタブをクリックすると表示が切り替わる便利なブロック。
選んでいるタブはピンク、その他はブルーになるようにしました。
![](http://image.moshimo.com/af-img/1762/000000030611.gif)
今回のリニューアルはここまで。
ブロックの設置数はあまり変わらないけど、見た目はかなりスッキリして大満足!
先日自分に課した「9月中のトップページリニューアル」はどうにか完遂できました。
が、ひとまずトップページのリニューアルは完了したけど、ブログ全体としてはまだまだ。
各カテゴリーのトップページにも手を入れたいし、何よりカテゴリーとタグの整理がカオス(苦笑)
まぁメンテナスはブログを続ける限り永遠に続くものだから地道にコツコツやっていきます。
まだしばらくは一時的に変な見た目になることがあると思いますが「あ〜やってるな〜」と温かく見守っていただけると嬉しいです。
引き続きこもものブログをよろしくお願いいたします!
それでは、また。