【初心者向け】WPテーマWrite~書くためのテーマ~模写コーディングのやり方まとめ

【初心者向け】WPテーマWrite~書くためのテーマ~模写コーディングのやり方まとめ

こんにちは。macco(まっこ)です。

今回は、WordPressテーマであるWrite~書くためのテーマ~の模写コーディングに挑戦する人に向けて、「少しでも参考になれば」という気持ちから、これまでの記事をまとめて紹介しようと思います。

本記事を読むことで、Write模写コーディングのやり方が分かります。

また最後に自分の今の心境を書きました。
ぜひ最後までご覧ください。

模写コーディングはどんな人にオススメ?

以下のようなお悩みを持っている方にオススメです。

  • オンライン学習サービス(Progateまたはドットインストールなど)の基礎学習が終わり、次の学習方法に困っている
  • 昔HTMLとCSSを学習したことがあるが、最近になって復習したいと思っている

実在するWebサイトを見ながら、HTMLやCSSを使って作成することを模写コーディングといいます。

模写コーディングをするとどんなメリットがあるのか、なぜWordPressテーマWrite~書くためのテーマ~を模写の対象として選択するのかなどを知りたい方は、以下の記事をご参照ください↓

Font Awesomeを使えるようにしよう

Writeの模写コーディングを行う際に、ページ上部にあるメニューの下矢印アイコンやSNSアイコン(Twitter、Facebook、Instagram)を再現する必要があります。

そこで今回は、Webフォントアイコンを手軽に使用できるFont Awesomeというサービスを利用しましょう。

Font Awesomeの導入方法については、以下の記事をご参照ください↓

Writeの模写コーディングを始めましょう

全体の構成をHTMLで作成します

それでは実際にWriteを見ながらHTMLを作成していきましょう。

多くのWebサイトは、数パターンのレイアウトによって構成されています。

レイアウトを意識するとHTMLの文章の構造が把握しやすくなります。

どのようなレイアウトがあるかについては、以下の記事で説明しているのでご参照ください↓

ヘッダーの詳細をCSSでデザインします

HTMLが用意できたら、次にWebサイト全体とWriteのロゴやメニューを含むヘッダーの詳細をCSSでデザインしていきます。

以下の記事では、全体のフォントサイズやフォントの種類の指定、ヘッダーにあるメニューを横並びにする方法などについて説明しています↓

メインの詳細をCSSでデザインします

ヘッダーのデザインが終わったら、次にメイン部分の詳細をCSSでデザインしていきます。

メイン部分の中身が3つのブロックで構成されていて、各ブロックに対してどのようにCSSで書いたら良いか、以下の記事で説明しています↓

フッターの詳細をCSSでデザインします

ページの最下部であるフッターの詳細をCSSでデザインしていきます。

フッターは上部と下部の2ブロックで構成されています。

フッター上部の中にある4つのdivタグを均等に水平配置するなど、ヘッダーやメインでFlexBoxを用いてデザインしたことを思い出しながら、コーディングを行っていきます。

詳細については以下の記事をご参照ください↓

レスポンシブ対応を行います

これまでに行ってきたCSSのデザインは、PCサイズになります。

タブレットやスマートフォンのデザインを行うためには、レスポンシブ対応をする必要があります。

レスポンシブ対応とは、タブレットやスマートフォンなどの画面の横幅を条件にし、適用するデザインを切り替え、それぞれのデバイスに合わせた画面表示になるようにCSSで対応することです。

レスポンシブ対応は一般的に、CSSのメディアクエリという手法を使用します。

タブレットサイズについてと、スマートフォンサイズについての2回に分けて説明しています↓

Writeの模写コーディングについて、解説は以上となります。

最後に

WPテーマWrite~書くためのテーマ~模写コーディングのやり方について解説してきましたが、いかがでしたでしょうか。

ここからは、現在私が思っている心情を書きますね。

私は「今までの業務から身につけた知見が、皆さまにとって何かしら役に立つ可能性があるかもしれない」「自分の状況を少しずつ改善していきたい」という思いから、2020年の4月頃Twitter当ブログの運用を開始しました。

皆さまの支えもあって、半年間継続できました。
感謝の気持ちでいっぱいです。
ありがとうございます。

今後も小さな気づきや思考、Webにまつわる情報を発信していけたらなと思います。

何卒よろしくお願いいたします。

最後までお読みいただきありがとうございました。

プログラミングカテゴリの最新記事