WordPress

【便利!】Bootstrapとは?使うまでの準備から使い方までを紹介!【WordPress編】

 

こんにちは、keiです!

 

悩む人
HTML/CSSのデザイン知識がなくてもBootstrapを使うことで、簡単にフォームやボタンを作ることができるって聞いたけど、そもそもBootstrapって何?また、Bootstrapの導入方法も知りたいです!

 

こんな悩みに答えます。

 

Bootstrapは、デザインやHTML/CSSの知識がなくても、シンプルな指示で簡単にデザイン作成ができるフロントエンドのフレームワークです。

 

Web制作者の作業を楽にしてくれます!
KEI

 

本記事では、記事前半にbootstrapについて紹介し、記事後半ではワードプレスでBootstrapを使う方法についても図解を使って紹介しています。

 

Bootstrapを使う際の注意点についても紹介していますので、ぜひ参考にしてみてください!

 

 

Bootstrapとは?

Bootstrapとは?

 

Bootstrapは、Twitter 社が開発したCSSフレームワークです。

 

ちなみに、Bootstrapの読み方は『ブートストラップ』と読むそうです!
KEI

 

冒頭で紹介しましたように、あらかじめ用意されているスタイルのルールがあるので、整ったWebデザインを作ることができます。

 

例えば、『タイポグラフィ』、『ボタン』、『ナビゲーション』などを作れる感じです!

 

また、CSSフレームでありますが、JavaScriptでの動的要素も含まれています。

 

初心者の方ですと、コーディングするのにCSSやJavaScriptの知識が必要になりますが、Bootstrapを使うことで簡単にWebデザインを作成できます。

 

Bootstrapを使うメリット・デメリット

Bootstrapを使うメリット・デメリット

 

Bootstrapを使うメリット・デメリットについて、紹介します。

 

Bootstrapを使うメリット

 

Bootstrapを使うメリットは以下です。

 

・レスポンシブ対応している

・必要なアイコンが揃っている

・動的なデザインを作成しやすい

・HTML,CSSの知識がなくても使いやすい

・速攻でキレイなデザインパーツを作れる

 

繰り返しになりますが、Bootstrapはサイト制作をするのに簡単でスムーズにデザインが作れます。

 

コンポーネントを自作する必要はなく、HTMLタグにクラスを追加してあげることで、実装することができます。

 

また、CSS3のメディアクエリを使用しているため、コンポーネントもレスポンス対応しています。

 

スマホ、タブレット用に個別でスタイルを作成する必要がないので、大変有り難いですね。
KEI

 

Bootstrapを使うデメリット

 

デメリットは、以下の通りです。

 

・カスタマイズには多少知識が必要

・既存のCSSと干渉しあう可能性がある

・バージョンアップをキャッチアップするのが大変

 

正直、Bootstrapは、使い始めて慣れるのに時間がかかるかなと思います。

 

個人的に要素を大きくするClass指定などで苦戦しました・・・。
KEI

 

特に、今まで自分でCSSコードを書いていた人にとっては、カスタマイズするのに少々時間がかかるかもしれません。

 

Bootstrapを使うための準備(WordPress編)

Bootstrapを使うための準備(WordPress編)

 

それでは、ワードプレスで、Bootstrap(ブートストラップ)を使用する手順について紹介します。

 

step
1
Bootstrapを読み込む

 

まずは、Bootstrapを読み込めるようにします。

 

ちなみに、Bootstrapは『バージョン4,5』がありますして、今回は、バージョン5をダウンロードして紹介します。

KEI

 

また、Bootstrapを読み込む際には、2つのやり方があります。

 

・コンパイルされたCSS,JavaScriptをダウンロードして、ソースコードを取得する方法

・CDNを使って読み込む方法

 

今回は、比較的簡単なCDNを利用してデザインを実装していきます。

 

CDNとは?

コンテンツデリバリネットワーク(Content Delivery Network)」の略でして、ファイルが他のサーバーにアップロードされていて、そこから自由に読み込んで使うやり方です。

 

まずは、Bootstrap CDNからコードをコピーします。

 

 

コピーができましたら、ワードプレスの「①外観 → ②テーマエディタ → ③header.php」を開き、「head」内にコードを貼ります。

※テーマファイルの編集前は、バックアップをしておくことをオススメします。

※お使いのワードプレステーマによって、「head」に貼り付ける方法が異なる場合があります。

 

 

貼り付けができましたら、「ファイルを更新」をクリックして完了です。

 

step
2
Bootstrap公式サイトからスタイルを探す

 

続いて、使いたいスタイルを公式サイトから探します。

 

公式サイトにいきましたら、画面左側にあるメニューから使いたいスタイルをクリックします。

 

今回は、ボタンを選んで実装してみます。
KEI

 

サイドメニューの「Button」をクリックして、表示されたコードをコピーします。

 

 

step
3
コードを貼り付ける

 

最後にコピーしたコードを貼り付けます。

 

参考に各テーマファイルは以下の通りです。

 

・トップページ:frontpage.php、index.phpなど

・ヘッダー:header.php

・フッター:footer.php

・投稿ページ:post.phpやsingle.php

・カテゴリー一覧ページ:archive.php

 

試しに、投稿ページ(post.php)にHTMLタグを追加してみたいと思います。

 

まずは、「投稿 → 新規追加」をクリックして、記事ページを開き「テキスト」に切り替えます。

 

先ほどコピーしたコードを以下のように貼ります。

 

 

貼り付けができましたら、プレビューでチェックします。

 

 

上記のように、ボタンが表示されたら完了です。

 

Bootstrapでデザインをカスタマイズする方法

デザインのカスタマイズ方法

 

Bootstrapでは、オリジナルのクラスを使うことで、デザインの変更ができます。

 

今回は、以下2つについて紹介します。

 

・ボタンの調整

・フォームの調整

 

ボタンの調整

 

ボタンの大きさ(サイズ)を変えるやり方は簡単にできます!

 

以下の赤文字のように、大きさを指定するクラスをつけてあげます。

 

 command
<button type="button" class="btn btn-primary btn-lg">Large button</button>

 

上記指定してあげることで、ボタンサイズが大きくなりますよ!
KEI

 

他にも、ボタンのサイズを小さくするには、「btn-sm」を適応することで変更できます。

 

その他ボタンの種類やデザインのカスタマイズ方法について、公式サイトでも詳しく紹介されていますので、参考にしてみてください!

 

フォームの調整

 

フォームのデザインもオリジナルのクラスを使うことで、簡単にデザイン調整ができます。

 

試しに、以下のコードをコピーして貼ります。

 

 command

<div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"> </div> <div class="mb-3"> <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div>

 

すると以下のように、フォームが表示されます。

 

 

他にも、「セレクトメニュー」や「チェックとラジオボタン」といったフォームデザインがありますので、公式サイトを参考にしてみてください!

 

Bootstrapを使用する際の注意点

 

ワードプレスでBootstrapを使用する際の注意点は以下です。

 

・CSS同士の干渉

・IEの対応がされていない

 

CSS同士の干渉

 

Bootstrapを導入することで、既存のCSSと干渉してしまう可能性があります。

 

特に、ワードプレステーマを導入しているとCSS同士が干渉しあうかもしれません・・・。
KEI

 

例えば、クラスの指定の仕方が「btn」ですと干渉しあってしまい、うまく表示されなくなったり、レイアウトが崩れることもあります。

 

当ブログでは、アフィンガー5というテーマを使っているのですが、以下のようにSNSアイコンの色が変わってしまっています。

 

 

Bootstrapを利用する際には、サイト公開後、表示が問題ないか検証してみる必要がありそうです。

 

IEの対応がされていない

 

Bootstrap5は、IE10、IE11では対応がされていないようです。

 

なので、Bootstrapを使用する際には、IEにも対応しているBootstrap4を使用するのが良さそうです。

 

とはいえ、IEのサポートが2022年6月15日(日本では6月16日)に終了すると発表されています。

 

 米Microsoftは5月19日(現地時間)、Webブラウザ「Internet Explorer」(IE)のサポートを2022年6月15日(日本では6月16日)に終了すると発表した。レガシーアプリをIEで使っている企業ユーザーに対し、後継Webブラウザ「Microsoft Edge」の「IEモード」を使うよう勧めた。IEモードは少なくとも2029年まではサポートするとしている。

参考サイト:https://www.itmedia.co.jp/news/articles/2105/20/news047.html

 

上記のことを考えると、今後はIEを考えず、Google Crome、Firefox対応を検討しておけば問題なさそうですね。

※Firefox3.6以下はサポートなし

 

Bootstrapとは?使い方:まとめ

 

今回は、Bootstrapとは?からBootstrapの使い方について紹介しました。

 

Bootstrapは、デザインの特別な知識がなくても簡単にボタンやフォームを作ることができます。

 

ただ、スタイルの書き方やデザインの調整をするのに始めは慣れないかもしれません。

 

慣れてくれば大変便利でスムーズにサイト制作ができると思うので、どんどん活用していこうと思った次第です!

 

また、バージョンアップやBootstrapの最新情報が発信されたら記事をアップデートしようと思います。
KEI

 

ここまで読んで頂きありがとうございました。

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-WordPress