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&camp=247&creative=1211&linkCode=ur2&tag=kuri70-22">
<img alt="amazon" src="../image2/amazon001.png"></a>
<img
src="http://www.assoc-amazon.jp/e/ir?t=kuri70-22&l=ur2&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か月程で完了。