親要素いっぱいに広がるジャンボトロンを使う方法

親要素いっぱに広がるジャンボトロン

これは親要素の横方向いっぱいに広がるジャンボトロンです。
ブログのアイキャッチにも使えます。

Bootsrapにはデフォルトでジャンボトロン(jumbotron)が設定されています。
これは親要素の横幅いっぱいに広がるエリアで、テーマ作成などではブログヘッダーなどのカスタマイズによく使われています。

親要素いっぱいに広がるジャンボトロンを使う方法

ジャンボトロン(jumbotron)は親要素の横幅いっぱいのエリアにタイトルを表現するための「h1」タグのスタイルとリード文の記述をおこなうためのカスタマイズ「lead」クラスが定義されています。

使い方は以下のようになります。

通常は先ほど書いたようにブログのヘッダー画像部分に使われることが多いので「h1」タグで問題ないのでしょうが、わたしはブログのアイキャッチに使ってみたかったので、すこしカスタマイズ用のスタイルシートを設定しました。

トップにあるアイキャッチのソースは以下の通りです。

これで背景色がBootstrapぽくなった四角いエリア内に記事のタイトルとリード文(説明文)を書けるようにしました。

まとめ

ジャンボトロンは背景画像などをうまく使えれば、いろいろな表現ができるのでぜひ使い方をマスタしましょう。

以上、「親要素いっぱいに広がるジャンボトロンを使う方法」でした。

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