みんなの人気者?トップページをカード型にしてみた

f:id:Kawan0116:20210521220946p:plain

かわんです。

はてなブログには様々なデザインテーマがありますが、僕は、最低限のCSSが適用された状態でデザインテーマを作成しています。

元々、無料のデザインテーマを使っていたのですが、CSSを書けるので出来るだけ自分のCSSでという事でデザインテーマを作成しました。

ちなみに、僕のデザインテーマは「no title」になります(笑)。公開しないですけど。公開するとなると色々と準備があってめんどくさ(笑)。

なので、自分専用としてデザインテーマを使います。

さて、ブログにありがちなカード型レイアウト。僕、これ実現しました。元々、サブブログでカード型を採用していて、メインブログであるこのブログにも導入するべって感じでした。

なお、サブブログは都合により非公開としています。

今日はカード型レイアウトについて書きたいと思います。

1時間くらいかかった

先ほど書いたように、サブブログで既にカード型を実現していたので、作業は簡単でした。

しかし、微妙に異なる点がありました。

結局、1時間くらいかかりましたね。楽しかったですけどね。

一応、CSSを紹介してみる

一応、CSSを紹介してみます。なんてことはないCSSですけどね。

.archive-entries {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.page-archive .archive-entry {
    margin: 0;
    margin-bottom: 1em;
    width: 49.5%;
    margin-right: 1%;
}

軽く説明しておくと、「display: flex」で横並びに、そして、記事ごとの「.page-archive .archive-entry」にwidthを設定しているという形です。

装飾も含めています。詳細は省きますけどね。もし知りたい人はネット検索してみてください。

タイトルや本文は別で調整

上のCSSでカード型に出来ます。問題はタイトルや本文の調整。これは自分好みにしました。CSSは省きます(笑)。

この辺りは個人の好みになるのかなと思います。CSSを知っている人なら自分好みに出来るかと思います。

もし、CSSの知識がないなら本を買って勉強したりネット検索で勉強すれば良いかと思います。

僕は独学とオンラインスクールで学びました。今でも知らないことは沢山ありますが、ほぼネット検索せずに対応出来ています。

コピペしても同じにならないよ

もし、コピペするなら自己責任になります。何かあっても知りません。

また、先ほど書いたように出来るだけ自作のCSSを書いているので、コピペしても同じにはならないと思います。

カード型にしたいなら、ネット検索して対応してください。

それでもコピペしたいなら、バックアップを取ってからにしてください。

もう一度言います。

「コピペするなら自己責任で!」

さいごに

僕は飽き性なので、この先もずっとカード型にするかどうかは不明です。

既にちょっと変えたいと思っているのも事実。まぁ、ちょっと考えます。

ちなみに、Chrome,Edge,Firefox,IEで表示確認済みです。

これだけ抑えておけば大丈夫でしょう。

ちなみに、カード型はPCで表示したときだけです。スマホ対応はしていません。

スマホでカード型にするとなると、画面が小さいので現実的ではないですね。

なので、カード型はPCのみという形になります。