前回記事の続きです。
前回記事→稼げる副業で人気のプログラミングに挑戦してみる【LP制作(１)】
LP制作(１)では、LP制作の構成について学びました。
htmlも少し学んで、商品説明の文章を大まかに書いた所までです。
今回はその続きで、LPに画像を貼り付け、色や体裁を整えるデザインを行っていきます。
調べながら、作りながら、ログページとなりますので、あしからず。
文字だけのLPは味気ない
画像もなければ、色もありません。
これでは、興味を引いて一文一文を読んでもらえるとは思えません。
ＬＰはインターネット上のチラシで、読んで納得したら、行動を起こしてもらわないといけません。
読んでもらうためのデザインや工夫が必要になります。
読み進めてもらう為に、興味を引く画像を使い、色や大きさを変えて読みやすくするのです。
画像挿入はimgタグ
imgタグを使って、指定フォルダに入れている画像を選ぶと、記載した場所に画像を挿入できます。
index.htmlファイルのボディタグ内にimgタグを記載するとウェブブラウザで表示した際に画像を読み込みます。
<img src=
まで入力すると、htmlファイルを置いているフォルダ内のファイルを選択できます。
<img src=“img/”
画像を置いているフォルダを指定すると、その下に置いている画像を選べます。
選んでカッコを閉じると、指定した画像が挿入できます。
<img src=”img/○○○○○○○.jpg”>
○○○○○は、数字と記号の羅列になります。
何らかの原因で、画像が表示できない場合に備えて、画像の説明分も追加しておきましょう。
<img src=”img/○○○○○○○.jpg” alt=”画像説明文”>
画像やイラストを準備して、表示させていきましょう。
ページを移動できるリンクはaタグ
テキストを押すと、違う画面を表示させるリンクを挿入します。
リンクタグを使用し、指定した文字列をクリックできるようにします。
以下、記載方法
<a href=”移動先ページのURL”>クリックできるようにする文字をここに記入</a>
同一ページ内での移動もできるので、ページが長くなったときには、以下を使用しましょう。
<a href=”#移動先id”>クリック文字をここに記入</a>
<p id=”移動元id”>クリック文字をここに記入</p>
移動先idと移動元idには、おなじ文字列が入ります。
移動先idの前の＃は、必要な文字なので、省略しないようにしましょう。
画像のすぐしたの「今すぐ購入する」にidを使用したリンク
一番下の「＞今すぐご購入はこちら」にURLを使用したリンクを記載しています。
見ためでは分かりませんが、それぞれのリンクをクリックすると画面に動きが出るので、試してみて下さい。
スタイルシートで見た目を整える
スタイルシートを駆使して、見た目を自由に設定しましょう。
今回設定に使ったスタイルは
・文字色、サイズ、位置、背景色
・枠サイズ、色
・画像位置、サイズ
・リンクの動き
です。
まだまだ使用できるスタイルはたくさんあると思いますが、今回はこんなもんで作成しています。
スタイルシートの書き方もindex.htmlとは別ファイルに用意するタイプがあります。
画像と同じように読み込めば、反映できますので、記載方法は別途調べてみて下さい。
今回は、同一ファイルないに記載するタイプを指定します。
index.htmlファイル内の<head>タグ内に<style>タグの箱を用意します。
その中にそれぞれのスタイルを個別で指定していきます。
「css 文字色」など、cssに続く必要なスタイルで検索すれば、記載方法が出てきますので、欲しい内容を検索してみて下さい。
表現したい方法を言葉にする大切さ
何をどのようにデザインしたいのか。
これを言葉にすることが、なかなか難しいです。
言葉にできれば、検索して調べることができます。
検索さえできれば、表現したいデザインをすぐに適用することができるので、時間を無駄にすることもなくなります。
「何を」、「どのようにしたいのか」を「明確」して
「調べるワード」を決めましょう。
「何を」、「どのようにしたいのか」が重要です。
すぐに出てきますよ。
出ては来るのですが、記述してもうまくいかないことがあります。
私は、ボタンを中央に移したいだけですが、これが中々分かりません。
ボタンの前後は、ちゃんと中央に位置してるんですけどね。。。
きっと他の記述の箇所が悪さして影響しているのでしょう。
自分で書いたコードなので、分析もしっかりしていきます。
これも経験なのでしょうね。どんどん作って、知識として蓄積していきましょう。
何を記載したらどこが変わるのかを理解する
index.htmlのファイルを保存し、プレビューを行うと、Ｗｅｂブラウザで開いたときの見え方が確認できます。
変更前と後で、見え方がどのように変わるかを見ながらコードを記載すると、記載方法の理解が深まります。
こまめにプレビューして、どこがどのように連動するのかを覚えましょう。
無駄な記載にも気付けるので、どんどんプレビューしていきましょう。
諦めたら何も出来上がらない
思っていることが出来ないと、心折れてしまいますよね。
画像と文章の位置を変えたり、サイズを変えたり、良く見せようと色々頑張っても思い通りにいかないこともあります。
ちょっとしたコードの記載で、思っていたのとは全然違うことが起きてしまいます。
これもコーディングの面白さということでしょうか。
記載しているコード量が多くなると、何がどこに影響しているのかが、分かりにくくなってきます。
分析や記述方法の工夫をあきらめてしまうと、何も伝わらないモノを作ってしまうことになるので、諦めずに頑張りましょう。
私もＬＰで表現したいことは、まだまだ色々ありますが、一通り形は出来上がりました。
細かい所や、デザインの修正は、おいおいやっていこうと思います。
ここまでの出来上がりは、次の項にて。
初心者の見よう見まねのＬＰ制作出来上がり
さあどうでしょう。
初めてにしては、まあまあなのではないでしょうか？
下の青リンク「＞今すぐ購入はこちら」の上の空白には、動画を埋め込んでみました。
画面コピーだと真っ白になってますね。
知識も経験もデザインセンスもありませんが、読める形には出来上がったと思います。
皆さんはいかがでしょうか？
センスある人は、もっとこう表現したい、ああ表現したいというのが、溢れてくるのでしょうね。
売れるデザインてのも学ばないといけません。コレが重要です。
見た目の大事さに気づけただけでも良しとしておきましょう。
記述コードへのコメント
あとで分かったのですが、コードへの記載中に何がどう変わるのかを、コメントとして残しておける方法がありました。
コメントタグを使用することで、記載可能となります。
このコメントタグで記載したいコメントを囲むと、コードとして読み込まずに表示もされないので、内部メモとして使用できます。
<!– 記載するコメント –>
上記コメントタグは、htmlファイル専用となります。
スタイルシート（css）には、以下コメントタグを使いましょう。
/* 記載するコメント */
まとめ
htmlは、中々楽しいものでした。
的確に表現したいデザインをネット上で検索できれば、コピペでいけることも分かりました。
スタイルシート（css）は、簡単なデザインならいいですが、複数のデザインが重なる場合や、複雑なモノはやはり難しいですね。
html、css、デザイン、学ぶことは多いですが、表現できる幅が広がることは間違いないでしょう。
副業として稼げるには、まだまだ時間がかかりそうです。
覚えれば、仕事になる理由も分かりました。
まずは数をこなして、コードの記載の仕方、デザインの表現方法を自分の中に蓄積して経験値を稼ぎましょう。
いつか、ＬＰ制作任せて下さいと言える日が来ることを願ってます。
お互い、頑張りましょう。
