日記

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

2015-07-24

9分で読了

更新: 2025-12-14

レスポンシブデザイン

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

テンプレートの構造

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

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


==================================================
Template Name : entry_archive
Template Type : entry_archive / blog
Current Site : Web屋かたつむりくん > かたつむりくんのWWW
Required Vars : 
Template Note : 
==================================================





==================================================
 SimilarEntries [start]
=================================================

関連記事 - SimilarEntries プラグインで表示



function(i, text, odd, even){
 return '
 SimilarEntries [ end ] 

==================================================
 ZenBack [start]
=================================================

（略）

 ZenBack [ end ]

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

==================================================
Template Name : fw-default
Template Type : module / blog
Current Site : Web屋かたつむりくん > かたつむりくんのWWW
Required Vars : blog_main
Template Note : 構造は index.html と同じ。このテンプレートの構造を変更
 した場合は「index.html」の構造も合わせて変更すること。
==================================================

使い回す変数は JSON で管理

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

==================================================
Template Name : mdl-config
Template Type : module / blog
Current Site : Web屋かたつむりくん > かたつむりくんのWWW
Required Vars :
Template Note :
==================================================

==================================================
 Default Settings [start]
=================================================







{
 "meta_title": "",
 "meta": {
 "keywords": "",
 "description": "",
 "viewport": "width=device-width, initial-scale=1.0"
 },
 "meta_og": {
 "title": "",
 "url": "",
 "description": "",
 "image": "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": "assets/fancybox/jquery.fancybox.css?v=2.1.5",
 "0200": "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css",
 
 "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",
 
 "0300": "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/yeti/bootstrap.min.css",
 "0400": "assets/css/main.css?v="
 },
 "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": "assets/fancybox/jquery.fancybox.pack.js?v=2.1.5",
 "0400": "assets/js/main.js?v=",
 "0500": "https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sunburst"
 }
}










 Default Settings [ end ]