タグ「StyleCatcher」が付けられているもの

エックスサーバーのMySQL5.5移行ツールでMySQL5からMySQL5.5への移行

2月10日からエックスサーバーで提供されている「MySQL5.5移行ツール」を利用してMySQLのバージョン移行、Movable Typeの設定を行った。

サーバーパネルにログインし、phpmyadminでMySQL5をダウンロードしておく。その後、「MySQL5.5移行ツール」をクリックする。

MySQL5.5移行ツール

MySQL5.5のホスト名(図ではグリーンの部分)が表示されるのでメモなどしておく。

外面下の「MySQL5.5移行ツールの利用を開始する」をクリック

使用中のMySQL5毎に移行を行う。文字コードを選択し「移行(確認)」ボタンをクリック。「MySQL5.5へデータベースの追加(確定)」をクリック。

移行する

mt-config.cgiのデータベース設定部分を編集してアップロードする。

mt-config.cgiの書き換え

正常な動作を確認したらMySQL5.5移行ツールの「バージョンをMySQL5.5に移行する(確認)」をクリックして完了。

Movable Type 6 無料テーマ Bootstrap 01のBootstrapをv3.3.1にアップデートしました

1ヶ月ほど前になりますが、Bootstrap v3.3.1がリリースされています。

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

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

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

よろしくお願いします。

特定のウェブページにstyle要素などを追加する

特定のウェブページのみで利用するCSSなどは、他のページで利用することはない。特定ウェブページにstyle要素で指定すれば他のページに影響することがなく、僅かであるが読み込みも速くなるだろう。

例えば、サイトマップのページが格納されているフォルダ名「サイトマップ」の場合だけに使用する背景画像を、Base64でstyle要素に追加する。

予めsitemap_folderを指定し、mt:FolderLabelの値と比較する。

<mt:SetVar name="sitemap_folder" value="サイトマップ">
<mt:SetVarBlock name="Folder"><$mt:FolderLabel$></mt:SetVarBlock>
<mt:If name="sitemap_folder" like="$Folder">
<style>
.main-unit  ul.tree li {
    background: url(data:image/png;base64,エンコードした文字列);
}
</style>
</mt:If>

この例では、アーカイブパスを%c/%iにしている。(その他の設定の場合は変更が必要。適用できないこともあります。)

MTOSパック販売終了のお知らせ

MTOS(Movable Type Open Source)5のセキュリティフィックス提供終了まで約1年となり、MTOSパックの販売を終了することにいたしました。

今後はMovable Typeライセンス・テーマ・サーバー・ドメインをパックした「Movable Typeお手軽パック」をご利用下さいますようお願いいたします。

また、導入済みMTOSからMovable Type 6へのアップグレードは、お見積りいたしますのでご相談下さい。

ご理解の程、よろしくお願いいたします。

文化人形とテディベアのサイトをMovable Type 6にアップグレードしました

MTOS 5にて運営していた奥さんのサイト「文化人形とテディベア販売 | Machiko」をMovable Type 6にアップグレードしました。

文化人形とテディベア販売 | Machiko
文化人形とテディベア販売 | Machiko

単純にMTOSをMovable Type 6にアップグレードしたのではなく、このアットスタイルで利用しているMovable Type 6上で運営することにしました。

実際に行った手順は以下のとおりです

  1. MTOS 5にてウェブサイト・ブログのテーマと記事をエクスポートする
  2. テーマのAnalyticsコードを<$mt:StatsSnippet$>に変更
  3. OpenGraphTagsプラグインを削除し、HTMLヘッダーにOGP用のコードを追加
  4. Movable Type 6のthemesディレクトリにアップロード
  5. ウェブサイトとブログを作成
  6. ウェブページを作成
  7. 記事をインポート
  8. 記事とアイテムの関連付けが必要だったので画像を再アップロード

普通のアップグレードと違い、多少手がかかりました。

Movable Type 6.0.4へのバージョンアップ時の不具合(YAMLの構文エラー)について

アットスタイルのテーマ・テンプレートをインストールしたMovable Typeで6.0.4へのバージョンアップを行う際にYAMLの構文エラーが発生します。これは構文チェックの厳しいバージョンへYAML::Tinyが変更されたことによるもので、アットスタイルで販売・配布している全てのテーマ・テンプレートで発生します。

丸2日掛けて、以下の全ての(500ファイルほど)のYAMLを修正し、正常にMovable Type 6.0.4へのアップデートが可能なことを確認いたしました。

テーマをご利用の方は、Movable Type 6.0.4へのアップデートの前にアットスタイルまでお知らせ下さい。theme.yaml又はconfig.yamlをお送りいたしますので、差し替えた後にアップデート作業を行って下さい。

お手数ではございますが、よろしくお願いします。

ソーシャルボタンとLivefyreコメントを削除しました

本日、ブログ記事とテンプレートの記事ページのソーシャルボタン及びLivefyreコメントを削除しました。

どちらもあまり使用されず、記事ページをシンプルにしたかったので削除させていただきました。ソーシャルメディアでのシェアなどは直接URLを指定して行なっていただけますようお願いいたします。

ただし、これによって記事ページも高速に表示出来るようになったようで、YSlowもGrade Aになりました。また、再構築も3秒ほど短縮できたようです。

YSlowでGrade A

お手数をお掛け致しますが、よろしくお願いします。

Movable Type 5でMovable Type 6のテーマを利用する

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>

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

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

「【MT東京-04】MovableTypeテーマをつくる」が開催されます

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

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

気になる内容は

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

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

Movable Typeのmt.cgiの名前を変更して管理画面にBASIC認証をかける

色々なところで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に名前を変更して下さい。

Movable Type 6 ビジネス向けベーステーマ Bootstrap HTML5のメールフォームをアップデートしました

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

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

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

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

Movable Type 6 無料テーマ Bootstrap 01にBootswatchのCSSを適用する

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を適用したブログ

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

Movable Type 6 無料テーマ Bootstrap 01にZenbackを設定する

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

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

「Zenback」モジュール

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

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

記事下のZenback

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

Movable Type 6 無料テーマ Bootstrap 01の記事にキーワードを出力する

昨日、「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は適宜変更してください。

Movable Type 無料テーマ(テンプレート)のダウンロードをGitHubに移動しました。

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

GitHub

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