【お知らせ】ni-laboアップグレードしたよ！

こんばんはぁ。ニラです。

夏休みが終わり、寝不足という基本状態に戻ることができました。

それはそうと、このブログアップグレードしたんですよ。特別便利になったわけじゃないけど、デザインを大幅に変えました。

ビフォーアフターを交えながら見ていきましょう！

トップページ

メインビジュアル

この画面で観測できる変化はこちら

ヘッダーを小さくしました。
メインビジュアルを横長にして、よりバナーチックにしました。
各グローバルナビゲーションにアイコンをつけ、ヘッダーの直下に移動しました。
すぐに記事コンテンツにたどり着くようにしました。

記事

１ページにつき、９記事表示できるようなデザインに変更しました。
カテゴリーを追加しました。
サブカラーとして、紫色を追加しました。
JavaScriptを利用して、奇数と偶数の記事で色が変化するようにしました。
公開日及び更新日をよりわかりやすくしました。

記事一覧の変化が一番大きいです。

デザインについては、僕の好みで余白なしの並べ方にしました。なので、賛否両論かもしれません。

前までは記事内容も表示されていましたが、よくよく考えたら存在意義がないと思ったので、消しました。当時は結構頑張ったんですけどねぇ。

ページネーション

角丸にして、可愛くしました。
ちょっと押しにくかったので、全体的に大きくしました。
アクセントカラーを、青色から水色に変更しました。

これも自分的にはかなり気に入っています。スマホにするとはみ出て改行されちゃうので、色だけ変えて、そのままにしました。

プロフィール

アバターの画像を変更しました。
ちょっと動きのあるデザインにしました。
プロフィールがより詳細に書かれました。

これは、全部消して１から作り直しました。こう見ると、左がめっちゃ雑に見えますね。

こんなのも追加してみました。某ブログサイトのデザインを参考にしました。

記事

トップページばかりフォーカスされがちですが、記事ページもアップデートされています。

吹き出し

吹き出しっぽいものも用意しました。これです。

こんにちは！ニラだよぉ！

これは、詩の部分を改造して作り替えました。詩なんて使わねぇし。

最初

かなり一般的なデザインに変更しました。前のは前ので面白かったんですけど、ただただ使いにくいと感じたので、もったいないけど変更しました。

カラム

めっちゃ微妙なのですが、右側の関連記事の幅の割合を５％広げました。なんか窮屈に感じましたので。

記事がより縦長になってたくさん書いたように見えるから、まさに一石二鳥。

前後へ

このリンクもアクセントカラーを使用しました。

派手と感じる人もいるかもしれませんが、まぁいいでしょう。

その他

細かいですが、その他にも変化があります。

footerの簡略化
タイトルの文字を小さくしました。
記事に使うリンクが見やすくなりました。
画像の無駄な余白を削除しました。

他にもいろいろありますが、思い出せるのはこのくらいです。

コメントとかがまだ未完成なので、引き続き頑張ります。

❤︎

2022/09/22

nira-012.mahora94

◀︎

next...

prev...

▶︎

comment

fill out コメントをキャンセル

Artist

nira-012.mahora94

よろしくお願いします