WordPress

WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

wordpress-

Webデザイン初心者のうちは、CSSなどで細かく横幅の指定などをするのに結構手間取りますよね。

そんな方でも、簡単かつ速攻で綺麗なスタイリングができるCSSのフレームワーク「Bootstrap」というものがあります。

そこで今回は、Bootstrapについて紹介していきます。

※なお、デザインについて詳しく学びたい方は、オンラインのデザインスクールの受講がコスパが良いのでおすすめです。

Bootstrapとは?

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。

タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

-wikipedia

つまり、Bootstrapは簡単に言うと、HTMLとCSSを楽に実装できるテンプレートです。

Bootstrapの導入方法

それでは実際にBootstrapを導入してみましょう。Bootstrapの導入の仕方は、大きく2通りあります。

① ファイルをダウンロードする方法

boot - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説1つめのやり方は、ファイルをダウンロードする場合です。ローカル開発などをする場合はこちらで行うほうが得策です。

ファイルを直接ダウンロードする場合は、Bootstrapのサイトからダウンロードをします。

Bootstrapをダウンロード

29b9f9d375d44e9f8493e4b42597cce9 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

そうすると、ZIPファイルがダウンロードできますので、まずはZIPファイルを解凍・展開してください。

基本的なBootstrapの構造は以下のようになっていますが、この時に「bootstrap.min.css」の場所を理解しておいてください。

673f64f3eae949efcdce3a205370d41b - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

WordPressのフォルダにアップロード

0aa270555362518c67363b041e382d4e - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

次は、先程のフォルダ毎アップロードをします。アップロードはFTPなどで行ってください。

headにlinkタグを追加

その次は、headにlinkタグを書いて読み込ませます。

下記に1例を載せておきますが、この時に注意すべきポイントは、href以降のパスです。

ここはWordpressで扱っているテーマによるので、一概に言えませんので、デベロッパーツールで実際のheadタグの表示を見ながら調整しましょう。

※こちらの方法が難しい場合は、下記のCDNで読み込みをする方法がオススメです。

② CDNで読み込みをする方法(初心者でも簡単!)

CDN(コンテンツデリバリネットワーク)を使うと、headタグ内に1行追加するだけで全てが済みます。

まず、Bootstrap CDNから以下のコードをコピーしてlinkタグにし、head内に貼り付けてください。

190c756d575547d64182d1fc430779fd - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

5c4c33cd93108bf061979fde77fdaa07 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

これでCDNの方は完了です。特に理由がなければ、CDNでの方法をオススメします。

Bootstrapの使い方

次は、Bootstrapを実際に使う方法をお伝えします。

Bootstrapを読み込む

上記の内容を基に、読み込んでください。また、デベロッパーツールなどでエラーが出ていないことを確認してください。

公式ページでCSSが近いものを探す

7416883c8a8327217121fa0047a71e40 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

次は、使いたいスタイルに近いものをBootstrap公式ページから探します。

クラスの指定の仕方を調べる

基本的にbootstrapは、HTMLのクラスの指定の仕方でスタイルが設定できます(CSSファイルがそのように作られています)。

例えば、ボタンの例ですと、btn-○○でデザインが変わります。

4bb0826bccb8caf4165675ffbeee139b - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

テーマの編集からHTMLをカスタマイズする

クラスの指定の仕方が分かったら、HTMLにクラスを指定していきます。

WordPressでの編集先を纏めておくと、下記のようになっています。

  • ヘッダー:header.php
  • トップページ:frontpage.phpやindex.phpなど
  • フッター:footer.php
  • 投稿ページ:post.phpやsingle.php
  • 固定ページ:page.php
  • カテゴリー一覧ページ:archive.php

もちろん、テーマによって名称は変わりますが、概ねこのような名称になっています。

そこで、自分の編集したいPHPファイルのHTMLタグにクラスを指定してください。

Bootstrapベースの無料Wordpressテーマ一覧

中にはBootstrapが最初から使われているテーマを使いたい…という方もいるかと思いますので、無料テーマも纏めてご紹介します。

なお、自分で使ってみるとデモと全く違っていたりしますので、テーマに関してはデモなどを信じずに一度使ってみることをオススメします。

LIQUID PRESS

d127a2fa433b2908a2d02e3003416cf6 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

公式サイト:https://lqd.jp/wp/0 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

Habakiri

0affe2d894bcc4fc17a622d13c5e6802 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

Lightning

e33fd523187e1dc94c07ed5b5b9565d3 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

Bootstrapを使う時の注意点

なお、Bootstrapは良い所が非常に多いのですが、もちろんデメリットもありますので、Bootstrapを使う際の注意点を纏めておきます。

表示速度に影響する

まずは、Bootstrapのその性質上、一度読み込みのlinkタグを書いた場合、使用しているいないに関わらず、読み込みが起こります。

この時、自分が全く必要としていないCSSも全て読み込んでしまいますので、その読み込み時間が余分にかかることになります。

Bootstrapの場合、この「余分」にあたるCSSの記述量が結構多いため、表示速度の削減に限界が来やすいです(jQueryでも似たような問題が起きます)。

CSS同士で干渉がある

また、場合によっては、自分で書いたCSSと干渉が起きることがあります。特に、テーマに後から付け足す形でBootstrapを入れた場合には、気をつけてください。

クラスの指定の仕方が、「btn」など頻繁に思いつきそうな名称のため、同じクラスでCSSを書いてしまいがちだったりもします。

このあたりを考慮して、Bootstrapを導入してください。

WordPressのCSSをもう少し詳しく学びたい方へ

最後に、Bootstrapは便利ですが、WordpressのCSSについてもう少し詳しく学びたい方には、プログラミングスクールのデザインコースの受講がおすすめです。

最初に基礎的なデザインの知識を学んでおけば、あとはその都度わからないところを自分で調べて対応することができるようになります。

オンラインマンツーマンのCodeCampの無料体験レッスン

codecamp 530x212 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説
例えば、上場企業が運営するCodeCampでは、完全マンツーマンのオンラインレッスンスタイル(講師を自分で選択可能)です。

講師は全員現役エンジニア講師で、自分で講師を選ぶことができますので、とにかくマンツーマンレッスンを受けたい方には向いています。

CodeCampの口コミはこちら

CodeCampの無料体験レッスンへ0 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

週2回メンタリングのTechAcademyの無料体験レッスン

techacademy 530x220 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説
他にも、上場企業が運営するTechAcademyでは、オンラインの自習スタイル(週2回メンターによるメンタリング付き)が可能です。

TechAcademyの場合は、週2回ほどオンラインで現役エンジニアメンターによるメンタリングがありますので、モチベーションを維持やすくなっています。

学習ペースを掴みたい方などは、TechAcademyの無料体験レッスンがおすすめです。ぜひ自分にあったやり方で、デザインについて学んでみてください。

TechAcademyの口コミはこちら

TechAcademyの無料体験レッスンはこちら0 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説