プログラミング

Bootstrapで『manablog』風の静的サイトを作成してみた

投稿日:

スポンサーリンク

Bootstrapで『manablog』風の静的サイトを作成してみた

 

こんにちは、誠太です。

 

WordPressの教科書という本を元にWordPressサイトの構築を勉強していたのですが、基本的な部分の要点を抑えたので実際にWordPressサイト化させるための土台としてシンプルなmanablog風のサイトを作成しました。

 

 

WordPressのサイトを作成する手順の参考になればと思うので、これからWordPressのサイトを作成したいと思っている人の参考になれば幸いです。

スポンサーリンク

Bootstrapで『manablog』風の静的サイトを作成してみた

Bootstrapで『manablog』風の静的サイトを作成してみた

 

今回作成するにあたって、難易度がそこまで高くなさそうなmanablogをチョイスしてみました。

 

難易度がそこまで高くなさそうと言っても、レイアウトがシンプルというだけなので、マークアップにそこまで慣れていない人の場合は少し難しいと感じるかもしれません。

 

【注】manablogはBootstrapで制作されていません

manablogは実はBootstrapでは制作されていません。

Foundationという海外で有名なフレームワークで制作されているのですが、現状Bootstrapを使用する機会の方が多そうだったので、Bootstrapで制作してみました。

 

今回使用したフレームワークはこちら

manablogで使用されているフレームワークはこちら

 

Bootstrapで似たサイトを制作できるのか気になる人もいると思うので、そんな人の参考になれば嬉しいと思っています。

 

manabog風の静的サイト制作手順

簡単な手順について先にお伝えしておこうと思います。

 

  • Bootstrapで簡単なパーツを配置していく
  • レイアウトを整える
  • 適度にCSSで調整

 

使用した開発環境

開発環境に関しては、静的サイトの制作になるため、ブラウザのみあれば大丈夫です。

 

しかし、できれば使用するブラウザに関してはGoogle Chromeを使用しておくことをおすすめします。

 

Bootstrapといえど、普通に難しい

Bootstrapといえど、普通に難しい

 

Bootstrapは簡単みたいな風潮がありますが、マークアップにに慣れていない人にとっては普通に難しいと思います。

 

フレームワーク全般に言えることですが、プログラミング言語の簡略化がされているいえどもレイアウト含めサイトを構築するという点で考えると難易度的には変わりないと思うので、安易な考えは捨てて取り組んだ方が良いでしょう。

 

サイトのレイアウトを考える

サイトのレイアウトを考える際のポイントは、分割して考えることです。

 

  • ヘッダー
  • メイン
  • サイドバー
  • フッター

 

いっぺんに作成すると考えると整理ができなくて大変なので、ひとつひとつ区別して制作していくようにしましょう。

 

パーツを配置していく

今回manablog風のサイトを構築するにあたって使用したパーツに関しては後述しますが、ヘッダーから順番に配置していくのが一番バランスを取りやすく制作もしやすいと思います。

 

ヘッダータイトルは『Hello,World』の部分にサイトのタイトルを入力しておけばOKでしょう。

 

ナビ部分に関しては、『Nav』と『Search』の部分のスクリプトを削除すればスタンダードなブログのヘッダーメニューが完成します。

 

記事が表示される部分に関しては、マガジン型のレイアウトにしたかったので、Cardを使用。

 

サイドバー部分には同じくCardとリストを使用して、サイト運営者のプロフィール部分とアーカイブ部分を再現。

 

フッターは好みが分かれると思ったので、とりあえずCardで代用して配置を3分岐にして完成。

 

細かい調整をしていく【グリッドシステムがキモ】

ここまで単調に書いてきましたが、レイアウトの細かい調整をしていくにあたって苦労する部分がありました。

 

それは、記事本編部分とサイドバーの部分を分岐させる部分です。

 

コードとしては、こちらのサイトを参考にして分岐させることに成功したのですが、Bootstrapのグリッドシステムについての理解度が甘いということに気がつけたので、良い勉強になりました。

 

(むしろBootstrapはグリッドシステムがキモ)

 

Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

 

簡単に解説すると、Bootstrapの概念が『containerの中にrow』『rowの中にcolumun』という考え方になるので、rowの中にdivで囲んだcolumunを2つ作成すればよかったんですよね。

 

  • メイン部分:col-8
  • サイドバー部分:col-4

 

Bootstrapの概念がしっかり理解できていないと、メイン部分とサイドバー部分の分割ができずに苦労すると思うので、再確認のためにもしっかりとBootstrapの概念は理解しておきましょう。

 

使用したBootstrapのパーツ一覧

使用したBootstrapのパーツ一覧

 

Bootstrapで使用したパーツはそこまで多くありません。

シンプルな構造だったので、そこまで多くのパーツをしなくてよかったのはとても助かりました。

 

Bootstrap Components内パーツ

card類

  • Images

  • Example

  • Card deck

 

nav類

  • Nav 2つ目

 

List

  • Flush

 

Form

  • navbarのコード引用

 

実際に制作したHTMLコード配布

実際に今回制作したmanablog風のHTMLコードを配布しようと思います。

 

恐らくそのまま使用して使えると思うので、カード系のテーマを自作したいという人は参考になる部分もあると思うので、有効活用してみてください。

 

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="style.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>WordPress Theme Iris</title>
  </head>
  <body class="bg-light">
    <header class="bg-white">
      <div class="container">
      <h1>
        <img src="image/logo.png" alt="" width="350">
      </h1>
      </div>
    </header>


  <!-- ヘッダーナビゲーション -->
    <nav class="navbar navbar-expand-lg navbar-light bg-dark">

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>


      <div class="container">

        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">

            <li class="nav-item active mr-4">
                <a class="nav-link text-white pt-1 pb-1 h6" href="#"><i class="fas fa-home"></i><strong> Home</strong><span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item mr-4">
              <a class="nav-link text-white pt-1 pb-1 h6" href="#"><i class="fas fa-book-open"></i><strong> Blog</strong></a>
            </li>
            <li class="nav-item mr-4">
              <a class="nav-link text-white pt-1 pb-1 h6" href="#"><i class="fas fa-network-wired"></i><strong> SEO</strong></a>
            </li>
            <li class="nav-item mr-4">
              <a class="nav-link text-white pt-1 pb-1 h6" href="#"><i class="fas fa-code"></i><strong> CODE</strong></a>
            </li>
            <li class="nav-item mr-4">
              <a class="nav-link text-white pt-1 pb-1 h6" href="#"><i class="fas fa-dollar-sign"></i><strong> Money</strong></a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>


<!-- header top contents-->

<div class="container">
  <div class="row">

    <div class="card-deck pt-5">

      <div class="card">
          <img src="https://picsum.photos/370/200" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title text-center">Content Title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="text-center">
              <button type="button" class="btn btn-outline-secondary">read more</button>
            </div>
          </div>
        </div>
        <div class="card">
          <img src="https://picsum.photos/370/200" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title text-center">Content Title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="text-center">
              <button type="button" class="btn btn-outline-secondary">read more</button>
            </div>
          </div>
        </div>
        <div class="card">
          <img src="https://picsum.photos/370/200" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title text-center">Content Title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="text-center">
              <button type="button" class="btn btn-outline-secondary">read more</button>
            </div>
          </div>
        </div>

    </div>

  </div>
</div>

<!-- main contents -->

<div class="container mt-5">
  <div class="row">
    <div class="col-lg-8">

      <div class="row">
        <div class="col- xs-12 pb-5">
          <div class="card">
            <div class="card-body text-center">
              <h2 class="card-title">Content Title</h2>
            </div>
            <img src="https://picsum.photos/370/200" class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              <div class="text-center">
                <button type="button" class="btn btn-outline-secondary">read more</button>
              </div>
            </div>
          </div>
        </div>

        <div class="col- xs-12 pb-5">
          <div class="card">
            <div class="card-body text-center">
              <h2 class="card-title">Content Title</h2>
            </div>
            <img src="https://picsum.photos/370/200" class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              <div class="text-center">
                <button type="button" class="btn btn-outline-secondary">read more</button>
              </div>
            </div>
          </div>
        </div>

        <div class="col- xs-12 pb-5">
          <div class="card">
            <div class="card-body text-center">
              <h2 class="card-title">Content Title</h2>
            </div>
            <img src="https://picsum.photos/370/200" class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              <div class="text-center">
                <button type="button" class="btn btn-outline-secondary">read more</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- サイドバーコンテンツ -->

    <div class="col-lg-4 pr-0">
      <div class="card">
        <img src="https://picsum.photos/370/270" class="card-img-top" alt="...">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>

      <div class="mt-3">
        <form class="form-inline my-2 my-lg-0 pl-5 mt-5 pt-3 pb-3 bg-white">
          <input class="form-control mr-sm-2 " type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>

      <div class="pt-3 mt-3 bg-white">
        <h5 class="text-center pb-2">Archive</h5>
        <hr color="primary" width="100">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">2019/07</li>
            <li class="list-group-item">2019/06</li>
            <li class="list-group-item">2019/05</li>
            <li class="list-group-item">2019/04</li>
            <li class="list-group-item">2019/03</li>
            <li class="list-group-item">2019/02</li>
            <li class="list-group-item">2019/01</li>
            <li class="list-group-item">2018/12</li>
            <li class="list-group-item">2018/11</li>
            <li class="list-group-item">2018/10</li>
        </ul>
      </div>
    </div>
  </div>
</div>

    <!-- ページネーション -->

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

<!-- フッター -->

<div class="bg-white py-5">
  <div class="container">
    <div class="row">
      <div class="col-lg-4">

        <p class="h5">WordPress Theme 『Iris』</p>
        <img src="https://picsum.photos/370/270" alt="..." class="img-thumbnail">

      </div>
      <div class="col-lg-4">

          <p class="h5">Category</p>
          <img src="https://picsum.photos/370/270" alt="..." class="img-thumbnail">

      </div>
      <div class="col-lg-4">

          <p class="h5">Portfolio</p>
          <img src="https://picsum.photos/370/270" alt="..." class="img-thumbnail">

      </div>

    </div>
  </div>
</div>

<footer class="bg-dark text-center pt-2 pb-2">
  <small class="text-white">&copy; 2019 create by Seita.</small>
</footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  </body>
</html>

 

サイト土台ができたらWordPressテーマ化へ

サイト土台ができたらWordPressテーマ化へ

 

WordPressのテーマを作成するための静的サイトは完成したので、この後はWordPressのテーマに変換していく作業になります。

 

WordPressテーマ化するのにあたって、途中でレイアウトを変更することも出てくると思うので、また別記事でWordPressテーマ化したときの模様についてお伝えしようと思います。

 

Bootstrapを使用したとしてもここまで作成するまでに10時間ほどかかりました。

 

今後のことを考えてもマークアップを早めに済ませることができるように積極的にサイトを作っていかなければ成長できなさそうですね。

 

それではまた、誠太でした。

 

\ あわせて読みたい! /

参考
プログラミングを独学するのに最適な学習方法を実体験をもとに紹介!

  プログラミングを独学で習得しようと思っているけど、なんとなくうまくいっていない気がする。やっぱり独学で習得するのは不可能なのかな?   このような人に向けた記事になっています。 ...

続きを見る

  • この記事を書いた人
  • 最新記事
誠太

誠太

接客業で年間1600万円の売上を達成した経験を活かして、リアル接客とWebマーケティングを融合。『事実と根拠を明確に、誠実な情報発信』をモットーにブログを更新しています。

-プログラミング
-

Copyright© SEITALITY , 2019 All Rights Reserved.