スマホでブログのトップページを表示させたとき、カード型にしてみた。

前回、こんな記事を書きました。

スマホでカード型にするつもりはありませんでしたが、サクッと対応しました。

こんな感じになります。

僕の場合、はてなブログを使っていて、HTMLはいじれませんが、CSSをいじることが出来ます。あくまで僕の場合はですけどね。

スマホ表示の場合、デザインは限られてきます。その中で冒険した結果、カード型にしてみました。

PCで表示させたときもカード型になります。トップページはPCとスマホとも共通のデザインとなりました。

しばらくの間、この状態で運営していく予定です。

肝心のCSSになりますが、あえて公開はしません。何故なら、CSSってコピペしても上手く行かない事が多々あるかと思いますので。

なので、そのようなモノに対してCSSを公開するなんてことは考えていません。どうしてもの場合は、ブラウザのデベロッパーツールで確認してください。

まぁ、一部抜粋しますかねぇ～。

.archive-entries {
 display: flex;
 flex-wrap: wrap;
}

.page-archive .archive-entry {
 width: 49%;
 margin-right: 1.5%;
}

.page-archive .archive-entry:nth-child(2n) {
 margin-right: 0;
}

はてなブログなので、はてなブログ以外であれば通用しないと思います。

また、はてなブログを使っているかといって、上のをコピペしても上手くいかないです。断言します。

やはり、HTMLコードを解析してCSSを書いていくという地道な努力が必要です。

近道はありません。その都度、調べながらCSSを書くのが一番です。

CSSの勉強の王道は、やはり参考書を買う事ですね。「１から覚えるなんちゃら」とかありますよね。そのような本を買えば良いのかな？

僕は、そのような本を買って勉強しましたね。Webデザイナーとしてのキャリアも何年かあります。

今は、趣味レベルでCSSを書いて遊んでいます。

今の時代はネットでも勉強出来ますね。あるいは、オンラインスクールとかですね。オンラインスクールは高いイメージがありますが・・・。

個人的には、

・どのようなデザインにしたいか

という面にフォーカスすると良いでしょう。そして、それを実現するにはどういうCSSを書けば良いかと考えることが重要です。

今回のテーマである「カード型」ですが、カード型にするにはどういう風にCSSを書けば良いのか考える必要があります。

ＣSSに対してどの程度のスキルがあるかに関わってきます。１から１０までCSSを覚えるのではなくて、実現したいデザインはどうやってCSSを書けば良いかという感じで考える必要があります。

僕はCSSに詳しい方ですが、カード型にするときも調べましたよ。ぶっちゃけ苦労もした。

なので、いとも簡単に情報を公開したいとは思わないですね(笑)。いや、それは誤解があるな。

正確には、CSSが複雑に絡まっているので紹介しきれないという感じです。

今のところはそんな感じです。

スマホでカード型のトップページは結構好きになりましたね。意外と大丈夫でした。

もし、気になるようであれば、以下のサイトをスマホで見て下さいね。僕のブログになります。

miscellaneous notes