「Bootstrap」と一致するもの

Bootstrap 3でのスキップリンク（覚書）

Bootstrap 3 にはスキップリンク設定ができるような.sr-onlyというクラスが設けられている

Accessibility Getting started · Bootstrap

<body>
  <a href="#content" class="sr-only">Skip to content</a>
  <div class="container" id="content">
    The main page content.
  </div>
</body>

Bootstrap・MTOSで構築したGENE BERG JAPANを公開いたしました

予てからリニューアル作業を行っておりましたGENE BERG JAPANを本日公開いたしました

Bootstrap + FontAwesome + Movable Type Open Source を利用して短期間で制作いたしました。

VW乗りの間では知らない人はいないアメリカ・カリフォルニア州のオレンジカウンティにあるGENE BERGのパーツや空冷VWを専門に扱うマニアックな自動車専門店です。

Facebookページも公開しておりますので、何卒よろしくお願いします。

Movable Typeのリッチテキストエディタにbootstrap.cssとカスタマイズ用CSSを適用させる

サイトをMTOSで構築することになった。

サイトオーナー自身で更新作業になるため、なるべく簡単に出来るようAnotherCustomFieldsプラグインを使おうかとも思ったけれども、MT標準の「定型文」を使うことにした。

リッチテキストエディタにはオリジナルのスタイルシートを適用できるので、以下のようにリッチテキスト用のrich-text.cssを設定。

読み込ませるスタイルシートは1つしか設定できないので、Bootstrapなどを利用する場合にやりにくい。そこでrich-text.cssに@importでbootstrap.min.cssとカスタマイズ用のcustom.cssの2つを読みこませる。

@import url("<$mt:Link template="bootstrap_min_css"$>");
@import url("<$mt:Link template="custom_css"$>");

スタイルを変えたい場合には、カスタマイズ用のスタイルシート本体だけを弄ればOK！

Google マップ・YouTubeなどの埋め込みをレスポンシブにするEmbed Responsively

BootstrapなどレスポンシブWebデザインのサイト構築の際に、Google マップを埋め込んでみたら小さい画面ではみ出してしまいます。（Googleさん、Yahoo!さん、お願いしますよ...）

埋め込みコードをレスポンシブWebデザインでも利用できるように変換してくれるサービス「Embed Responsively」

予めGoogle マップなどで取得したコードをペースト、ボタンを押すだけでコードを書きだしてくれますので簡単！

書き出されるコードはスタイルシートも一緒になっていますのでご注意を...

Movable Type 5（MTOS 5）テーマ（テンプレート） Bootstrap 109

大画面では2カラム（右サイドバー）スマートフォンなどの小さい画面では1カラムで表示出来るレスポンシブWebデザインの Movable Type 5（MTOS 5）テーマ（テンプレート）です。

ウェブサイト名をナビゲーションバー上部に移動、長いウェブサイト名も表示可能になりました。
Bootstrapのスタイルを変更できるBootswatchのCosmoをベースにカスタマイズ。Bootstrap標準のカルーセル（画像スライド）を実装しました。

販売は終了いたしました。

Movable Type 5（MTOS 5）テーマ（テンプレート） Bootstrap 09

ウェブサイト名をナビゲーションバー上部に移動、長いウェブサイト名も表示可能になりました。
Bootstrap標準のカルーセル（画像スライド）を実装しました。

販売は終了いたしました。

BootstrapでのMovable Typeのコメントキャプチャを行儀よく

通常、会社案内や企業サイトの構築の際には装備することはあまりありませんが、テーマとしてリリースする場合にはコメントやトラックバックは必須です。

ところが、Bootstrapで作ったコメントフォームにMovable Typeのコメントキャプチャをそのまま入れてしまうとレイアウトがおかしくなってしまいます。

覚書（Code@Style）に掲載していますが、こちらでも紹介します

以下、Bootstrap 2.3での解説です。Bootstrap 3.0.0では利用できません。「Bootstrap 3.0でのMovable Typeのコメントキャプチャ」にて別途解説しています。

一般的にブログでは横並びのフォームを利用しますのでBootstrapコンポーネントを使用した場合はform-horizontalを用い、以下の様なマークアップになります。

<form class="form-horizontal">
<div class="control-group">
<label class="control-label">ラベル</label>
<div class="controls">
<input type="text" class="span3" placeholder="入力欄">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox">チェックボックス
</label>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn">Submit</button>
</div>
</form>

フォーム内に

<div id="comments-open-captcha"></div>

と記述するとキャプチャが表示されますが、このままじゃスタイルをあてにくいので、<div class="captcha"></div>で囲います。

<div class="captcha">
<div id="comments-open-captcha"></div>
</div>

コメントフォーム全体のコードは以下の通りです。

<form class="well form-horizontal" method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">
<input type="hidden" name="static" value="1">
<input type="hidden" name="entry_id" value="<$mt:EntryID$>">
<input type="hidden" name="__lang" value="<$mt:BlogLanguage$>">
<input type="hidden" name="parent_id" value="<$mt:CommentParentID$>" id="comment-parent-id">
<input type="hidden" name="armor" value="1">
<input type="hidden" name="preview" value="">
<input type="hidden" name="sid" value="">
<div id="comments-open-data">
<div id="comment-form-name" class="control-group">
<label for="comment-author" class="control-label">名前</label>
<div class="controls">
<input type="text" class="span3" id="comment-author" name="author" size="30" tabindex="1" accesskey="n" value="" onfocus="mtCommentFormOnFocus()" placeholder="お名前">
</div>
</div>
<div id="comment-form-email" class="control-group">
<label for="comment-email" class="control-label">電子メール</label>
<div class="controls">
<input type="email" class="span4" id="comment-email" name="email" size="30" tabindex="2" accesskey="m" value="" onfocus="mtCommentFormOnFocus()" placeholder="電子メールアドレス">
</div>
</div>
<div id="comment-form-url" class="control-group">
<label for="comment-url" class="control-label">URL</label>
<div class="controls">
<input type="url" class="span4" id="comment-url" name="url" size="30" tabindex="3" accesskey="u" value="" onfocus="mtCommentFormOnFocus()" placeholder="ウェブサイトのURL">
</div>
</div>
<div id="comment-form-remember-me" class="control-group">
<label for="comment-bake-cookie" class="control-label">ログイン情報を記憶</label>
<div class="controls">
<input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="mtRememberMeOnClick(this)" onkeypress="mtRememberMeOnClick(this)" value="1" tabindex="4" accesskey="r">
</div>
</div>
</div>
<div id="comment-form-reply" style="display:none" class="control-group">
<label for="comment-reply" id="comment-reply-label" class="control-label"></label>
<div class="controls">
<input type="checkbox" id="comment-reply" name="comment_reply" value="" onclick="mtSetCommentParentID()" onkeypress="mtSetCommentParentID()" tabindex="5" accesskey="c">
</div>
</div>
<div id="comments-open-text" class="control-group">
<label for="comment-text" class="control-label">コメント
<mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
<div class="controls">
<textarea id="comment-text" class="span4" name="text" rows="8" cols="50" onfocus="mtCommentFormOnFocus()" tabindex="6" accesskey="t" placeholder="コメントをどうぞ！"></textarea>
</div>
</div>
<div class="captcha">
<div id="comments-open-captcha"></div>
</div>
<div id="comments-open-footer" class="form-actions">
<input type="submit" class="btn" name="preview_button" id="comment-preview" value="確認" onclick="this.form.preview.value='1';" onkeypress="this.form.preview.value='1';" tabindex="7" accesskey="v">
<input type="submit" class="btn" name="post" id="comment-submit" value="投稿" tabindex="8" accesskey="s">
</div>
</form>

あとはCSSで調整。（これが非常に難しかった...）

.captcha .label {
    min-height: 1.2em;
    width: 160px;
    background-color: transparent;
    color: #333333;
    text-align: right;
    text-shadow: none;
}
.captcha .label , .captcha img {
    display: block;
    float:left;
    margin-right: 10px;
}
.field {
    float:left;
}
#captcha_code {
    clear: both;
    margin-top: 10px;
    margin-bottom: 10px;
}
.captcha p {
    clear: both;
}

図のようにコメントキャプチャも行儀よく横並びに表示が可能です。

ブログの再構築時間が最速で38秒になった

デザインをリニューアル後、ブログ記事570件程度で再構築時間1分をきることができなかったので、環境変数EntriesPerRebuildの値を大きくしてみた。

以下のように、再構築時間が59秒になった。

Bootstrapを採用したために、htmlのdivが複雑になっているので致し方ないのだが、どうしてもリニューアル前よりも短時間で再構築したい。

思い立ってシステムテンプレート以外の「PHPのインクルードとして処理する」としていたウェブサイトのモジュールを全てウェブサイトのインデックステンプレートに各々作り替え、mt:Include部分全てを<?php include ~ に変更してみた。

もちろん、システムテンプレートはモジュールを読み込ませず、モジュール部分は追加しました。

変更したのは以下の部分

HTMLヘッダーの一部
バナーヘッダー
フッターのリンク
バナーフッター
アクセス解析

例えばこんな感じ

<mt:BlogParentWebsite>
<$mt:include module="バナーヘッダー" blog_id="$website_id"$>
</mt:BlogParentWebsite>

を

<?php include($_SERVER['DOCUMENT_ROOT']."/include/banner_header.php");?>

すると再構築時間が38秒になった！

今日もう一度やってみた。

かなり楽になりました！

Bootstrapでツールチップを表示させる（覚書）

Javascript · Bootstrap Tooltips 2.3・3.0を参照。例としてリンクの下にツールチップを配置する（placementにbottomを指定）

JavaScript

<script>
jQuery(function($){
 $('a[rel=tooltip]').tooltip();
});
</script>

マークアップ

2.3の場合

<a href="#" rel="tooltip" data-placement="bottom" data-original-title="this is tooltip">tooltip</a>

3.0の場合

<a href="#" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title="this is tooltip">tooltip</a>

Bootstrap

Movable Type 5（MTOS 5）テーマ（テンプレート） Bootstrap 08

ウェブサイト名をナビゲーションバー上部に移動、長いウェブサイト名も表示可能になりました。
Bootstrapのスタイルを変更できるBootswatchのCosmoをベースにカスタマイズしました

販売は終了いたしました。