ワードプレス初心者向け情報サイト『webcode』WordPress初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。2019年10月27日webcode編集部FacebookTwitterはてブPocketFeedlyWebデザイン初心者のうちは、CSSなどで細かく横幅の指定などをするのに結構手間取りますよね。そんな方でも、簡単かつ速攻で綺麗なスタイリングができるCSSのフレームワーク「Bootstrap」というものがあります。そこで今回は、Bootstrapについて紹介していきます。※なお、デザインについて詳しく学びたい方は、オンラインのデザインスクールの受講がコスパが良いのでおすすめです(最後に詳細を記載しております)。オンラインマンツーマンのCodeCampの無料体験レッスンBootstrapとは?BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。-wikipediaつまり、Bootstrapは簡単に言うと、HTMLとCSSを楽に実装できるテンプレートです。Bootstrapの導入方法それでは実際にBootstrapを導入してみましょう。Bootstrapの導入の仕方は、大きく2通りあります。ファイルをダウンロードする方法1つめのやり方は、ファイルをダウンロードする場合です。ローカル開発などをする場合はこちらで行うほうが得策です。ファイルを直接ダウンロードする場合は、Bootstrapのサイトからダウンロードをします。Bootstrapをダウンロードそうすると、ZIPファイルがダウンロードできますので、まずはZIPファイルを解凍・展開してください。基本的なBootstrapの構造は以下のようになっていますが、この時に「bootstrap.min.css」の場所を理解しておいてください。WordPressのフォルダにアップロード次は、先程のフォルダ毎アップロードをします。アップロードはFTPなどで行ってください。headにlinkタグを追加その次は、headにlinkタグを書いて読み込ませます。下記に1例を載せておきますが、この時に注意すべきポイントは、href以降のパスです。rel="stylesheet">ここはWordpressで扱っているテーマによるので、一概に言えませんので、デベロッパーツールで実際のheadタグの表示を見ながら調整しましょう。※こちらの方法が難しい場合は、下記のCDNで読み込みをする方法がオススメです。CDNで読み込みをする方法(初心者でも簡単!)CDN(コンテンツデリバリネットワーク)を使うと、headタグ内に1行追加するだけで全てが済みます。CDNから以下のコードをコピーしてlinkタグにし、head内に貼り付けてください。href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">これでCDNの方は完了です。理由がなければ、CDNでの方法をオススメします。次は、Bootstrapを実際に使う方法をお伝えします。Bootstrapを読み込む上記の内容を基に、読み込んでください。デベロッパーツールなどでエラーが出ていないことを確認してください。公式ページでCSSが近いものを探す次は、使いたいスタイルに近いものをBootstrap公式ページから探します。クラスの指定の仕方を調べる基本的にbootstrapは、HTMLのクラスの指定の仕方でスタイルが設定できます(CSSファイルがそのように作られています)。ボタンの例ですと、btn-○○でデザインが変わります。テーマの編集からHTMLをカスタマイズするクラスの指定の仕方が分かったら、HTMLにクラスを指定していきます。WordPressでの編集先を纏めておくと、下記のようになっています。ヘッダー:header.phpトップページ:frontpage.phpやindex.phpなどフッター:footer.php投稿ページ:post.phpやsingle.php固定ページ:page.phpカテゴリー一覧ページ:archive.phpもちろん、テーマによって名称は変わりますが、概ねこのような名称になっています。そこで、自分の編集したいPHPファイルのHTMLタグにクラスを指定してください。中にはBootstrapが最初から使われているテーマを使いたい...という方もいるかと思いますので、無料テーマも纏めてご紹介します。自分で使ってみるとデモと全く違っていたりしますので、テーマに関してはデモなどを信じずに一度使ってみることをオススメします。PRESS公式サイト:https://lqd.jp/wp/HabakiriLightningBootstrapを使う時の注意点なお、Bootstrapは良い所が非常に多いのですが、もちろんデメリットもありますので、Bootstrapを使う際の注意点を纏めておきます。表示速度に影響するまずは、Bootstrapのその性質上、一度読み込みのlinkタグを書いた場合、使用しているいないに関わらず、読み込みが起こります。この時、自分が全く必要としていないCSSも全て読み込んでしまいますので、その読み込み時間が余分にかかることになります。Bootstrapの場合、この「余分」にあたるCSSの記述量が結構多いため、表示速度の削減に限界が来やすいです(jQueryでも似たような問題が起きます)。CSS同士で干渉があるまた、場合によっては、自分で書いたCSSと干渉が起きることがあります。テーマに後から付け足す形でBootstrapを入れた場合には、気をつけてください。クラスの指定の仕方が、「btn」など頻繁に思いつきそうな名称のため、同じクラスでCSSを書いてしまいがちだったりもします。このあたりを考慮して、Bootstrapを導入してください。WordPressのCSSをもう少し詳しく学びたい方へ最後に、Bootstrapは便利ですが、WordpressのCSSについてもう少し詳しく学びたい方には、プログラミングスクールのデザインコースの受講がおすすめです。最初に基礎的なデザインの知識を学んでおけば、あとはその都度わからないところを自分で調べて対応することができるようになります。筆者の場合はTechAcademyのデザインコースを受講しました。週2回メンタリングのTechAcademyの無料体験レッスン上場企業が運営するTechAcademyでは、オンラインの自習スタイル(週2回メンターによるメンタリング付き)が可能です。与えられた課題をクリアすると次のレッスンに進めるスタイルです。TechAcademyの場合は、週2回ほどオンラインで現役エンジニアメンターによるメンタリングがありますので、モチベーションを維持やすくなっています。こちらのオンラインのビデオチャットで、もろもろわからない点も質問することができます。実際の学習ペースを掴みたい方などは、TechAcademyの無料体験レッスンの活用がおすすめです。自分にあったやり方で、デザインについて学んでみてください。TechAcademyの口コミはこちらTechAcademyの無料体験レッスンはこちらオンラインマンツーマンのCodeCampの無料体験レッスン他にも、上場企業が運営するCodeCampでは、完全マンツーマンのオンラインレッスンスタイル(講師を自分で選択可能)です。講師は全員現役エンジニア講師で、自分で講師を選ぶことができますので、その点がTechAcademyとの違いです。TechAcademyは1ヶ月間から受講ができますが、CodeCampは2ヶ月となっています。マンツーマンレッスンを受けてもう少しゆっくりしたペースで学びたい方には、CodeCampの方が向いています。CodeCampも毎日無料体験レッスンをやっていますので、それぞれ受講して比べてみるのも良いでしょう。日本で使われているwebデザインの技術のほとんどは、海外の1~3年前の流行であるということがよく言われます。そこで今回は、今この瞬間に海外...WordPress(ワードプレス)さくらのレンタルサーバとエックスサーバーを比較!おすすめはどんな人?今回はWordPressの運用でよく使われるレンタルサーバーで有名な、さくらのレンタルサーバーとエックスサーバーについてです。筆者は両方の...WebデザインJavascriptでできることや初心者向けの勉強方法は?実用までの5ステップを解説webデザインの勉強をしていく上で、HTMLやCSSと違い、ぐっとプログラミングの難しさが出てくるのがJavaScriptです。慣れるまで...WordPress(ワードプレス)wordpressとは?CMSとは?初心者が分かるように簡単解説!そこそこネットに詳しい方でも「WordPressってなに?」って聞かれることがあります。そこで今回は、WordPressの元になっている「...WordPress(ワードプレス)Udemyのワードプレス講座の評判は?プログラミングスクールよりおすすめ?オンライン動画で学べる「Udemy」を使って、「ワードプレス」と検索すると、たくさんのワードプレスの講座が出てきます。webcodezeroRANKINGShopify(ショピファイ)の評判は?カラーミーショップやリピートとの比較エックスサーバーの使い方をワードプレス初心者にわかりやすく画像で解説【経験談付き】ロリポップはライトプランで十分?ワードプレスを複数するならどのlolipopのプランが良い?バインドアップ(BiNDup)の評判は?料金比較やメリット・デメリットを解説ヘテムルとエックスサーバーの比較!wordpress初心者におすすめはどっち?CATEGORYWordPress(ワードプレス)初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope(グーペ)初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。Jimdo(ジンドゥー)初心者向けにjimdoに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、jimdoの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。WIX(ウィックス)初心者向けにWIX(ウィックス)に関するお役立ち情報が掲載されています。口コミや評判、メリット・デメリット、WIXの利用がおすすめな人や、他のCMSやホームページ作成ツールとの比較情報などもご紹介しています。RentalServer(レンタルサーバー)レンタルサーバーに関する口コミや評判、メリット・デメリット・料金比較などが掲載されています。ワードプレス(wordpress)運用におすすめのレンタルサーバーもご紹介しております。