Info kplace.plala.jpから移設しました

■目的
 過去ページをResponsive対応にします。
 使うのはBootstrapフレームワークです。

■ヘッダー
 ヘッダー部はBootstrapのNavbarのコードを利用し、MovableTypeで自動展開します。
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed"
              data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
              aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span> <span class="icon-bar"></span> <span
                class="icon-bar"></span> </button> <a class="navbar-brand" href="/">
          <img class="img-responsive" alt="cBreeze" src="../image2/cbreeze030_1.png"></a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="/pc1/index.html">PC</a></li>
              <li><a href="/ski1/index.html">SKI</a></li>
              <li><a href="/profile.htm">Profile</a></li>
              <li><a href="/sur_blog/index.html" target="_blank">Blog</a></li>
              <li><a href="https://www.facebook.com/kuri70/" target="_blank">
              <img class="img-responsive" src="../image2/FB-f-Logo__white_20.png" alt="facebook"></a></li>
            </ul>
            <form class="navbar-form navbar-right" role="search" action="https://www.google.com/cse"
              id="cse-search-box">
              <div class="input-group"> <input name="q" class="form-control" placeholder="サイト内検索/Google"
                  type="text"> <input name="cx" value="017464931460357357541:0coahs0nnfo"
                  type="hidden"> <span class="input-group-btn"> <button type="submit"
                    class="btn btn-default"> <span class="glyphicon glyphicon-search"></span>
                  </button> </span> </div>
            </form>
          </div>
          <!-- /.navbar-collapse --> </div>
        <!-- /.container-fluid -->
      </nav>

■タイトル
 タイトル部分はBootstrapのパネル/cssに置換えます。
<div class="panel panel-default">
   <div class="panel-heading">
     <h3 class="panel-title"><img alt="bootstrap" src="../images/bstrap001.png">Responsive変換</h3>
    </div>
  </div>
■本文
 テーブル/イメージ/ビデオ/網掛けをbootstrapのcssに置換えます。
項目
コード
テーブル <table class="table table-striped table-bordered table-hover">
イメージ <img  class="img-responsive" src="../images/xxxx">
網掛け <div class="well">
 .....
</div>
ビデオ
(Youtube)
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
■フッター
 フッター部はMovableTypeで自動展開します。
     <hr>
  <!-- Blog -->
            <a target="_blank" href="/sur_blog/index.html"> 
            <img src="/image2/blog2007.gif" alt="blog"></a>
<!-- Facebook Badge START -->
            <a target="_blank" href="https://www.facebook.com/kuri70" title="Kiyomichi Kurino" target="_top">
             <img class="img" src="../images/FB-f-Logo__blue_50.png" style="border: 0px;" alt="" /></a>
<!-- amazon -->
            <a target="_blank" href="https://www.amazon.co.jp/?_encoding=UTF8&amp;camp=247&amp;creative=1211&amp;linkCode=ur2&amp;tag=kuri70-22">
            <img alt="amazon" src="../image2/amazon001.png"></a>
            <img src="http://www.assoc-amazon.jp/e/ir?t=kuri70-22&amp;l=ur2&amp;o=9"
                alt="" style="border:none !important; margin:0px !important;" height="1" border="0" width="1">
<!-- MovableType -->
        <A href="https://www.sixapart.jp/movabletype/" target="_blank">
          <IMG src="../image2/blog25.gif" alt="MovableType"></A><br>
<br>
<!-- footer -->
      <footer class="footer">
      <div class="well">© 2000 cBreeze</div>
      </footer>
■結果
 過去ページをBootstrapを使用してResponsive対応に変換中です。
 ヘッダー/フッター部分はMovableTypeで自動展開します。
 タイトルと本文は手動変換とし、時間は約10分/ページ程度です。
 *2017/06/04 変換対象約1200ページを3.5か月程で完了。

  blog    MovableType