スポンサーサイト

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

Sponsored Link

Bootstrap3を使ってFC2ブログのテンプレを作ろうその一

今使ってるFC2のテンプレをBootstrap3(3.2)で作った(書きなおした?)ので、覚書的に。
久々のテンプレ変更
Bootstrapを使えば簡単にレスポンシブデザインのサイトが作れるので、勉強がてら作ってみましたが、一から書いたわけではないです。今まで使ってたPs960_2C_ver001、Bootstrap-2column、公式のbasic_white(作者さんありがとうございます!!でも作者さんのブログが無くなってたり凍結されてたり・・・)から必要部分のコードをパクらせて参考にさせていただきながら、BootstrapのGetting startedAll Templatesを見ながら作っていきます。
GitHubにリポジトリ作ってあげてるのでほしい方はどーぞ。ただ、ちょびちょび修正したりしてるのでご利用は自己責任でお願いします。(共有申請したけど通るかなぁ?

追記 共有通ってました。DLしてくれた方々ありがとー><
bootstrap3-2で共有に載ってます。



1.基本レイアウト
右プラグインの2カラムにします。
共通のheader footerは幅いっぱい、メインの記事とプラグインをBootStrapのグリッドシステムを使ってレイアウト。
layout.png 基本はこんな感じ。
layout2.png 幅を狭めるとこんな感じ。にしたい。

Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう!
Bootstrap 3 学習ノート
グリッドはかなり細かく指定できるんですが、めんどいシンプルに行きたいので、今回はメインを col-md-8 サイドを col-md-4 としました。もちろんこの部分に.col-xs- .col-sm-  .col-md- .col-lg- とそれぞれ指定することで、画面サイズに応じて細かく表示の挙動を変えることも可能です。

2.HTML宣言文とheadタグ内
HTML宣言、headタグ内に必要事項をFC2の変数入れて設定、CDN使ってBootstrap3のCSS、jQueryのCSSを読んでから、カスタマイズ用のCSSへのリンク、となります。BootstrapではCSSはあとから読み込んだものが優先されるので、先に本家のCSSを読んでからカスタマイズ用のCSSを読むようにします。

Bootstrap本体のCSSを読み込んだあとにカスタマイズCSS(FC2のテンプレート管理から編集可能なCSS)へのリンクを張ります。BootstrapをDLしてブログのアップローダーにあげてもいいんだけど、それだとFC2のサーバー次第だったりするしなー、ってことでCDNを使いました。
Bootstrap CDN
ついでにjQueryとjQuery mobileもCDNから持ってきます。
Google Hosted Libraries - Developer's Guide
まぁGoogleからじゃなくてもいいのでしょうが。そもそもjQuery mobileまで使うのかどーかよくわかってないんですがとりあえず同梱。
あとはベースに使わせてもらったいくつかのテンプレのheadタグ内のなんかをパクらせて真似させてもらったり何だったり。
とりあえずBootstrap3のCSSとBootstrapのjs、あとjQueryを読み込んでいれば、Bootstrap3のいろんなパーツがコピペで使えるはず。

3.bodyを作ろう
いよいよ本体を作っていきます。
class="container"で全体を組んで、class="container-innner"でfooter以外のすべて(header,main,side)を覆いました。
よくよく考えるとfooterだけ外す意味がよくわかりませんがまぁいいでしょう。
containner-innnerの中にまずはheader、次にcol-md-8でメインコンテンツ表示エリア、col-md-4でサイドのプラグイン表示エリア、containner-innnerを閉じて、containnerの終了前にfooterを作ります。こんなかんじでうまく行けば当初の構想通りのレイアウトをBootstrap3のグリッドシステムを使って実現できるはずです。

というわけでやってみましょう。

4.headerを作ろう

class="well"で囲むとシンプルなエフェクトをかけられます。header,side,footerはこれでエフェクトかけてみました。
header内左寄せしてFC2の変数使って%blog_name %introductionを表示。
すぐ下にナビバーをつけました。
ナビバーはjs入っているのでカスタマイズ次第ではドロップダウンとかもつけられるのですが、めんどいそんなに表示しておきたい項目もないだろうということでシンプルにAbout(ブログの説明記事へのリンク)、リスト(全記事表示)、RSS、Adminとしました。
基本的にはcomponentsのナビバーをちょっといじっただけなので、まぁこれ見ながらいろんなメニュー足したり引いたりすることもできるし、いらないようならばナビバー自体を削ってもいいでしょう。

5.メインを作ろう
いよいよメインの記事表示部分です。
class="row" "container"で囲んでcol-md-8指定してここにメインコンテンツを放り込みます。
まずはBootstrap標準コンポーネントのパンくずリスト、その下に記事、(RSS)、ページャー、みたいな感じ。
ホントはこの下にコメント欄、TB欄を作らなきゃいけないんだけど、これかなりハマったのでまた別記事で。

breadcrumb(パンくずリスト)はbreadcrumbsからまんまとってきてFC2独自変数を放り込めばおっけ。

記事欄はarticle class="post"で囲んで、タイトル(%topentry_link、%topentry_title)、下の行にinline-listで囲んでautherと日時、コメントやトラバがあればそれ表示する行を作りました。
moreとか自分のとこで使ってないしちゃんと動くかどうかよくわからないけれど、まぁこのへんは公式テンプレートや今まで使っていたテンプレの該当部分からパクって参考にしてテキトーに記述。

pagerはこれまたAligned linksから。ほんとは12345678って並んでる奴(Default pagination)


(なぜ縦に並ぶし!!
こーいうの使いたかったんだけど、どーもFC2は標準ではこれめんどいみたいで。JavaScriptとかでプラグイン作ってる方々は結構いらっしゃるので、そちらからいただいてきてもいいと思います。ただ、俺にはBootstrapのPaginationに当てはめる方法がわからなかったのでギブアップ。

6.サイドバーを作ろう
こっちはメインカラムに比べて格段に楽でした。(メインカラムはコメントやトラバにはまってたのもあるけど)
右カラムなのでメインの後に"col-md-4"で囲んで、さらに"well"でグラデーション。

一番上にあるタブはBootstrap-2columnからパクらせてお借りしてきました。これパンくずリストのすぐ下くらいに移動するのもありっちゃありだよねー。
あとはプラグインエリア作って、プラグインの変数入れていくだけ。というわけでとりあえずプラグイン1.2をサイドに縦に並べて表示する仕様になりました。これ、カラムの組み方次第でプラグイン1.2.3に対応させて、左2段とか左右振り分けとかも出来るよねー。その場合はメインをcol-md-6くらいにしてサイドを6 3 3とかにするとかね。まぁ気が向いたらやるかもしれないけど、イマドキは割とシンプルな方が受けるのかなぁ?

閑話休題
7.footerを作ろう
floatを解除してfooter。
表示したのはコピーライト表記(Copyright %blogname)、Powerd by FC2、あと削除禁止なFC2の広告タグ(%ad %ad2)

で、html閉じタグで終了。
次回は多分コメント、TB欄とCSSやるよー。

関連記事
久々のテンプレ変更
Bootstrap3を使ってFC2ブログのテンプレを作ろうその二
Bootstrap3でFC2のテンプレを作ろう 2回目( blue-navbar )
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。