スポンサーサイト

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

Sponsored Link

Bootstrap3でFC2のテンプレを作ろう 2回目( lightgreen-navbar,black-navbar,white-navbar )

Bootstrap3でFC2のテンプレを作ろう 2回目( blue-navbar )で作ったのの色違いをいくつか作ってみています。共有申請してるけど通るかどうかは知りません。
例によってGitHubにあがってるのでほしい方はご自由にどーぞ。

1.なんで作ったし
やっぱ色違い欲しいよねー。
あとナビバーの色白黒に関してはデフォルトで用意されてる(Navbarのnavbar-defaultとnavbar-inverse使えるからCSSがシンプルになっていいよねー。というかデフォルトでいくつかの色を用意してくれればいいのに。あぁ、だからBootswach

2.とりあえず作ってみたwhite
基本があると楽だよねー。
前回(blue)の時にナビバーのclass指定でnavbar navbar-custom navbar-fixed-top にしてnavbar-customにCSSをあててみたんだけど、今回はデフォルトのをそのまんま使うのでnavbar navbar-default navbar-fixed-topに変えればそれでおっけ。


ついでにCSSのナビバーのところもほぼ全削除。残したのはドロップダウンの文字サイズ指定とナビバー自体への影の部分だけ。

シンプルなのはいいことだ。"Keep it simple, stupid"の精神的にはこれが一番ですねー。

ついでにbackground-color とかborderの色をなんとなく合うように淡目の黒に変換。#666; でほとんどの部分を統一。
"Keep it simple, stupid"!!
デフォルトのナビバーのCSSってことでなんか調節しないとうまく動かないとことかあるのかと思っていたらすごいあっさり行って逆に拍子抜け。

3.とりあえず作ってみたblack
whiteと同じくこれまたNavbarのサンプル(?)から
navbar navbar-custom navbar-fixed-top のとこをnavbar navbar-inverse navbar-fixed-topに差し替えるだけ。


CSSの方も同じくほぼ全削除。

これまた影とドロップダウンの文字色だけ。"Keep it simple, stupid"!!

あとはbackground-colorとかborderの色をナビバーに合わせてwhiteより若干濃い目の黒#222 とか#080808 に変えてみましょう。

4.とりあえず作ってみたlight-green
ぶっちゃけこれが一番楽だと思ってたら一番めんどかった。
blueと同じくclassはnavbar-custom。でBootswachのSandstoneの2つ並んでる下の方の色にしよー。明るい緑っていいよね。(白抜き文字が見えにくくなるとか考えてなかった)
#2fa4e7のところを#89BE3D(デフォルト色) #178accのところを#89be3d に変更。これでカーソル当てた時に少し濃い緑になります。

ついでにbackground-colorはナビバーより少し濃い目の#2eb72e;当たりをチョイス。
あとborderももうちょい深めのグリーンで統一。

色の濃淡とか明暗の調整がけっこうめんどいんだけど、ここ→ ColorHexa  を見つけてから若干捗るようになりました。

5.現状での問題と今後の課題
5-1.ナビバーからプルダウンで月別アーカイブとかカテゴリとか表示できるのはいいんだけど、うちのブログですら月別アーカイブ収まってないんだよねー。で、スクロールしようとしても、プルダウンじゃなくて表示してるページのほうがスクロールしちゃう。これじゃ超縦長画面でしか見れないじゃんねー。。。
なので結局コンパクトタイプなんかのアーカイブとかカテゴリ表示するプラグインは表示しなきゃアクセス的にあれ。なのでプルダウンで表示できるやつ結局うちでもサイドに表示してます。

5-2.ナビバーからのプルダウンの背景色と文字色の指定がよくわからん。ナビバーのフォント色白にしたらプルダウンの背景も白で真っ白なプルダウンメニューが開いたように見えてしまう。(実際は表示されてるのだけれど、白地に白文字で表示されてるので読めない)。結局プルダウンの背景色を付けて回避したりしたけど、これどーにかしたかった。

5-3.最近流行りのjqueryかなんかでにゅるっと出てくる「Topに戻る」ボタンつけたいねー。せっかくCDNでjqueryもjquery mobileも読み込んでるのにあまり意味感じないとかね。いや、削ったらそれはそれで表示崩れるとことかあるんだけれども。

6.やってみてよかったこと
コメント欄には毎度毎度ハマったけど、それ以外は基本的にいい練習になるねー。コードって書かないとすぐ忘れちゃうから、とりあえずなんかやってみよう、ってときにはテンプレ作ったりプラグインや機能考えて実装するためのなんやかんややったりするのは楽しいかも。
あといくつかの何かを勉強してから作りなおすと、先月自分が書いたクソコードに苦しまされるとともに、先月自分が躓いたところが簡単に感じられることもあるし、同じとこでハマって進歩ねーなーってこともあります。
でもPHPはそこそこ使えるかもだけど、SQL云々とかになってくると限界はあるよねー。
参入障壁的には低いと思うし、クソテンプレ作って公開したところで何が起こるかってDLされないだけだから気楽にできるしねー。
けどFC2何の審査してんだかしらないけど承認待ちが長いから何とかしろ。

色違いのリクとかあったら作るかも知れないし作れないかも知れないし、作れても作らないかも知れません。

追記
ハジカレマシタ
【テンプレート名】
blue-navbar

【不承認理由】
・FC2検索バーが表示されていないため。
原因はnavbar-fixed-topがFC2検索バーを隠してしまっていたこと。なのでnavbarのCSSにmargin-top: 27px; を追記してリベンジ。



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

Sponsored Link

Web技術関連の目次

Web技術でサーバーに入れにくい記事が増えてきたのでこっちに目次作ります。
とりあえずFC2ブログテンプレ関係はここ確定。
Javascript、PHPに行きたい。CMS関係をこっちに持ってこようかは迷い中。(暫定的に載せてみる)
↓血迷って作ったサイト。たまに更新。
tminの実験&練習用サイト

Bootstrap
ド素人だけどBootStrapでサイトを作ってみるよ
久々のテンプレ変更
Bootstrap3を使ってFC2ブログのテンプレを作ろうその一
Bootstrap3を使ってFC2ブログのテンプレを作ろうその二
Bootstrap3でFC2のテンプレを作ろう 2回目( blue-navbar )
Bootstrap3でFC2のテンプレを作ろう 2回目( lightgreen-navbar,black-navbar,white-navbar )
新年明けましてテンプレート不承認
bootstrap3のaffixの動作がおかしい対処

CMS
Debian ServerにLAMP&Drupalインストール
Debian Server (Squeeze)にXoops2.2.0
Debian ServerにJoomla!インストール
CentOS 6.5でnginx+php-fpmでPHPを動かしてみる
Cent OS 6.5でNginx+php-fpm+mysqlでFC2オープンソース版とWordPress
CentOSサーバーにDrupal入れてみた
CentOS6.5 x Nginx x php-fpm x MySQLでConcrete5.6
Concrete5.7インストールのための環境つくり(未完
Drupal Coreの手動Update(7.30→7.31)
CentOS6.5+Nginx+php-fpm+MySQLでConcrete5.7
Concrete5.7.0が正式にリリースされたので早速CentOSサーバーに入れて動かしてみたよ
concrete5.7.0→concrete5.7.0.1 upgrade(CentOS6.5+LEMP)
concrete5.7をCentOS ServerのLEMP環境でコア共有して複数サイト動かしてみる
CentOS6.6のLEMP環境のconcrete5とWordPressのちゅーにんぐ(MySQL編)
CentOS+LEMPでbaserCMS
CentOS6.6+Nginx+muninでサーバー監視
CentOS6.6+Nginx+muninでサーバー監視〜その2 FCGI+監視対象追加
Nginx+Wordpressで固定ページをTOPにしたら403になった件


さくらVPSの初期設定
sshでファイル転送(scp)
さくらVPS(CentOS6.6)にRedmineを入れる記
さくらVPS(CentOS6.6)にGitlabをインストール
総合案内当ブログについて
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。