WordPress

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

wordpress-

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

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

Bootstrapとは?

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

-wikipedia

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

Bootstrapの導入方法

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

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

1つめのやり方は、ファイルをダウンロードする場合です。ローカル開発などをする場合はこちらで行うほうが得策です。

Bootstrapをダウンロード

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

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

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

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

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

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

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

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

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が近いものを探す

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

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

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

基本的に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が最初から使われているテーマを使いたい…という方もいるかと思いますので、無料テーマも纏めてご紹介します。

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

Habakiri

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

Lightning

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

LIQUID PRESS

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

Bootstrapを使う時の注意点

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

表示速度に影響する

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

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

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

CSS同士で干渉がある

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

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

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

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

codecamp 530x212 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説
最後に、Bootstrapは便利ですが、WordpressのCSSについてもう少し詳しく学びたい方には、CodeCampやTechAcademyなどのデザインコースの受講がおすすめです。

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

CodeCampもTechAcademyも上場企業が運営していることもあってか、無料体験レッスンを日々提供しています。

CodeCampは、完全マンツーマンのオンラインレッスンスタイル(講師を自分で選択可能)で、TechAacademyは、オンラインの自習スタイル(週2回メンターによるメンタリング付き)となっています。

それぞれ特徴がありますので、どんなものか気になる方は、まずはそれぞれの無料体験レッスンを受けてみてから、受講を判断されてみるのもおすすめです。

CodeCamp公式サイト:プログラミングのオンラインスクールCodeCamp0 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説

TechAcademy公式サイト:Webデザイン+WordPressセットコース0 - WordPress初心者にオススメ。Bootstrapで楽々CSSが書けるので使い方を簡単に解説