WordPressの高度なカスタマイズ② Bootstrapでレイアウト調整

Wordpress

こんにちは。fsです。
前回はunderscoresテーマを使って、Wordpressサイトの基礎工事を行いました。
※参考記事はこちら
↓↓↓↓↓↓↓

ただ、デフォルトの状態だとスタイルが崩れています。

余白が全くなく、きれいなレイアウトじゃないです

そこで今回はBootstrapというcssのフレームワークを使ってレイアウトを整えていきます。

Bootstrapとは

BootstrapはTwitter社が開発したCSSの「フレームワーク」です。
通常cssを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。

つまり、

簡単かつ効率的にレイアウトを整える手段の一つ

と理解いただければOKです。

レイアウト調整

それでは少しだけレイアウトを調整していきます。

Bootstrapの読み込み

まず、Bootstrapのウェブサイトにアクセスして、専用のリンクタグをコピーします。

この部分をコピー

次にheader.phpを開き、wp_headの記述の直前にコピーしたリンクタグを貼り付けます。

wp_headの直前に貼り付けます。

これでBootsrapの読み込みが完了しました。

コンテナーで余白をつくる

トップページのタイトルや投稿が画面にくっつき過ぎているので、余裕を持ったレイアウトにしていきます。
Bootstrapにはコンテナーという概念があり、それを入れるだけで綺麗な余白ができます。

コンテンツを表示させるdivタグのクラスにcontainerを入れていきましょう。

クラスにcontainerを追加します

これで再読み込みをすると、綺麗に余白が設定されました。

ちゃんと余白ができています

グリッドで左右に散らす

デフォルトのレイアウトでは、サイドエリアも下に来てしまっているので右に寄せていきます。

このエリアを右に寄せていきます

こんなときに使えるのがグリッドという概念です。
Bootstrapのグリッドレイアウトとは、

ページ全体を12分割できる

という優れものです。
早速活用していきます。

まずはheader.phpの最後の行に、コンテンツを表示させるdivタグとrowクラスを追加します。

divタグとそのクラスに”row”を追加

次にfooter.phpのfooterタグ直前でdivタグを閉じます。

footerタグ直前でdivタグを閉じる

続いて、メインコンテンツのグリッドの大きさを振り分けていきます。

index.phpにコンテンツを表示させるメインタグ(左側)があるので、グリッドの大きさを指定します。
今回は8にしました。

メインタグのクラスにグリッド(カラム)の大きさを指定

右側に表示させるコンテンツの大きさも同様に指定していきます。
ここではsidebar.phpに記述します。

asideタグのクラスに大きさを指定

読み込んでみると、横並びになりました。

左右に振り分けられました

今回はシンプルなレイアウトにしましたが、もっとデザインにこだわりたい方はBootstrapの公式ページに色々な手法が載っていますので、ぜひ参考にしてみてください。

まとめ Bootstrapで楽々レイアウト調整

いかがだったでしょうか。

今回はBootstrapを用いて、

ウェブサイトのレイアウト調整

をしていきました。

cssの細かな知識がなくても決まったルールに沿って書いていけば、簡単にレイアウトを整えることができます。
コードを読む知識は少し必要ですが、初心者でも問題なく使えるはずです。

今回は以上です。
最後までお読みいただきありがとうございました。

簡単操作!プログラミングならMacBook!

Is this 投稿 useful? Useful Useless 4 of 4 people say this 投稿 is useful.

コメント

海外ブログバナー

にほんブログ村 海外生活ブログへ

海外ブログバナー

にほんブログ村 海外生活ブログへ

シンガポールの古本屋さん

タイトルとURLをコピーしました