第三弾、画像化の重要性
3回目のコーディングです、まずはデータをダウンロードしてコーディングしてください。
デザインカンプに指示が書き込んでありますのでそれに従ってください。
指示にスライダーがありますがswiperというのを使えば簡単に実装することができて↓で使い方の解説をしています。
https://garigaricode.com/swiper/
でもスライダーはそんなに使う機会がないと思います私が働いている会社では1回か2回使っただけだった気がします。
それでは解説です。
Bootstrapは使わない方がいい
Twitterで実務未経験者がBootstrapのツイートをしているのを見ますがBootstrapを使うとcssが勝手に付くのでコーディングがしやすいです。
私は実務を始める前に一度使ったことがありますがcssの制約が強すぎて凄く使いにくいので使うのを止めました。
一般企業で働いた場合はとにかく見た目にこだわるので使わせない可能性があります。
商品を売らないといけない会社は見た目が大事なのでSEOを意識したコーディングよりも見た目が大事みたいです。
会社がBootstrapを知らなかったとしても見た目を修正させるかもしれないので結局cssを別で付けないといけなくなります。
だから使わない方がいいです。
コーディングするときはcssよりもscss
cssでやるとコードの量が増えますがscssを使うとコードの量をかなり減らすことができるのでおすすめです。
エディタがvscodeの場合は拡張機能で簡単に実装でき↓で解説しています。
画像化する
アートボードの一番上の「jonioがオススメする人気商品一覧」ですがサイト閲覧者がページを開いた時のタイトルにあたりこの部分の見た目が悪くしないために必ず一行にしましょう。
赤枠の部分を一行で表示する
pタグを書いた時に1行になればいいですがならない時もあります。
そんな時は画像にしましょう、そうすれば1行にすることが可能です。
働く所によってはNGになるかもしれませんが他の部分も画像にできます。
今回のLPだと↓です。
直接コーディングすると結構面倒です
どう切り分けるかですが「詳しくはこちら」の部分はリンクなので「詳しくはこちら」とそれ以外に分けます。
↓の赤枠と青枠に分けます。
私が実務を始めて意外だったのですが私が働いている会社では画像のみのLPもあります。
だから画像化しても問題ないのかもしれません。
最後に一言
サイトって全部見た目が違いますがWordPressを使ったサイトの場合は「テーマ」というので見た目を変えることができます。(着せ替え人形の服みたいな感じです)
テーマによって有料と無料があるのですが最初は無料テーマで充分です。
このサイトのテーマはJINという有料テーマを使っていますが自分でテーマを作ることができるのでその内自分で作ったテーマに変えます。
知らない情報がいっぱいあるので最初は中々上手くいかずもどかしい気持ちになると思いますがその内慣れるので実務をするためにもブログの運営をしてください。
毎日30分でもいいので今からブログを始めておくと実務を始めた時に絶対に有利になります。
