Bootstrap v3.3.0がリリースされています。

これに伴い、「Movable Type 6 無料テーマ Bootstrap 01」のBootstrapをv3.2.0からv3.3.0にアップデートしました。

Movable Type 6 無料テーマ Bootstrap 01
Movable Type 6 無料テーマ Bootstrap 01

有料テーマのアップデートは完成次第、ご案内します。

よろしくお願いします。

Posted

先日の「Movable Type 6 無料テーマ」のアップデートに続き、「スマートフォン・タブレット端末対応 ビジネス向けMovable Type 6 ベーステーマ(テンプレート) Bootstrap HTML5」のBootstrapをv3.1.1からv3.2.0へ、FontAwesomeを4.03から4.1.0にアップデートしました。

スマートフォン・タブレット端末対応 ビジネス向けMovable Type 6 テーマ(テンプレート) Bootstrap HTML5

よろしくお願いします。

Posted

Bootstrap v3.2.0がリリースされています。

これに伴い、「Movable Type 6 無料テーマ Bootstrap 01」のBootstrapをv3.1.1からv3.2.0にアップデートしました。

Movable Type 6 無料テーマ Bootstrap 01
Movable Type 6 無料テーマ Bootstrap 01

有料テーマのアップデートは完成次第、ご案内します。

よろしくお願いします。

Posted

Movable Type 5の製品ライフサイクル終了日は、2016年1月15日となっており、継続使用される所も多いようです。

アットスタイルで販売中の「Movable Type 6 テーマ(テンプレート) Bootstrap HTML5」をMovable Type 5で利用する方法をご紹介します。

なお「Movable Type 6 ビジネス向けベーステーマ(テンプレート) Bootstrap HTML5」でも同様の編集でご利用いただけます。

ウェブサイト

バナーフッターの<$mt:StatsSnippet$>を削除又はアクセス解析のコードに変更します。

ブログ

以下のテンプレートを編集します。

  • メインページ
  • ウェブページ
  • カテゴリ別ブログ記事リスト
  • 記事
  • コメントプレビュー
  • コメント完了
  • 検索結果

編集箇所は7つのテンプレートで共通です。

タイトル要素の

<$mt:WebsiteName encode_html="1"$>

<mt:BlogParentWebsite><$mt:WebsiteName encode_html="1"$></mt:BlogParentWebsite>

パンくずリスト内の

<li><a href="<$mt:WebsiteURL$>">Home</a></li>

<li><a href="<mt:BlogParentWebsite><$mt:WebsiteURL$></mt:BlogParentWebsite>">Home</a></li>

ブログのメインページでの編集箇所

変更後、再構築して完了です。

Posted

第1回から第3回まではケーススタディーとして開催されましたが、今回は実践的なMovableTypeテーマについてのイベントになったようです。

【MT東京-04】MovableTypeテーマをつくる
【MT東京-04】MovableTypeテーマをつくる

気になる内容は

  1. テーマの導入によるウェブサイト制作の高効率化
    テーマ導入の事例
    テーマ導入によるワークフロー改善
  2. MTのインストール、セッティング
    テーマ導入までのMTの設定を解説
  3. テーマ制作

参加したいのですが...

Posted

色々なところでMovable Typeの利用に関する注意喚起が行われています。

Movable Type を安全に利用するためにできること

mt.cgiの名前を変更して管理画面にBASIC認証をかける手順を紹介します。

mt.cgiの名前を変更

mt.cgiの名前を変更後にmt-config.cgiへ追加記述します。例えばhoge.cgiとする場合は以下のように記述します。

AdminScript hoge.cgi

管理画面にBASIC認証をかける

.htaccessに以下の内容を追加します。パスは適宜編集して下さい。

<Files hoge.cgi>
AuthUserFile アプリケーション ディレクトリへのパス/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user
order deny,allow
</Files>

「ベーシック認証 作成」で検索するとたくさんのツールがありますので、これらを使ってパスワードを暗号化しておきます。

以下の様な.htpasswdファイルを作成します。

ID名:暗号化されたパスワード

.htaccessと.htpasswdをアプリケーションディレクトリにアップロードします。

.から始まるファイルが見えない場合は.txtなどで保存しアップロード後に.htaccessと.htpasswdに名前を変更して下さい。

Posted

8年ほど前に「テンプレートに同梱させてください」とお願いし快諾いただいたSYNCK GRAPHICAさんの【メールフォームCGI Jcode版】が、5月2日にアップデートされています。

SYNCK GRAPHICAさんのメールフォームCGI Jcode版
メールフォームCGI Jcode版

これに伴い、Movable Type 6 ビジネス向けベーステーマ Bootstrap HTML5には最新版を同梱いたします。

よろしくお願い致します。

Posted

Movable Type 6 無料テーマ Bootstrap 01にフラットでシンプルなデザインが美しいBootswatchのスタイルシートを適用する方法をご紹介します。

Bootswatch

Bootswatchのスタイルシートを利用するには、予めナビゲーションバーをFixed navbarなどに変更します。

Fixed navbar

ダッシュボードを開き、Bootswatchよりダウンロードしたbootstrap.min.cssをbootstrap_min_css(bootstrap_min_css.mtml)にペーストします。ファイルサイズが大きいために上手くペースト出来ない事があります。その場合はテーマのbootstrap_min_css.mtmlに上書きアップロードし、bootstrap_min_cssを初期化して下さい。

Cosmoを適用したブログ

テーマによってはページャーなどがうまく表示されないものもあるようです。多少カスタマイズの必要な場合があります。

Posted

Movable Type 6 無料テーマ Bootstrap 01」にはZenbackの設定をスムーズに行えるように「Zenback」モジュールを作成しています。このモジュールにコードを記述するだけでZenbackを実装することが出来ます。

「Zenback」モジュール(zenback.mtml)を開きます。上下の<!--と-->を削除し、「ここに Zenback の Script コードを貼り付けてください。」部分にZenbackから提供されたコードを記述します。

「Zenback」モジュール

コードを追加した「Zenback」モジュール

「記事アーカイブ」を再構築します。

記事下のZenback

設定直後は上手く表示できませんが、少し時間が経過すると正しく表示されます。

Posted

昨日、「Movable Type 6 無料テーマ Bootstrap 01」のユーザー様よりmeta name="keywords"の出力についてご質問をいただきましたので、ブログでも紹介いたします。

  • 記事のキーワードフィールドの内容をmeta name="keywords"として出力
  • meta name="description"の直後に出力する

「HTMLヘッダー」モジュール(html_head.mtml)を開いてdescription部分に

<meta name="keywords" content="<$mt:EntryKeywords$>">

を追加します。

「HTMLヘッダー」モジュール

entry_templateで分岐しているその範囲内に追加します。

<mt:Ignore>================ description ================</mt:Ignore>
<mt:If name="entry_template">
<meta name="description" content="<$mt:EntryExcerpt remove_html="1"$>">
<meta name="keywords" content="<$mt:EntryKeywords$>">
<mt:ElseIf name="category_archive">
<meta name="description" content="<$mt:ArchiveTitle$> <$mt:CategoryDescription$>">
<mt:ElseIf name="page_template">
<meta name="description" content="<$mt:PageTitle$> <$mt:PageExcerpt remove_html="1"$>">
<mt:ElseIf name="main_index"><mt:If tag="BlogDescription">
<meta name="description" content="<$mt:BlogDescription$>">
</mt:If><mt:Else>
<meta name="description" content="<$mt:var name="page_title"$>">
</mt:If>
<mt:Ignore>================ /description ================</mt:Ignore>

記事以外でキーワードの追加を行うとしたら、以下のようになります。

<mt:Ignore>================ description ================</mt:Ignore>
<mt:If name="entry_template">
<meta name="description" content="<$mt:EntryExcerpt remove_html="1"$>">
<meta name="keywords" content="<$mt:EntryKeywords$>">
<mt:ElseIf name="category_archive">
<meta name="description" content="<$mt:ArchiveTitle$> <$mt:CategoryDescription$>">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
<mt:ElseIf name="page_template">
<meta name="description" content="<$mt:PageTitle$> <$mt:PageExcerpt remove_html="1"$>">
<meta name="keywords" content="<$mt:PageKeywords$>">
<mt:ElseIf name="main_index"><mt:If tag="BlogDescription">
<meta name="description" content="<$mt:BlogDescription$>">
<meta name="keywords" content="キーワード4,キーワード5,キーワード6">
</mt:If><mt:Else>
<meta name="description" content="<$mt:var name="page_title"$>">
<meta name="keywords" content="キーワード7,キーワード8,キーワード9">
</mt:If>
<mt:Ignore>================ /description ================</mt:Ignore>

キーワード1~キーワード9は適宜変更してください。

Posted

無料配布中のMovable Type テーマ(テンプレート)をGitHubに移動しました。

GitHub

利用規約も変更し、より気軽にご利用いただけるようになりました。よろしくお願いします。

Posted

Movable Type 6 無料テーマ Bootstrap 01」のナビゲーションバーを、Bootstrapのサンプルにも掲載されているFixed navbarにカスタマイズする方法をご紹介します。

Bootstrap サンプルのFixed navbar

バナーヘッダー(banner_header.mtml)を以下の内容に変更します

<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<header role="banner">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<$mt:Link template="メインページ"$>"><$mt:BlogName$></a>
</div>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href="<$mt:Link template="メインページ"$>">Home</a></li>
<mt:Pages tag="@about">
<li><a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a></li>
</mt:Pages>
<mt:Pages tag="@ADD_TO_SITE_NAV">
<li><a href="<$mt:PagePermalink encode_html="1"$>"><$mt:PageTitle$></a></li>
</mt:Pages>
<li><a href="<$mt:Link template="最新記事のフィード"$>">Feed</a></li>
</ul>
</nav>
</header>
</div>
</div>
<div class="container">
<header class="blog-header" role="banner">
<h1 class="blog-title"><$mt:BlogName encode_html="1"$></h1>
<p class="lead blog-description"><$mt:BlogDescription$></p>
</header>
<div class="row">

custom_for_mt_css(custom_for_mt_css.mtml)に以下を追加します。

body {
    padding-top: 40px;
}

再構築し完成です。

Fixed navbar

Posted

Movable Type 6 無料テーマ Bootstrap 01」は、幾つかのOGPが自動的に出力されますが、テーマインストール時にog:imageの設定を行って下さい。

まずブログ全体のog:imageを設定します。手動でFTPする方法とMovable Typeのアイテムを利用する方法があります。

og:imageをFTPアップロードする方法
  1. 「blogimg」フォルダの中にあるオープングラフ(OGP)用の og_image.png を参考に画像を作成して 上書きします。
  2. 公開するディレクトリへ「blogimg」フォルダごとアップロードします。

オープングラフ(OGP)用の og_image.png

og:imageをMovable Typeのアイテムとしてアップロードする方法
  1. サイドメニューから [アイテム] - [新規] を選択します。
  2. [ファイルを選択] ボタンをクリックして、画像をアップロードします。
  3. アイテム一覧から、アップロードした画像アイテムを選択して、[アクション] - [タグを追加] を行います。
  4. 表示されたポップアップウィンドウに、@SITE_ICON を指定します。

記事アーカイブでは、記事に関連付けされた画像アイテムが、優先的に利用されます。複数の画像アイテムが存在する場合は、最新の画像アイテムが採用されます。

実際にシェアされた記事

Posted

Movable Type 6 無料テーマ Bootstrap 01」はRainierやApexと同様にウェブページをナビゲーションメニューに追加することが出来ます。

今回のカスタマイズは、その方法をご紹介します。

  1. サイドメニューから [ウェブページ] - [新規] を選択します。
  2. 「タイトル」「本文」「続き」に内容を入力し、タグとして @ADD_TO_SITE_NAV を指定し、ウェブページを公開します。
  3. 再構築します。

@ADD_TO_SITE_NAV を指定

ナビゲーションに追加されたウェブページ

ナビゲーションに「タイトル」がそのまま表示されるのでご注意下さい。

Posted

Movable Type 6 無料テーマ Bootstrap 01」はシンプルに使っていただきたかったのでFont Awesomeのアイコンを実装しておりません。簡単に追加することが出来ますのでご紹介します。

Font Awesomeのサイトから一式をダウンロードします。

Font Awesome

ダウンロードしたファイルを解凍し、「fonts」フォルダをMovable Typeで指定した「ブログURL」直下へアップロードします。

「fonts」フォルダ

ダッシュボードから「HTMLヘッダー」(html_head.mtml)を開き、Custom styles for Movable Typeの下辺りに次の様に記述します。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">

テンプレートや記事のお好きな場所に以下の記述を追加して、アイコンを表示できます。

<i class="fa fa-アイコンの名前"></i>

例えば上部ナビゲーションバーにホームアイコンを追加する場合は「バナーヘッダー」モジュール(banner_header.mtml)を開き、5行目の記述

<a href="<$mt:BlogURL$>" class="blog-nav-item">Home</a>

を、以下のように書き換えます。

<a href="<$mt:BlogURL$>" class="blog-nav-item"><i class="fa fa-home"></i> Home</a>
Posted

先日より作成を行っていた「Movable Type 6 無料テーマ Bootstrap 01」をリリースしました。

大画面では2カラム(右サイドバー)スマートフォンなどの小さい画面では1カラムで表示出来るBootstrap謹製のBlog templateをベースに Movable Type 標準のテーマ「Rainier」で実装されたオープングラフ(Open Graph Protocol)や Microdata、構造化データ、ページネーションを加味し、レスポンシブデザインのテーマに仕上げました。

Movable Type 6 無料テーマ Bootstrap 01
Movable Type 6 無料テーマ Bootstrap 01

プレゼンテーションテンプレートと同様にGitHubからのダウンロードをお願いいたします。

ご利用下さい。

Posted

Bootstrapには入門用に幾つかの基本テンプレートが用意されている。

Build on the basic template above with Bootstrap's many components. See also Customizing Bootstrap for tips on maintaining your own Bootstrap variants.

Getting started · Bootstrap

この中にブログ用のテンプレートもある。

The official example template of creating a blog with Bootstrap.

このテンプレートを使ってMovable Type 6用のテーマ作成中。現在のところ、メインページと記事のページは完成。

作成中のテーマ
Bootstrap謹製ブログテンプレートを利用したMovable Type 6用のテーマ

公開には、もう少し時間がかかると思います。

Posted