こんにちは。fsです。
前回はunderscoresテーマを使って、Wordpressサイトの基礎工事を行いました。
※参考記事はこちら
↓↓↓↓↓↓↓
ただ、デフォルトの状態だとスタイルが崩れています。
そこで今回はBootstrapというcssのフレームワークを使ってレイアウトを整えていきます。
Bootstrapとは
BootstrapはTwitter社が開発したCSSの「フレームワーク」です。
通常cssを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。
つまり、
簡単かつ効率的にレイアウトを整える手段の一つ
と理解いただければOKです。
レイアウト調整
それでは少しだけレイアウトを調整していきます。
Bootstrapの読み込み
まず、Bootstrapのウェブサイトにアクセスして、専用のリンクタグをコピーします。
次にheader.phpを開き、wp_headの記述の直前にコピーしたリンクタグを貼り付けます。
これでBootsrapの読み込みが完了しました。
コンテナーで余白をつくる
トップページのタイトルや投稿が画面にくっつき過ぎているので、余裕を持ったレイアウトにしていきます。
Bootstrapにはコンテナーという概念があり、それを入れるだけで綺麗な余白ができます。
コンテンツを表示させるdivタグのクラスにcontainerを入れていきましょう。
これで再読み込みをすると、綺麗に余白が設定されました。
グリッドで左右に散らす
デフォルトのレイアウトでは、サイドエリアも下に来てしまっているので右に寄せていきます。
こんなときに使えるのがグリッドという概念です。
Bootstrapのグリッドレイアウトとは、
ページ全体を12分割できる
という優れものです。
早速活用していきます。
まずはheader.phpの最後の行に、コンテンツを表示させるdivタグとrowクラスを追加します。
次にfooter.phpのfooterタグ直前でdivタグを閉じます。
続いて、メインコンテンツのグリッドの大きさを振り分けていきます。
index.phpにコンテンツを表示させるメインタグ（左側）があるので、グリッドの大きさを指定します。
今回は8にしました。
右側に表示させるコンテンツの大きさも同様に指定していきます。
ここではsidebar.phpに記述します。
読み込んでみると、横並びになりました。
今回はシンプルなレイアウトにしましたが、もっとデザインにこだわりたい方はBootstrapの公式ページに色々な手法が載っていますので、ぜひ参考にしてみてください。
まとめ Bootstrapで楽々レイアウト調整
いかがだったでしょうか。
今回はBootstrapを用いて、
ウェブサイトのレイアウト調整
をしていきました。
cssの細かな知識がなくても決まったルールに沿って書いていけば、簡単にレイアウトを整えることができます。
コードを読む知識は少し必要ですが、初心者でも問題なく使えるはずです。
今回は以上です。
最後までお読みいただきありがとうございました。
簡単操作！プログラミングならMacBook！
コメント