【ブログデザイン】トップページのカード型は意外に簡単である話

f:id:Kawan0116:20210601175655p:plain

かわんです。

はてなブログにおけるデザインテーマは沢山ある。

僕は、その中から選んでいたが、今は出来るだけ自作しているのである。

昔、Webサイト制作に関わる仕事をしていた。そのときに、HTMLとCSSを覚えたのである。

今はしていないが、覚えたことを活かすという形でブログデザインをしている訳である。

ちなみに、もう一度Webサイト制作に関わる仕事をしたいと思いつつ、まぁ、ブロガーのほうが楽しいので、それはしないだろう・・・。

で、今日は、トップページのカード型に関する記事を書きたい。

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%;
  }

CSSに詳しい人なら分かるかと思うのだが、軽く説明しておく。

display: flex;

カード型にするには横並びにする必要があるので、「display: flex;」と書く。

横並びにする方法は沢山あるけれど。例えばfloatだね。

個人的にfloatは扱いにくいと思っているので「display: flex;]を使う。

そして、回り込ませるように「flex-wrap: wrap;」を書く。

さいごにどのように並ばせるのかということで、「justify-content: flex-start;」にした。

「justify-content」については様々なモノがあるので、気になる人はチェックするべし。

こんな感じにするとタイル型にできた。

.page-archive .archive-entry

各記事のくくりは「.page-archive .archive-entry」となっているようで、こちらに対してCSSを書く。

適当に「margin」を設定。

ただし、「width: 49.5%;」については、しっかりと計算する必要あり。2列なので約50%ずつである。

この計算をしっかりとしないとカラム落ちするのである。

こんな感じで出来たのである

はてなブログにおけるデザインテーマを沢山見てはいない。

なので、細かなことは実際と異なるかも。

ただ、当ブログでは上記のCSSを書いたというお話しである。

CSSを知っている人なら直ぐに理解できると思うし、そもそもこの記事は読まないだろう(笑)。

なので、CSSに詳しくないなら用意されているデザインテーマを使うのが一番。

デザインテーマにこだわるより、記事で勝負した方が1000000倍良い。

という感じである。

バックアップを取ってから

CSSをいじる際、必ずバックアップを取る。

さもないと、CSSを誤ってレイアウトがグチャグチャになったときに、直ぐにバックアップから復元出来るからである。

ちなみに、僕はローカルでCSSを書いて、管理画面の「デザインCSS」に貼り付けている。

直でデザインCSSに書くと、とても作業しづらいのでローカルで作業する。

さいごに

まぁ、簡単に言うとflexを使って横並びにしコンテンツ幅を決めるというオチである。

場合によってはメディアクエリも必要だろう・・・。

もし、トップページをカード型にしたいと思っている人は、この記事は全く参考にならないので、他サイトさまのブログ記事を読んだ方がいいね(笑)。

おわり!