はじめまして！今回、授業の一環で自分のブログページを作りました💖💖
ということで最初のブログはこのブログページを紹介するブログを書いていきます🥰

タイトルについて

このブログのタイトルは”Stannum à la crème”。ラテン語で「錫」という意味の”Stannum”と、フランス語で「クリーム入りの」という意味の”à la crème”をかけ合わせたものです。
名前がすずなのでそれとかけて錫を用いたのと、お菓子の名前を組み込みたかったのでシュークリームから一部を取ってこんな名前にしました。変な組み合わせの単語ですが、そういうのが好きなのでお気に入りです☺️

ブログのテーマについて

このブログはアフタヌーンティーをイメージして作りました。トップページのブログ一覧はそのアフタヌーンティーで使うお皿をイメージしました。

また、アフタヌーンティーの高級感をイメージして、ピンクと白とゴールドを基調にしてデザインしました💞余白も多めにしたり、角を残したままにしたり、線を細くしたり、動きをゆっくりめにしたりと、とにかく高級感を意識して作ったので、そんなイメージが伝われば嬉しいです🥰

コーディングにおいての工夫点

トップページ

一番頑張ったのはやっぱり新規8件が出るブログ一覧のところです。どの画面サイズで見ても破綻しないように、メディアクエリを細かく調整して、背景の画像のお皿の軸の位置を調整したり、お皿部分もはみ出たりしないように％で設定してどの画面サイズでもきれいに見えるようにしました👊

また私のお気に入りの部分はカテゴリー欄の文字がマウスオンしたときに回るところです。ゆっくり1回転だけするのがおしゃれでかわいいな〜って思ってます💖view moreのところのマウスオンしたときに下線が入るのもさりげなくてお気に入りです🫶

シングルページ

トップページ以外はとにかくシンプルを意識して作っています。でもシンプルながらも、動きはちゃんとつけておきたくて、どこかのリンクに飛ぶところはマウスオン/マウスオフで変わるようにしました😆

あと、トップページ以外では、ヘッダーのBlogのリンクを押すとすべての記事が出るブログ一覧ページに飛ぶようにしました。

ブログ一覧ページ/カテゴリー一覧ページ

この2つはほとんど同じ感じです。カテゴリー一覧ではタイトル部分がそれぞれのカテゴリー名が表示されるようにしました😉

記事部分をマウスオンするとダイヤ状にピンクが広がっていくのが可愛くてお気に入りです！

また、パソコン版では横4列、スマホ版では横2列、それぞれ12記事ずつ出るようにしました☺️

最後に

簡単にですが、ブログの頑張ったところを挙げさせていただきました。見やすくなってたら嬉しいです🥹

このブログで自分の学んだことや活動したことを記録に残していけるよう、たくさん更新できたら良いですね🙂‍↕️

あ、実はフッター部分に隠しページがあったりします。よかったら探してみてください🫣