WordPressの勉強2日目（『WordPress標準デザイン講座 第2版』）
9月10日（火）の日記です。
WordPressですが、しばらくは書籍にて基礎を固める事にしました。
参考にさせて頂くのは、野村圭氏・石原隆志氏 著書の『WordPress標準デザイン講座 第2版』です。
最新のWordPress（Gutenberg）に対応しているとの事で、これを元に仮想サーバーの構築の仕方、及びWordPress5の構造やカスタマイズの方法を学んでいきます。
ちなみに、この書籍では「Local by Flywheel」というWordPress専用のローカル環境構築ツールを使用するみたいですが、こうも簡単にWordPressの仮想環境が準備出来ると思いませんでした。本当に便利な世の中です。
ではこの書籍にてガッツリと基礎を学んでいきたいと思います。
WordPressの勉強1日目
9月9日（月）の日記です。
本日からWordPressの勉強を行います。
理由としては、日本のみならず世界中でWordPressが使われている事と、Progateにて習得したPHPのスキルを活かす為です。
今までは単純にHTMLによるWebページ制作が主でしたが、これからはWebフレームワークについて本格的に覚える事となりますので、気を引き締めていきたいと思います。
とは言ってもいきなりコードを書くというのは難しいので、まずはWordPressがどんなものかをドットインストールにて学んでみました。
古いレッスン（WordPress3.5.1）なので、直接このレッスンに習ってコードを書いたりはしていません。1からテーマを作る際の手順や、WordPress特有のテンプレートの使い方の基礎を動画を見て学びました。
次に、今度は現バージョンであるWordPress5.2にて、テンプレートの使い方やカスタム投稿における項目の追加、WordPress編集画面そのものの機能を追加したりする工程を下記動画にて学びました。
たにぐち まこと氏によるWordPress講座ですが、内容も充実しており、何より最新版である事も手伝って、非常に参考になる動画でした。コードについてはまだまだ理解が追いついていませんが、WordPressのブログそのものを編集する基礎をしっかりと学べると感じます。これが無料で見れるのは本当に有り難いです。
2つの学習動画を見て大まかな概要は学べたので、次回から書籍を元に、実際にWordPressを仮想サーバーにインストールしていきたいと思います。
Progateの復習 & 『LP ランディングページの教科書』の本を読んで
9月7日（土）の日記です。
休日という事で、読み終わっていない本を読んだりProgateの復習を行う事にしました。
まずはランディングページの制作に関して参考になるかと思って少しずつ読み進めていた、あびるやすみつ氏著書の『LP ランディングページの教科書』という本です。
内容としては、集客力を高める為の、
- ランディングページ作り方
- 文章の書き方
- 画像や広告による表現の仕方
- 分析の仕方
その他もろもろ、売れるランディングページを作るコツをこれでもかという位、説明してくれております。さすが、専門家や実績を得た人達によるノウハウが詰め込まれているといった感じでした。
しかし、現段階ではまだ想像も出来ない領域の話も多々あったのでまずは、達人はこの様な思考や分析でWebサイトを作っているという意識の高さを学ばせて頂きました。
また、現段階ですぐに取得出来そうなスキルは文章力ですので、これについては非常に参考になりました。写経でも良いので、書き方についてのノウハウを体で覚えていければと思います。
何にせよ、ランディングページの奥の深さを垣間見たのですが、1つ言える事は、「利益を出す」、これが大前提だという事ですね。これを決して忘れなければ自ずと高い質のランディングページを作っていけると感じます。
またProgateについては、まだ理解が怪しいPHPの総復習を行いました。
HTML内にPHPの内容を入れ込むのに混乱します。foreach文というのが本当に便利で役に立つのは分かったのですが、1つ1つ順を追っていかないと「何でこのプロパティの値を取ってこれるんだろう？」とか訳が分からなくなります。頭の中を整理しないと漠然となり、「正解したからまあいいか」で終わってしまいます。そこに注意する必要があると感じました。
それにしてもPHPのコードを見て思うのですが、クラスの書き方やコンストラクタを見ると、本当にC++と同じですね...。何かとても懐かしい気がします（笑）。
簡易ランディングページの作成6日目
9月6日（金）の日記です。
先日は生のHTML・CSSでランディングページを書きましたが、本日は同じWebページを今度はBootstrap4にて書く事にしました。
目的としてはBootstrapの復習もそうですが、やはり実務ではBootstrapを使う機会が多いと思うので、ランディングページも一度はBootstrapで書く経験をしておいた方が良いと判断した為です。また、今まではPC版を作成してからスマホやタブレットへのレスポンシブを追加していきましたが、今回はスマホ版を先に完成させ、そこからタブレット → PC版に発展させていく形を取ります。
結果、無事に完成させる事が出来ましたので、下記にUPしたランディングページのURLを載せておきます。
https://eewano.github.io/landing_page_bootstrap/index.html
感想としましては、...本当にBootstrapは楽で凄いです。先にレイアウトやカラーを決めてしまえば、後は margin や padding の調整でほぼ完成してしまいます。新たに実装したい事も、Bootstrap 独自のクラス名を追加すればほとんどは望む通りに反映されるので、ただただ「凄い」としか言い様がありません。
しかし、Bootstrap の書き方をキチンと理解していないと、思う様なレイアウトにならない事も今回のランディングページの作成で分かりました。「何で row や col の書き方は間違ってないのにブロックを並べて margin 等を設定すると勝手に折り返してしまうのだろう？」という自体にも陥りましたが、これは div の囲み方（ブロック構造）が間違っていた様です。
Bootstrapの肝である、container, row, col の関係と書き方は熟知しておかなければ！ ですね。
また、現代はスマホが主流なので、まずはスマホ版のレイアウトを完成させてからPC版等にレスポンシブを対応させていく方が良いかもしれませんね。というか、Bootstrap の仕組みを考えると、スマホ → タブレット → PCの順序でレスポンシブを対応させるのが最も理にかなっているのかもしれません。
簡易ランディングページの作成5日目
9月5日（木）の日記です。
本日はひたすらレスポンシブ対応に向けてSASSのコードの見直しと修正を行いました。レスポンシブ化にもそれ程労力を費やさないレイアウトをあらかじめ考えていたのですが、やはり実際に適用させるとなると、そう簡単にはいかないみたいです。
スマホ画面に対しては各ブロックを上から下に順に並べていく感じで良かったのでそれ程難しくはなかったのですが、タブレットとなると一部は横並びのままの方が見栄えが良いので flexbox や float を使う事となります。全部 flexbox でやれば良いと思っていたはずが、一部は画像と文章が入れ子になっているので、そうなると従来通りの float で上手く対応するしかなかったりと、所々で行き詰まる事も...。
後は、SASSのコードの書き方や、極力 margin や padding の記入を少なくする工夫も必要だと感じます。
「とりあえずこの文字の上側を開けよう」とか「padding をがむしゃらに設定しちゃったけど、レイアウトも崩れてないし、まあ形にはなったからいいか」とかでは今後の自分の為にもならないので、回数をこなしつつも、コードの書き方やまとめ方も意識していければと。
最終的にスマホ・タブレット・PCの3タイプのレスポンシブ・ランディングページが完成しましたので、github.io という簡易サーバーに挙げました。宜しかったら見てやって下さい。
https://eewano.github.io/landing_page/index.html
サーバーを契約しなくてもUP出来るのはいいですねぇ。もっと早く知っておけば良かったです。
簡易ランディングページの作成4日目
9月4日（水）の日記です。
何とか、PC版のランディングページが完成しました。
Bootstrap4を使わず生のcssで作ってみた感想ですが、代わりにflexboxを使用したので思った程作成に手間が掛かった様な感じは受けませんでした。「横並びにしたいブロックを float: left; して、最後は :after { clear: both; }で締めくくって...」という事をせずに横並びが出来るので、非常に便利です。
SASSも慣れるとやっぱりコンパクトに書けますね。同じボタンが複数ヶ所に配置されておりますが、大元のレイアウトを変数として作っておけば、各ボタンのクラス名が違ってもレイアウト管理が格段に楽になります。
...しかし、デザインについては全くのド素人である以上、構成や色使いで苦しみました。そして、ランディングページと果たして呼べるのか分かない程、自分でも多少の疑問符が付いてしまう出来栄えでした。最初はこんなものだと思うしか無いですが、今回の制作に付随して色彩感覚とか文章の書き方をもっと勉強しなくてはいけない気がします。
完成形を下に載せておきます。次回はレスポンシブ対応に向けての、コードの修正です。
簡易ランディングページの作成3日目
9月3日（火）の日記です。
先日作成したデザインカンプの画像を元に、本日はHTMLにてWebページ制作を開始しました。
ちなみに今回はBootstrap4を使わず生のHTML・CSSでレスポンシブを踏まえたページを制作すると共に、先日Progateで新しく始まったFlexboxのレッスンを勉強したので早速それを導入したいと思います。
また、同じくProgateで学んだSASS（CSSに変数や階層が使える）も取り入れる事にしました。
SASSについては、拡張子である「scss」そのままではHTMLにて読み込めない為、最初はコマンドラインにてscssファイルをcssファイルに毎回変換していたのですが、当然の事ながら面倒であったので、「Prepros」という、scssの保存と同時にcssファイルへの自動変換を行ってくれるアプリを導入しました。
無料版もありますので誰でも気軽に使えます。しかもLinux版もありますね。
実際にこれは使いやすいアプリです。一手間省ける事で確実に作業効率は良くなりますので。
まずはPC版の作成ですが、中々に大変な作業です。Bootstrap4を集中的にやっていたせいか、早速、生のHTMLでのコーディングを忘れかけていたので、思う様にレイアウトが決まりません...（汗）。
とりあえず現時点での進捗状況です。もっと頑張らないとですね。
