このブログのデザインで参考にしたブログやWebサイト

このブログのデザイン（このブログのテーマはMinimalismです）をカスタマイズしたときに参考にしたブログやWebサイトをリスペクト（オマージュ、インスパイア etc）の思いをこめてまとめてみます。

トップページ

トップページのデザインや動きを参考にしました。横長カードと四角カードの組み合わせが素晴らしいです（このブログではスマートフォンだと横長カードが四角に変わります）。

カード型のレイアウトはコピペ式似非ブログカードをさらに改良して並べています。
（はてなのブログカードをカード型のレイアウトにする発想がすごくないですか？）
また、カードにカテゴリーボタンをつけたのもポイントのひとつです！
（HTML編集で固定ページ的なものを作成、CSSも専用のものを設定しています）

ヘッダとフッタ

ヘッダとフッタの横幅を短くしているところやページャーのボタンを参考にしました。
横長のディスプレイだとヘッダとフッタがカッコ悪く見えるので短くできてよかったです。

参考：Zenn（鹿野 壮）｜margin-inline:autoを使おう。margin-left:autoとmargin-right:autoを書くのが面倒なあなたへ

CSS
#globalheader-container,
#footer {
    margin-inline: auto;
    max-width: 1140px;
}

また、フッタのコピーライトなどの表記を2行から1行にしているところも参考に。

CSS
.footer-address,
.services {
    display: inline;
}

.footer-address:after {
    content: "|";
}

日付

日付を日めくりカレンダー風にしているところを参考にしました。

CSSのfloatを使って日付の横に記事タイトルとカテゴリーを表示させています。
（日付をfloat:leftで左寄せして右側に記事タイトルとカテゴリーを回り込ませた）
また、日付のフォントはGoogle Fontsの欧文フォントWork Sansを使っています。

参考：はてなブログの日付を日めくりカレンダー風にする
参考：はてなブログでGoogleフォントをなるべく速く読み込みたい

そのほか

C6H12O6ではプロフィール画像にカーソルをあてると回転するのがおもしろいと思って、このブログのタイトルロゴにカーソルを重ねるとパンダアイコンがちょこっと傾く！ようにしました。
画像がぽよんと拡大表示されるのはどこかの質問サイトだったのですが失念しました。
参考：サルワカ｜【CSS】疑似要素の画像サイズを変更する方法

自由ネコ（限定公開）ではサイドバーの一番上にペイントで手書きしたような下手ウマな（失礼）プロフィール画像があって、覚えられやすいんじゃないかと思って同じように。

このブログではイラストACのあまどさんのフリー素材（パンダ）を使っています。
（このキャラにしたのは白黒なのと「ユル休み」がほのぼのとしていたからなのです）

まとめ

いろいろなブログやWebサイトを見て、いいなと思うことを自分なりに取り込んでできたのがこのブログです。新しいCSSの技術も使いながら自己満足できるようにがんばる！