戯言と技術: 2月 2014

2014年2月23日日曜日

bootstrapのテンプレートデザイン性を少し出してみました。

bootstrapのテンプレート
基本的な感じではなくサイトで利用可能なイメージをしてみました。
少し改良すると色を変更し差別化できるかと思います。

タイトルの下にナビゲーションがあるのでこちらがwidth 100%で表示されています。
この部分が特徴的なデザインかと思います。

コンテンツは、やや狭いと思えば#contents部分のcol-xs-2を調整していただければ
柔軟かと思います。

フッターはシンプルにしていますのでカスタマイズ必要かも？

ブログのイメージですが、その他にも活用可能かと思います。
端を消して２カラム、１カラム構成も可能です。

それぞれ、header、navigator、contents、pager、footerの単位で区切っているので
間を追加する場合はこちらに挟めば対応できます。

以下ソースです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>bootstrap3ノ進め方</title>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>   
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <style type="text/css">
        <!--
        #header {
            height: 50px;
            width: 100%;
            text-align: center;
        }
        #footer {
            background-color: #428bca;
            background-image: -moz-linear-gradient(top, #428bca, #222222);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#222222));
            background-image: -webkit-linear-gradient(top, #428bca, #222222);
            background-image: -o-linear-gradient(top, #428bca, #222222);
            background-image: linear-gradient(to bottom, #428bca, #222222);
            background-repeat: repeat-x;
            border-color: #428bca;
            height: 60px;
            text-align: center;
        }
        #navigator {
            background-color: #428bca;
            background-image: -moz-linear-gradient(top, #428bca, #222222);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#222222));
            background-image: -webkit-linear-gradient(top, #428bca, #222222);
            background-image: -o-linear-gradient(top, #428bca, #222222);
            background-image: linear-gradient(to bottom, #428bca, #222222);
            background-repeat: repeat-x;
            border-color: #428bca;
        }
        .navbar-grad {
          background-color: #428bca;
          background-image: -moz-linear-gradient(top, #428bca, #222222);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#222222));
          background-image: -webkit-linear-gradient(top, #428bca, #222222);
          background-image: -o-linear-gradient(top, #428bca, #222222);
          background-image: linear-gradient(to bottom, #428bca, #222222);
          background-repeat: repeat-x;
          border-color: #428bca;
         filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
        }
        .navbar-grad > .active  > a{
          background-color: #428bca;
          background-image: -moz-linear-gradient(top, #428bca, #222222);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#222222));
          background-image: -webkit-linear-gradient(top, #428bca, #222222);
          background-image: -o-linear-gradient(top, #428bca, #222222);
          background-image: linear-gradient(to bottom, #428bca, #222222);
          background-repeat: repeat-x;
          border-color: #428bca;
         filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
        }
        
        .navbar-grad > li > a:hover, .navbar-grad > li > a:focus {
            background-color: #428bca;
        }
        #contents {
            margin-top: 10px;
        }
        #pager {
            text-align: center;
        }
        </style>
    </head>
    <body>
        <div id="header"><h1>bootstrap無料テンプレート</h1></div>
        <div id="navigator" class="row">
            <div class="col-xs-2" style="background-color: #428bca;"></div>
            <div class="col-xs-8" style="">
                <ul class="nav nav-pills nav-justified navbar-grad">
                  <li class="active"><a href="#" >ブログ</a></li>
                  <li><a href="#" >このサイトについて</a></li>
                  <li><a href="#" >メッセージ</a></li>
                  <li><a href="#" >コンテンツ</a></li>
                </ul>
            </div>
            <div class="col-xs-2" style="background-color: #428bca;"></div>
        </div>
        <div id="contents" class="container">
            <div class="row">
              <div class="col-xs-2" style="">
              <div class="panel panel-primary">
                  <div class="panel-heading">
                    <h3 class="panel-title">最新記事</h3>
                  </div>
                  <ul class="list-group">
                    <li class="list-group-item"><a href="#">テンプレート1</a></li>
                    <li class="list-group-item"><a href="#">テンプレート2</a></li>
                    <li class="list-group-item"><a href="#">テンプレート3</a></li>
                    <li class="list-group-item"><a href="#">テンプレート4</a></li>
                  </ul>
                </div>
                <div class="panel panel-primary">
                  <div class="panel-heading">
                    <h3 class="panel-title">アーカイブ</h3>
                  </div>
                  <div class="panel-body"><a href="#">2014/02月 <span class="badge">12</span></a></div>
                  <div class="panel-body"><a href="#">2014/01月 <span class="badge">12</span></a></div>
                </div>
              </div>
              <div class="col-xs-8">
               <div class="row">
                  <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                      <img src="256x256.png" alt="">
                      <div class="caption">
                        <h3>画像サムネイル</h3>
                        <p>画像の説明です。ここに説明文を入れると様々な内容で表示が可能です。</p>
                        <p><a href="#" class="btn btn-primary">リンク</a></p>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                      <img src="256x256.png" alt="">
                      <div class="caption">
                        <h3>画像サムネイル</h3>
                        <p>画像の説明です。ここに説明文を入れると様々な内容で表示が可能です。</p>
                        <p><a href="#" class="btn btn-primary">リンク</a></p>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                      <img src="256x256.png" alt="">
                      <div class="caption">
                        <h3>画像サムネイル</h3>
                        <p>画像の説明です。ここに説明文を入れると様々な内容で表示が可能です。</p>
                        <p><a href="#" class="btn btn-primary">リンク</a></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xs-2">
                <div class="panel panel-primary">
                  <div class="panel-heading">
                    <h3 class="panel-title">カテゴリ</h3>
                  </div>
                  <ul class="list-group">
                    <li class="list-group-item"><a href="#">雑記 <span class="badge">1</span></a></li>
                    <li class="list-group-item"><a href="#">テンプレート集 <span class="badge">8</span></a></li>
                    <li class="list-group-item"><a href="#">デザイン <span class="badge">5</span></a></li>
                    <li class="list-group-item"><a href="#">bootstrap <span class="badge">3</span></a></li>
                  </ul>
                </div>
                <div class="panel panel-primary">
                  <div class="panel-heading">
                    <h3 class="panel-title">リンク</h3>
                  </div>
                  <div class="panel-body"><a href="http://joke-tech.blogspot.com/">戯言と技術</a></div>
                </div>
              </div>
            </div>
        </div>
        <div id="pager" class="container" >
            <div class="row">
                <div class="col-xs-12">
                    <ul class="pagination">
                      <li><a href="#">&laquo;</a></li>
                      <li><a href="#">1</a></li>
                      <li><a href="#">2</a></li>
                      <li><a href="#">3</a></li>
                      <li><a href="#">4</a></li>
                      <li><a href="#">5</a></li>
                      <li><a href="#">&raquo;</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="footer">
            <div class="container">
                <p class="muted credit">boostrapテンプレート 3カラム構成</p>
            </div>
        </div>
        </body>
</html>

2014年2月20日木曜日

postgres template1削除方法

今後のメモです。

postgresを利用する際に初期にtemplateを指定できます
こちらがtemplate1と呼ばれるDBが標準で適用されるのですがこちら通常の
フローではdropdb(DROP DATABASE template1)が利用できません
こちらを初期化し再構築する手順をまとめます。

$ psql -U postgres
postgres=# SELECT * FROM pg_database where datname = 'template1';
postgres=# UPDATE pg_database SET datistemplate = 'f' where datname = 'template1';
postgres=# SELECT * FROM pg_database where datname = 'template1';
postgres=# \q
$ dropdb template1
$ createdb -T template0 template1
$ psql -U postgres
postgres=# SELECT * FROM pg_database where datname = 'template1';
postgres=# UPDATE pg_database SET datistemplate = 't' where datname = 'template1';
postgres=# SELECT * FROM pg_database where datname = 'template1';

pg_databaseの中身を書き換えることで実現しています。
この方法が一番らくだと思いますのでメモです。

2014年2月16日日曜日

bootstrap3テンプレート/3カラム構成

bootstrapのテンプレート
3カラム構成バージョンになります。
左にナビゲーション、中央にコンテンツ、右にナビゲーションがあるイメージです。

簡単な３カラム構成です。他様々なテンプレートが公開されています。
これは非常にシンプルなバージョンです。
次回もう少し良さげなものをあげています。

以下ソースです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>bootstrap3ノ進め方</title>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>   
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <style type="text/css">
        <!--
        #header {
            height: 50px;
            background-color: #EEE;
            width: 100%;
            text-align: center;
        }
        #footer {
            height: 30px;
            background-color: #AAA;
            text-align: center;
        }
        -->
        </style>
    </head>
    <body>
        <div id="header">3カラム</div>
        <div id="contents" class="container">
            <div class="row">
              <div class="col-xs-3" style="background-color: #CCC;">
                ナビゲーション1<br />
                ナビゲーション2<br />
                ナビゲーション3<br />
                ナビゲーション4<br />
              </div>
              <div class="col-xs-6">
                テキスト１<br />
                テキスト２<br />
                テキスト３<br />
                テキスト４<br />
                テキスト５<br />
                テキスト６<br />
                テキスト７<br />
                テキスト８<br />
                テキスト９<br />
              </div>
              <div class="col-xs-3" style="background-color: #CCC;">
                右ナビゲーション1<br />
                右ナビゲーション2<br />
                右ナビゲーション3<br />
                右ナビゲーション4<br />
              </div>
            </div>
        </div>
        <div id="footer">フッター</div>
        </body>
</html>

bootstrap3テンプレート/2カラム構成

bootstrapのテンプレート
2カラム構成バージョンになります。
左にナビゲーション、右にコンテンツがあるイメージです。

簡単な2カラム構成です。他様々なテンプレートが公開されています。
これは非常にシンプルなバージョンです。

以下ソースです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>bootstrap3ノ進め方</title>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>   
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <style type="text/css">
        <!--
        #header {
            height: 50px;
            background-color: #EEE;
            width: 100%;
            text-align: center;
        }
        #footer {
            height: 30px;
            background-color: #AAA;
            text-align: center;
        }
        -->
        </style>
    </head>
    <body>
        <div id="header">2カラム</div>
        <div id="contents" class="container">
            <div class="row">
              <div class="col-xs-4" style="background-color: #CCC;">
                ナビゲーション1<br />
                ナビゲーション2<br />
                ナビゲーション3<br />
                ナビゲーション4<br />
              </div>
              <div class="col-xs-8">
                テキスト１<br />
                テキスト２<br />
                テキスト３<br />
                テキスト４<br />
                テキスト５<br />
                テキスト６<br />
                テキスト７<br />
                テキスト８<br />
                テキスト９<br />
              </div>
            </div>
        </div>
        <div id="footer">フッター</div>
        </body>
</html>

bootstrap3テンプレート/１カラム構成

bootstrapのテンプレート
１カラム構成バージョンになります。
左右は縦棒、真ん中にコンテンツがあるイメージです。

３カラム構成として利用することも可能ですが、両端が自動で色がfillrectangeしてくれる
用にしています。
その点が1カラム用のデザインレイアウトになります。

以下ソースです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>bootstrap3ノ進め方</title>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>   
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <style type="text/css">
        <!--
        #header {
            height: 50px;
            background-color: #EEE;
            width: 100%;
            text-align: center;
        }
        #footer {
            height: 30px;
            background-color: #AAA;
            text-align: center;
        }
        .container {
            display:table;
            width: 100%;
            margin-top: -50px;
            padding: 50px 0 0 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
         }
        .row {
            height: 100%;
            display: table-row;
        }
        #contents > .row > .col-xs-2, #contents > .row > .col-xs-8 {
            display: table-cell;
            float: none;
        }
        -->
        </style>
    </head>
    <body>
        <div id="header">1カラム中央構え</div>
        <div id="contents" class="container">
            <div class="row">
              <div class="col-xs-2" style="background-color: #CCC;"></div>
              <div class="col-xs-8">
                テキスト１<br />
                テキスト２<br />
                テキスト３<br />
                テキスト４<br />
                テキスト５<br />
                テキスト６<br />
                テキスト７<br />
                テキスト８<br />
                テキスト９<br />
              </div>
              <div class="col-xs-2" style="background-color: #CCC;"></div>
            </div>
        </div>
        <div id="footer">フッター</div>
        </body>
</html>

2014年2月15日土曜日

bootstrap3の使い方

bootstrap3を始める

端的にまとめ

boostrap3はtwitter社が作り出したらオープンソース用のライブラリみたいです。
こちらの使い方を準じ記載

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>bootstrap3ノ進め方</title>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="row">
      <div class="col-md-1">1</div>
      <div class="col-md-1">2</div>
      <div class="col-md-1">3</div>
      <div class="col-md-1">4</div>
      <div class="col-md-1">5</div>
      <div class="col-md-1">6</div>
      <div class="col-md-1">7</div>
      <div class="col-md-1">8</div>
      <div class="col-md-1">9</div>
      <div class="col-md-1">10</div>
      <div class="col-md-1">11</div>
      <div class="col-md-1">12</div>
    </div>
    </body>
</html>

グリッドを提供するためのソースです１行１２列構成となっているみたいです。
レシポンシブデザインが有効で逆に画像を利用する系はwidthとheightの関係があるので
注意をした方が良さそうです。
CDNを利用した方がテンプレート化しやすいのでお勧めです。

とりあえず初回は利用方法まで

登録: 投稿 (Atom)

ページ