スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

Bootstrap3でFC2のテンプレを作ろう 2回目( blue-navbar )

Bootstrap3を使ってFC2のテンプレを作ろうの2回目。
前回作ったやつ
Bootstrap3を使ってFC2ブログのテンプレを作ろうその一
Bootstrap3を使ってFC2ブログのテンプレを作ろうその二

共有申請(blue-navbar)してるけど、無保証MITライセンスでGitHubにも上げてます。GitHubの方はちょくちょく修正したり、突然放置になったりもしますけれども。t-min/template_for_fc2
今回作ったのはbootstrapforfc2-blueのほうね。

1.なんで作ったし
前回は前回でまぁいいんだけど、wellだけでグラデつけてるのってなんか暗いよねー。あとせっかくBootstrap使ってるのにcol-md-しか指定してないのってもったいないよねー。あとせっかくBootstrap使ってるのにナビバー使わないのとかってもったいないよねー。あと初めて作ったのに300DLとかされて調子に乗っちゃいました。

2.今回の構想
・ナビバー使う。ここにドロップダウンで最近の記事とかカテゴリとか入れれば、サイドに表示しなくても良くなる?から全体的にスッキリさせられるんじゃないの?
・あとレスポンシブ対応を強化。Bootstrapでは画面サイズに応じてcol-lg-(デスクトップフルサイズ?) col-md(PCサイズ) col-sm(タブレットサイズ) col-xs(モバイルサイズ)と切り替えられるので、フル活用。
・全体的にちょっと明るくしたい。

というわけでBootswatchのテーマを参考にして配色揃える。ただBootswatchのCDNはない?のであくまで該当箇所のコピペな感じ。
基本のHTMLは前回作ったものを流用。ただしレイアウトやらなんやらでクラス指定変えたりとかするのであくまでベース。

3.基本構造
一番上にPC、タブレット、モバイル共通のナビバー。これは下にスクロールしてもついてきて、常に画面上に出ているものになります。これはBootstrap3のnavbar-fixed-top指定で実現します。ナビバーも(たぶん)横幅767px以下になると折りたたまれて、並べているメニューが右側にドロップダウンボタンとしてまとめられます。

コンテンツの配置はBootstrapのグリッドレイアウトをそのまま使います。
公式のGrid system解説
col-lg(PCフルスクリーン?)、 col-md(PCちょっと狭いの?) col-sm(タブレットサイズ) col-xs(モバイルサイズ)、それぞれグリッドを適用したいところにclass指定で入れてあげればおっけー。また、カラムの合計は12になるようにします。一応グリッドを入れ子にしてその中でさらにカラム指定して、ってこともできるのですが、基本レイアウトには使いません。(結果的にコメ欄なんかはこの入れ子になっちゃってるのかな?

PCからの閲覧時にはブラウザの幅に応じて、基本的に右サイドバーの2カラム。
col-lg.png col-lg9/col-lg3
横幅1200px以上の時に適用される・・・のか?まぁ、ブラウザ幅が広い時にはメインとサイドバーが9:3になるように設定。
col-md.png col-md-8 col-md-4
たぶんこれが992px以上1200px未満の時に適用されるもので、メインとサイドが8:4。以前作ったテンプレではこのcol-md-しか指定してませんでしたね。

タブレット幅の時はサイドが下に落ちて、side1とside2が横並びになるように。
col-sm.png col-sm-12 +col-sm-6+col-sm-6
Navbar、Title、メインときて、その下にPC画面では右サイドバーとして表示されていたSide1、Side2が横並びになります。FC2ブログ的にはプラグイン1.2になります。

モバイル幅の時は単純にすべて縦並び。
col-xs.png col-xs
モバイルの時はhiddenとか使ってプラグイン非表示とかにしてもいいかなとか思ったんですが、めんどいまぁ、スマホ用や携帯用のテンプレはそれぞれ勝手にFC2仕様で別の専用テンプレートが優先して使われるのでそんなにこだわらなくてもいいかなとか。

では、以下実際のコードとか書きながら見て行きましょう。
4.headを作ろう
headタグ内は以前と基本同じよねー。あぁ、bootstrap自体がバージョンアップで3.3.1になってるのでCDNではそれを指定。
Bootstrap3.3.1のCDN


metaタグでFC2変数入れたり何だり、BootstrapのCDNでデフォルトのCSS読み込み、jqueryとかjquery mobileもCDNでとってきます。自分で定義したCSSをあとから読み込むようにデフォルトのCSSよりあとの行に書きます。
あとの行は他の今まで使ってたテンプレからパクっていただいてきたFC2独自の変数行。

5.navbarを作ろう
基本的には公式のdefault-navbarをそのまま引っ張ってきてちょこちょこいじっていきます。
Default navbar
navbar-fixed-topをつけると常に画面に表示されるようになります。あと、navbar-defaultだとデフォルトのナビバーのCSS読みに行っちゃうので、classはnavbar navbar-custom navbar-fixed-topとしましたが、よくよく考えればnavbar-defaultでCSSに書けばそっち優先されるじゃんねー。まぁいいや。
ナビのメニューはブログ名、About(説明記事へのリンク貼る)、List(全記事一覧)、RSS、ドロップダウンで今までタブに表示してたRecent(最近の記事)、Category、Archives(月別アーカイブ)を投入。で、右寄せでAdmin。

このままだと見栄え的にひどいことになるけどあとでCSSで色つけますねー。Bootstrapのデフォルトナビバー(白・黒)使いたい人はnavbar-custom のとこnavbar-defaultやnavbar-inverseに変えてみたら使えると思うよー。

6.全体をcontainerで覆ってメインを作ろう
ここねー、実はcontainerで覆うの忘れてて個別記事画面かトップからの何件ごとのページのどっちかでサイドが落ちちゃってたんですよねー。基本だっつーの。学べ俺。
title、introductionをpage-headerを使ってそれっぽく見せます。
Bootstrap Page Header

メインコンテンツは上記の通りのグリッドレイアウトにしたいので、メインとサイドバーをcontainer-innnerで囲んだ上で、メインをcol-lg-9 col-md-8 col-sm-12 col-xs-12、サイドを2つに分けた上でそれぞれにcol-lg-3 col-md-4 col-sm-6 col-xs-12と定義。これで画面サイズに応じて上記のレイアウトになるはずです。
col-lg-container.png 見にくいw
container、container-innnerで囲んだ部分はすべて画面サイズに合わせてレスポンシブに動いてくれるはず。たぶん。

あとのとこは目新しい物入れてないなー。コメ欄とかも前作ったのからそのままだし。

6.CSSを書こうか
CSSって一番めんどいよねー。
まぁ、今回はbootswatchのceruleanから色パクって参考にして、その色のナビバー作ったらあとはコンテンツ周りもそんな感じで色統一してけばいいよねー。
というわけで、DLして関係してそうな部分(.navbarのあたり)をまるごとコピー。
色を定義してる部分を探りながらいじっていきました。(よって関係ないコードが混じってる可能性も大)


navbar使うときはnavbarがページコンテンツにかぶってしまうことがままあるのでbodyにpadding:70px; が推奨されていますが、いろいろ試してみた結果60pxでも問題なさそうなので60pxに。たぶんh1のフォントサイズ変えるなら70px取ったほうがいいかも知れないです。
あとはnavbarに合わせて記事タイトルやボーダーの色を #2fa4e7 に指定。
ちょっと立体感出すために各パーツに影を付けてみる(CSS3の機能で古いIEだと効かない)
box-shadow :1px 1px 2px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

このへんは吉野家コピペで練習するHTML&CSSなんかを作ったりしたおかげで勉強しました。
一応今回はカスタマイズもしやすいようにコメント増やせたし、コードの見通しも前回よりは良くなったはず。あと、前回良くわからずに使ってたインラインスタイル指定とかよくわからんclassも外したつもり。
色違いは簡単に作れそうなので、暇があったら作るかもねー。

FC2は独自変数がアレだけれど、ほぼ自由にいじれるのでいい練習台になりますね。

関連記事
久々のテンプレ変更
Bootstrap3を使ってFC2ブログのテンプレを作ろうその一
Bootstrap3でFC2のテンプレを作ろう 2回目( lightgreen-navbar,black-navbar,white-navbar )
新年明けましてテンプレート不承認
関連記事
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

コメントの投稿

管理者にだけ表示を許可する
ブログ内検索

カスタム検索

フリーエリア

クリックで救える命がある。

レンタルサーバー

さくらのマネージドサーバ
さくらインターネットのVPS
ConoHaのVPS
WebARENA VPSクラウド
99円レンタルサーバー
【CloudCore VPS】
GMOクラウドのレンタルサーバー
転送量無制限 ABLENET
@WAPPYレンタルサーバー
SPPDレンタルサーバー

カテゴリー+月別アーカイブ

 

アクセスカウンター

現在の閲覧者数:

プロフィール

Author:tmin
PCヲタ。ライト2ちゃんねら。
スロット好きのギャンブラー。(元
むしろ人生がギャンブルだが目下のところ負けっぱなし。
座右の銘は「結果オーライ」。故に基本適当。
トラブルもまた楽しみのひとつ

コメント、トラバ、相互リンク歓迎。お気軽にどうぞ。
当ブログについて
Twitterでこっちとあっちの更新情報流すことにしてみます。
http://twitter.com/t_min
Project Mikunchu♪Wikiできました。
Mikunchu200x40.png


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。