スマホでブログのトップページを表示させたとき、カード型にしてみた。
前回、こんな記事を書きました。
スマホでカード型にするつもりはありませんでしたが、サクッと対応しました。
こんな感じになります。
僕の場合、はてなブログを使っていて、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の勉強の王道は、やはり参考書を買う事ですね。「1から覚えるなんちゃら」とかありますよね。そのような本を買えば良いのかな?
僕は、そのような本を買って勉強しましたね。Webデザイナーとしてのキャリアも何年かあります。
今は、趣味レベルでCSSを書いて遊んでいます。
今の時代はネットでも勉強出来ますね。あるいは、オンラインスクールとかですね。オンラインスクールは高いイメージがありますが・・・。
個人的には、
・どのようなデザインにしたいか
という面にフォーカスすると良いでしょう。そして、それを実現するにはどういうCSSを書けば良いかと考えることが重要です。
今回のテーマである「カード型」ですが、カード型にするにはどういう風にCSSを書けば良いのか考える必要があります。
CSSに対してどの程度のスキルがあるかに関わってきます。1から10までCSSを覚えるのではなくて、実現したいデザインはどうやってCSSを書けば良いかという感じで考える必要があります。
僕はCSSに詳しい方ですが、カード型にするときも調べましたよ。ぶっちゃけ苦労もした。
なので、いとも簡単に情報を公開したいとは思わないですね(笑)。いや、それは誤解があるな。
正確には、CSSが複雑に絡まっているので紹介しきれないという感じです。
今のところはそんな感じです。
スマホでカード型のトップページは結構好きになりましたね。意外と大丈夫でした。
もし、気になるようであれば、以下のサイトをスマホで見て下さいね。僕のブログになります。
この記事が気に入ったらサポートをしてみませんか?