morderblog 新しいことに挑戦する人を応援するメディア

【初心者向け】【第４回】WPテーマWriteの模写コーディング～フッター～

【初心者向け】【第４回】WPテーマWriteの模写コーディング～フッター～

こんにちは。macco（まっこ）です。

最近、週１ペースで公開しているWPテーマWrite模写コーディングシリーズ、今回で第４回となります。

いったいいつまで続くのか？！という疑問はさておき、、

今回はフッター部分のデザインを解説していきます。

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

対象のエリアは以下の部分です。

今までのWrite模写コーディングの内容を知りたい方は、第１回から第３回までの記事リンクを貼っておきますので、良かったらご覧ください↓

【初心者向け】【第１回】WPテーマWriteの模写コーディング～HTML～
【初心者向け】【第２回】WPテーマWriteの模写コーディング～ヘッダー～
【初心者向け】【第３回】WPテーマWriteの模写コーディング～メイン～

なお本記事は「【初心者向け】【第３回】WPテーマWriteの模写コーディング～メイン～」が終わっている人向けに書いていますのでご了承ください。

目次

前回終了時のHTMLとCSS

前回の記事「【初心者向け】【第３回】WPテーマWriteの模写コーディング～メイン～」終了時のHTMLとCSSはこちらです。

HTML
※bodyタグ部分を抜粋

<body>
  <div class="container">
    <header>
      <nav class="gnav">
        <div class="logo-area">
          <a href="#" class="logo">Write</a>
          <p>書くためのテーマ</p>
        </div>
        <div class="menu-area">
          <ul>
            <li class="menu-home">
              <a href="#">ホーム<i class="fas fa-chevron-down"></i></a>
            </li>
            <li class="menu-page">
              <a href="#">ページ<i class="fas fa-chevron-down"></i></a>
            </li>
            <li>
              <a href="#">タイポグラフィー</a>
            </li>
            <li>
              <a href="#">お問い合わせ</a>
            </li>
          </ul>
        </div>
        <div class="search-area">
          <img src="img/search-icon.png" class="search" alt="検索">
        </div>
      </nav>
    </header>
    <main>
      <div>
        <img src="img/cropped-nicole-honeywill-730102-unsplash.jpg" alt="key-visual">
      </div>
      <p class="page-lead">Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
      <article>
        <div>
          <header>
            <a href="#">2018年9月1日</a>
          </header>
        </div>
        <div>
          <a href="#">書くためのテーマ</a>
          <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
        </div>
      </article>
      <article>
        <div>
          <header>
            <a href="#">2018年3月5日</a>
          </header>
        </div>
        <div>
          <a href="#">画像付きの投稿</a>
          <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
        </div>
      </article>
      <article>
        <div>
          <header>
            <a href="#">2018年3月5日</a>
          </header>
        </div>
        <div>
          <a href="#">引用付きの投稿</a>
          <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
        </div>
      </article>
      <article>
        <div>
          <header>
            <a href="#">2018年3月5日</a>
          </header>
        </div>
        <div>
          <a href="#">コメント付きの投稿</a>
          <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
        </div>
      </article>
      <article>
        <div>
          <header>
            <a href="#">2018年3月3日</a>
          </header>
        </div>
        <div>
          <a href="#">吾輩は猫である</a>
          <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
        </div>
      </article>
      <article>
        <div>
          <header>
            <a href="#">2018年3月3日</a>
          </header>
        </div>
        <div>
          <a href="#">名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a>
          <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
        </div>
      </article>
      <div class="pagination">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">次へ<i class="fas fa-angle-double-right"></i></a>
      </div>
    </main>
    <footer>
      <div class="footer-top">
        <div class="profile-area">
          <div>
            <img src="img/profile-m.png" class="profile-img" alt="profile-image">
          </div>
          <div class="profile-name-block">
            <p>John Doe</p>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-facebook-f"></i>
            <i class="fab fa-instagram"></i>
          </div>
          <p>これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。</p>
        </div>
        <div class="footer-right">
          <p class="footer-title">フッター右</p>
          <p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
        </div>
        <div class="resent-posts">
          <p class="footer-title">最近の投稿</p>
          <div>
            <a href="#" class="post-title">書くためのテーマ</a>
            <header>
              <p>2018年9月1日</p>
            </header>
          </div>
          <div>
            <a href="#" class="post-title">画像付きの投稿</a>
            <header>
              <p>2018年3月5日</p>
            </header>
          </div>
          <div>
            <a href="#" class="post-title">引用付きの投稿</a>
            <header>
              <p>2018年3月5日</p>
            </header>
          </div>
        </div>
        <div class="category">
          <p class="footer-title">カテゴリー</p>
          <div>
            <a href="#">サンプル投稿</a>
          </div>
          <div>
            <a href="#">投稿フォーマット</a>
          </div>
          <div>
            <a href="#">普通の投稿</a>
          </div>
          <input type="text" placeholder="検索...">
        </div>
      </div>
      <div class="footer-bottom">
        <div>
          <i class="fab fa-twitter"></i>
          <i class="fab fa-facebook-f"></i>
          <i class="fab fa-instagram"></i>
        </div>
        <small>Powered by <a href="">WordPress</a> | Theme: <a href="">Write</a> by Themegraphy</small>
      </div>
    </footer>
  </div>
</body>

CSS

html {
  font-size: 18px;
}

body {
  font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
}

.container {
  max-width: 1024px;
  margin: 0 auto;
}

a {
  color: #666;
  text-decoration: none;
}

.logo {
  color: #333;
  display: block;
  font-size: 2rem;
  font-weight: bold;
}

.gnav {
  width: 100%;
  height: auto;
  margin-top: 3rem;
  margin-bottom: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

ul {
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}

.menu-area ul {
  display: flex;
  justify-content: space-between;
}

.menu-area li {
  padding: 1rem 1rem 0 1rem;
}

.menu-area a {
  font-size: .9rem;
}

.menu-area a i {
  font-size: .6rem;
  padding-left: .5rem;
}

.page-lead {
  color: #666;
  font-size: 1.6rem;
  margin: 4rem 0;
  line-height: 1.8;
}

article {
  display: flex;
  align-items: baseline;
  margin-bottom: 3rem;
}

article div:first-child {
  flex: 1;
}

article div:last-child {
  flex: 2;
}

article div:last-child a {
  font-size: 1.2rem;
  color: #333;
  font-weight: bold;
  margin-bottom: 1rem;
}

article div:last-child p {
  font-size: .9rem;
  color: #666;
  margin-top: 1rem;
  line-height: 1.8;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-bottom: 8rem;
}

.pagination a {
  font-size: .9rem;
  border: solid 1px #ccc;
  padding: 0.5rem 1rem;
  margin-right: 1rem;
}

.pagination a:first-child {
  background: #eee;
  font-weight: bold;
  cursor: text;
}

.pagination a:last-child i {
  font-size: small;
  color: #ccc;
  padding-left: 0.5rem;
}

フッターのデザイン

元のWriteの画面を見ると、フッターの部分が上部と下部の２エリアで構成されていることが分かります。

まずはフッター上部（HTML：class=”footer-top”）からCSSでスタイルをあてていきます。

フッター上部

フッター上部にある灰色の線、aタグにマウスカーソルを乗せた時の色の変更をCSSで指定します。

また縦並びの要素を、横並びにするためにFlexBoxを使います。

footer {
  border-top: solid 1px #ddd;
}

footer a:hover {
  color: bisque;
}

.footer-top {
  display: flex;
  margin: 5rem 0;
}

全体的に要素のサイズが大小違いますが、横並びになりました。

HTMLのclass=”footer-top”の配下にある４つのdivタグの大きさを均等にします。

４つのdivタグのclass名

  • 一番左：profile-area
  • 左から２番目：footer-right
  • 左から３番目：resent-posts
  • 一番右：category
.footer-top > div {
  flex: 1;
  padding-right: 30px;
}

.footer-top > div:nth-child(4n) {
  padding-right: 0;
}

４つのdivタグに対して、flexプロパティとpadding-rightプロパティで均等なサイズになるように調整します。

また一番右のdivタグ（４つ目のdivタグ）に対しては、padding-rightプロパティを０に指定しています。

フッター上部 – 一番左

それでは横並びになったdivタグ一番左の中身にCSSでスタイルをあてていきます。

flex-wrapプロパティでwrapを指定すると、配下の要素を折り返してくれます。
※文章の「これはプロフィールウィジェットです。～」の部分です。

.profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 1rem;
}

.profile-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.profile-name-block p {
  font-weight: bold;
}

.profile-name-block i {
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  color: #aaa;
  font-size: 1.4rem;
}

.profile-area > p {
  margin-top: 1rem;
  font-size: .9rem;
  color: #666;
}

フッター上部 – 左から２番目

続いてdivタグ左から２番目の中身をデザインします。

一緒に２番目、３番目、一番右の一番上にあるタイトル部分のデザインも行います。

.footer-top .footer-title {
  font-size: .8rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 2rem;
}

.footer-right p {
  font-size: .9rem;
  color: #666;
}

フッター上部 – 左から３番目

次にdivタグ左から３番目の中身をデザインします。

.resent-posts div {
  margin-bottom: 1rem;
}

.resent-posts a {
  text-decoration: underline;
  text-decoration-color: #ddd;
  font-size: .9rem;
}

.resent-posts p {
  font-size: .8rem;
  color: #666;
}

フッター上部 – 一番右

最後にdivタグ一番右の中身をデザインします。

.category div {
  margin-bottom: 1rem;
}

.category a {
  text-decoration: underline;
  text-decoration-color: #ddd;
  font-size: .9rem;
}

.category input {
  width: 100%;
  margin-top: 4rem;
  border: 1px solid #ddd;
  padding: 0.3rem 0.5rem;
}

フッター上部のデザインができました。

フッター下部

フッター下部（HTML：class=”footer-bottom”）をデザインします。

.footer-bottom {
  border-top: solid 1px #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
}

.footer-bottom div {
  width: 200px;
}

.footer-bottom::after {
  content: "";
  display: block;
  width: 200px;
}

.footer-bottom div i {
  margin-right: 1rem;
  color: #aaa;
  font-size: 1.4rem;
}

.footer-bottom small {
  color: #666;
}

.footer-bottom small a {
  color: #333;
}

.footer-bottom small a:hover {
  color: #111;
}

１点注意するところは、「.footer-bottom::after」によって右側に画面に表示されない要素を作っていることです。

右側に疑似的要素を作ることで、SNSアイコンのエリアと中央のコピーライトのエリアが均等に配置されるようになります。

以上でフッターのデザインができました。

終わりに

今回はWrite模写コーディングのフッター箇所を解説してきましたが、いかがでしたでしょうか。

第４回目にして、PC側のデザインが大体完成しました。

Write模写コーディングで残っている課題は「タブレット（TB）、スマートフォン（SP）のデザイン」になります。

上記の部分についても、引き続き解説していく予定です。

模写コーディングは、プログラミング学習を続けていくうえで必ずしも必須というわけではありません。

私も模写コーディングを通らず、実務をこなしてきました。

途中で諦めざるを得なくても、決して自分を責めたりしないでください。

あくまで学習方法の１つという認識で大丈夫だと思っています。

最後までお付きあい頂きありがとうございました。


続きを執筆しましたので、良かったらご参照ください↓

【初心者向け】【第５回】WPテーマWriteの模写コーディング～レスポンシブ①～

2020/10/25追記
本テーマのまとめ記事はこちら↓

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

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