ブログのデザインをリニューアルしました

少し記事を書くのが遅くなりましたが、ブログのデザインをリニューアルしました。mersy からこのブログについて「スマホで読みにくいの、3日間でなんとかならない?」的な指摘を受けたので(笑

前回のリニューアルの記事(ブログのデザインをリニューアルしました)の日付が2011年11月12日だったので、約3年8ヶ月ぶりのリニューアルとなります。

レスポンシブデザイン

これまでは、当時の PowerCMS のデフォルトテンプレートをベースに DynamicMTML を使ってユーザーエージェントごとに振り分けていましたが、今回は、デザインは前回のものを踏襲しつつ、Bootstrap をベースにしてレスポンシブデザインにしました。

テンプレートの構造

テンプレートの構造としては、最近の僕の中の流行りというかベストプラクティスというか、設定用の変数をまとめた config モジュールを使ったり、モジュールをまとめたフレームワーク的なモジュールを使ったり、といった構造になっています。

例えば、ブログ記事のテンプレートはこんな感じです。

<mt:Unless name="compress" compress="1">
<mt:Ignore>==================================================
Template Name : entry_archive
Template Type : entry_archive / blog
Current  Site : Web屋かたつむりくん > かたつむりくんのWWW
Required Vars : 
Template Note : 
==================================================</mt:Ignore>
<mt:SetVarTemplate name="blog_main">
<mt:Include module="mdl-blog_post" post_title_level="h1" show_breadcrumb="1" show_tags="1" google_adsense="1">
<mt:Ignore>==================================================
            SimilarEntries [start]
=================================================</mt:Ignore>
<div id="similar-entries" class="blog-post"></div>
<mt:SetVarBlock name="first"><h2 class="contents_title">関連記事<span> - <a href="https://github.com/bit-part/mt-plugin-SimilarEntries">SimilarEntries プラグイン</a>で表示</span></h2><ul></mt:SetVarBlock>
<mt:SetVarBlock name="last"></ul></mt:SetVarBlock>
<mt:SetVarBlock name="each_function">
function(i, text, odd, even){
    return '<li><a href="' + text + '</a></li>';
}
</mt:SetVarBlock>
<mt:SimilarEntriesShow
    fields="tags,keywords,category"
    priority="tags:2,keywords:1,category:1"
    script_url="/blog/SimilarEntries/SimilarEntries.js"
    relation_url="/blog/SimilarEntries/relation.json"
    template_url="/blog/SimilarEntries/template.json"
    target_selector="#similar-entries"
    limit="5"
    first="$first"
    last="$last"
    each_function="$each_function">
<mt:Ignore> SimilarEntries [ end ] </mt:Ignore>
<mt:Ignore>==================================================
            ZenBack [start]
=================================================</mt:Ignore>
<div class="blog-post">
<!-- X:S ZenBackWidget -->(略)<!-- X:E ZenBackWidget -->
</div>
<mt:Ignore> ZenBack [ end ] </mt:Ignore>
</mt:SetVarTemplate>
<mt:Include module="fw-default">
</mt:Unless>

この中の最後でインクルードしている fw-default モジュールは下記のような感じ。

<mt:Ignore>==================================================
Template Name : fw-default
Template Type : module / blog
Current  Site : Web屋かたつむりくん > かたつむりくんのWWW
Required Vars : blog_main
Template Note : 構造は index.html と同じ。このテンプレートの構造を変更
                した場合は「index.html」の構造も合わせて変更すること。
==================================================</mt:Ignore>
<mt:Include module="mdl-config">
<mt:Include module="mdl-html_header">
<mt:Include module="mdl-header">
<div id="content" class="container">
    <div class="row">
        <div id="blog-main" class="col-sm-8">
            <mt:Var name="blog_main">
        </div><!-- /#blog-main -->
        <mt:Include module="mdl-sidebar">
    </div><!-- /.row -->
</div><!-- /.container -->
<mt:Include module="mdl-footer">
<mt:Include module="mdl-html_footer">

使い回す変数は JSON で管理

ちょっと実験的な試みではありますが、使い回す情報をまとめた config モジュールには、JSONを書いて、それをデコードして使ったりしています。

<mt:Ignore>==================================================
Template Name : mdl-config
Template Type : module / blog
Current  Site : Web屋かたつむりくん > かたつむりくんのWWW
Required Vars :
Template Note :
==================================================</mt:Ignore>
<mt:Ignore>==================================================
            Default Settings [start]
=================================================</mt:Ignore>
<mt:Ignore><!-- ブログ説明 [start] --></mt:Ignore>
<mt:BlogInformation convert_breaks="0" json_decode="1" setvar="json">
<mt:Var name="json" key="items" setvar="items">
<mt:Var name="items" index="0" setvar="blog_info">
<mt:Ignore><!-- ブログ説明 [ end ] --></mt:Ignore>
<mt:SetVarBlock name="config_settings">{
    "meta_title": "<mt:BlogName>",
    "meta": {
        "keywords": "<mt:Var name="blog_info" key="keywords" escape="html">",
        "description": "<mt:Var name="blog_info" key="description" escape="html">",
        "viewport": "width=device-width, initial-scale=1.0"
    },
    "meta_og": {
        "title": "<mt:BlogName>",
        "url": "<mt:BlogURL>",
        "description": "<mt:Var name="blog_info" key="description">",
        "image": "<mt:BlogURL>assets/img/profile/w3w_og.png",
        "type": "blog"
    },
    "meta_fb": {
        "app_id": "",
        "admins": ""
    },
    "meta_twitter": {
        "card": "summary",
        "site": "@tinybeans",
        "creator": "@tinybeans"
    },
    "body_class": "blog",
    "css": {
        "0100": "<mt:Var name="blog_info" key="root_path">assets/fancybox/jquery.fancybox.css?v=2.1.5",
        "0200": "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css",
        <mt:Ignore>
        "0*00": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css",
        "0*00": "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/simplex/bootstrap.min.css",
        </mt:Ignore>
        "0300": "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/yeti/bootstrap.min.css",
        "0400": "<mt:Var name="blog_info" key="root_path">assets/css/main.css?v=<mt:Var name="blog_info" key="theme_version">"
    },
    "js_header": {},
    "js_footer": {
        "0100": "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js",
        "0200": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js",
        "0300": "<mt:Var name="blog_info" key="root_path">assets/fancybox/jquery.fancybox.pack.js?v=2.1.5",
        "0400": "<mt:Var name="blog_info" key="root_path">assets/js/main.js?v=<mt:Var name="blog_info" key="theme_version">",
        "0500": "https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sunburst"
    }
}</mt:SetVarBlock>
<mt:Var name="config_settings" compress="3" json_decode="1" setvar="config">
<mt:Var name="config" key="meta" setvar="meta">
<mt:Var name="config" key="meta_og" setvar="meta_og">
<mt:Var name="config" key="meta_fb" setvar="meta_fb">
<mt:Var name="config" key="meta_twitter" setvar="meta_twitter">
<mt:Var name="config" key="css" setvar="css">
<mt:Var name="config" key="js_header" setvar="js_header">
<mt:Var name="config" key="js_footer" setvar="js_footer">
<mt:Ignore> Default Settings [ end ] </mt:Ignore>

MTSetVar でハッシュや配列にすればいい話ですが、なんとなくこの方が見やすいかな、と思いました。

この段階では JSON を一旦デコードしてハッシュなどにしていますが、このリニューアル後に MTGetJSONValue というタグで、

<mt:GetJSONValue name="config.meta_og.title">

のようにドットシンタックスで直接 JSON の値をとれるプラグインを作った(MTAppjQuery に入れると思います)ので、その辺を使ってもっとシンプルに書きなおしていこうと思います。

MTAppJSONTable を活用

また、ブログ設定ページに、テキスト(複数行)カスタムフィールドを作り、そこに MTAppjQuery の機能の一つである MTAppJSONTable を使っていくつかの情報を書いたりもしています。ここは必要に応じて増やしていく予定です。

ブログ設定画面のカスタムフィールド

詳細は後ほど

まだテンプレートの完成度は粗い感じなので(検索もないし・・・)、flexibleSearch.js を導入したりして、今後徐々に仕上げていこうと思います・・・

また、ここではざっと説明しただけですが、Movable Type のテンプレートを書く際の参考になるかもしれませんので、後日、もう少し詳しいことを書いていこうかなと思います。

  • このエントリーをはてなブックマークに追加
Just a second...