これまでのトップページ

CUSTOMIZE カスタマイズ

当ブログは2022年8月にWordPressテーマ「Cocoon」を使用して開設しました。

趣味として日々コツコツ、手探りでHTMLとCSSでのカスタマイズを楽しんでいます。

きっと今後もデザインを変えたくなると思うので、いつでも変化を振り返ることができるようにトップページの変化を記録しておきます。

※開設直後の状態はスクリーンショットを残していないため省きます。

ブログのデザイン
スポンサーリンク

2022年10月のトップページ(Cocoon設定を活用)

新着一覧のカテゴリー切り替えタブを吹き出しにしたり、ページネーションを丸くしたり、細部のカスタマイズには挑戦していたものの、全体的にレイアウトは「Cocoon設定」とウィジェットに頼っていました。

\ スクロールでPC版の全体像を確認 /

2023年1月のトップページ (固定ページで完全オリジナル)

2022年11月に固定ページでの完全オリジナルトップページにリニューアルしました。
12月には一言ノートを固定ページからウィジェットのカスタムHTMLに移設するなど地味な改良をしたり、年末年始には冬季限定の雪を降らせるなど地味なカスタマイズを楽しんでいます。

\ スクロールでPC版の全体像を確認 /

2023年2月のトップページ (固定ページで完全オリジナル)

新着記事の下に「カテゴリー案内」を設けてみました。
雑記だからこそ、初訪問の方にもどんなブログなのかをわかりやすく案内することで「きちんと感」が出せたら良いなーと目論んでいます。

あとトップページとプロフィール関連の見出しだけフォントを変えてみたのですが、システムフォントを使用しているので一部のデバイスでは別のフォントに置き換わっているかも?(一応置き換わっても支障ないように設定しているつもりです)

\ スクロールでPC版の全体像を確認 /

2023年3月のトップページ (固定ページで完全オリジナル)

自称「アピールノート」と新着記事の間を斜めに区切ってみました。

「暮らしのヒント」「おすすめアイテム」「ブログのこと」は一覧の表示を更新順に変更。

「PICKUP」を設置して「おすすめ記事」というタグをつけた記事の中からランダムで4記事が表示されるようにしました。

そしてポチップを使って「おすすめマンガ」をご紹介。
一言コメントは添えますが、記事にするよりも手軽に、思い立った時に更新できます。

あとはタブの色やトップへ戻るボタンも変更済。
背景のカラー部分に微細ノイズ画像をリピートさせたら紙素材感が出て、自己満足ですが気に入っています。

\ スクロールでPC版の全体像を確認 /

いろんなブログのテーマ別デザイン集を見ていて「PC画面風の表示いいなぁ。有料テーマだと簡単にできるのかなぁ」と思っていたのですが、カスタムHTMLとCSSだけで表現できると知って試さずにはいられませんでした。

「コピペでできる」コードを公開されていたので、少しアレンジして使用しています。

当ブログでもいつか誰かの「やってみたい」のヒントになれるデザインや記事を生み出せるよう、今後も楽しみながら学びたいと思います。

スポンサーリンク
koikenote