このエントリーをはてなブックマークに追加

Memo

【Monstra】くろひつじのベビめも できました

2014/04/09
Memo

babymemo

前々回の記事で、サイトのお披露目までできませんでしたが、ようやくコンテンツを多少なり増やせたので、お披露目です。
待っててくださった方、お待たせしました!

Monstra で くろひつじのベビめも を作りました!

babymemoSC
くろひつじのベビめも

こんな感じで、赤チェック背景のシンプルな感じで作ってみました。
Bootstrapで作成できるのも売りみたいでしたが、Bootstrapをまだちゃんと理解してないのと、やってみたい方向とでなんか違う気がして、普通にデザインしました。

内容としては、我が子の成長記録も兼ねた子育て情報サイトです。
ブログで子育てのことは書いているものの、どんどん記事を書くと埋もれてしまうなぁと常々思っていて、必要な時にぱっと見返せるまとめたページがほしいなぁと。
また、記事にするほどでもないけど、残しておきたい情報、あとからまた見返したいものなんかもかいておこうかな、と。

Monstra のテンプレート作りはとてもシンプル

テンプレート作ってみて、感じたのはとっても「楽」ということ。
必要なファイルも、

・index.template.php
・header.chunk.php
・footer.chunk.php
・css/style.css
・img/
・js/

これだけ。
wordpressみたいに、ブログ記事を繰り返し表示するわけではないので、while文を書く必要ないし、よく考えると当たり前なんですけどね。

template.php に chunk.php を表示させることができるので、全ページで共通の部分(例えばheaderなど)は chunk.php にかいてしまえます。
template.php はページ毎に変えることができるので、ページのレイアウトパターンに合わせた template.php を作成したりできます。

また、メニューは1つしか作れないようです。
メニューが他にも必要な場合は chunk.php を作成したり、block や snippet で作成するしかないです。

Monstra でよくつかうコード一覧
コード コードの役割
Site::name() サイトの名前を表示(例:くろひつじのベビめも)
Site::url() サイトのURLを表示(例:http://baby.ark-under.net/)
Url::current() 現在表示しているページのURLを表示
Site::description() 表示しているページのdescriptionを表示。
未入力の場合は system > settings で指定したdescriptionを表示
Site::keywords() 表示しているページのkeywords()を表示。
未入力の場合は system > settings で指定したkeywords()を表示
Page::robots() meta の robots の指定を表示。デフォルトでは index, follow。
ページ毎に no Index, no follow の指定が可能
Site::title() 表示しているページのタイトルを表示(例:Home)
Site::content() 表示しているページのコンテンツ内容を表示
Menu::get() メニューを表示します
Snippet::get(‘NAME’) NAME という名前の snippet 内容を表示
Chunk::get(‘NAME’) NAME.chunk.php の内容を表示
Block::get(‘NAME’) NAME という名前の block 内容を表示
Site::powered() 「Powered by Monstra 2.3.1」を表示

以上のコードを <?php echo ?>することで表示できます。
snippetもblockもコンテンツの中に埋め込めます。ショートコードで埋め込めるので、なかなか便利。

また、バックアップ機能やメンテナンス機能もデフォルトでついてますし、404ページもデザインできるようになってます。

【ここがすごい!】css や javascript を自動的に minify 表示してくれる!

Monstraのテンプレートをつくっててすごいなーと思ったのは、css や javascript を自動的に minify にしてくれるところですかね。
(minify は改行やタブを削除して、1行とかにまとめた状態)

こうやって書くと、

    <?php Stylesheet::add('public/themes/theme/css/style.css', 'frontend', 1); ?>
    <?php Stylesheet::load(); ?>
    <?php Javascript::add('public/assets/js/jquery.js', 'frontend', 1); ?>
    <?php Javascript::add('public/theme/babymemo/js/function.js'); ?>
    <?php Javascript::load(); ?>

サイトのソース上は、

<link rel="stylesheet" href="サイトURL/tmp/minify/frontend_site.minify.css" type="text/css" />
<script type="text/javascript" src="サイトURL/tmp/minify/frontend_site.minify.js"></script>

となっているんです。
これはビックリしましたね。

Javascript::add の書いている順に minify.js 上も書かれるので、実行順が気になる方も大丈夫。
minifyにしたくなければ add しなければいいわけです。

以下のページでテーマを作る上で必要最低限のコードを紹介しています。
Monstra – Theme Creation(en)

個人的に、一番最後にjsを書くと速くなるとありますが、bodyにjs書くの嫌いなので、きっちり倣ってはいません。

Action::run はいまのところよく分からないんですが、何かしら実行させるためのフックの指定、のようです。
削除しても動きはするので、上級者向けなんだろうなぁと思ってます。
フックについて書いてあるページ↓
[Theme] placing action hook (Page 1) — Questions — Monstra

Monstra なかなか便利そう

「頻繁に更新するわけではないけど、たまに更新がある中小企業サイト」にちょうどいいかなーという感じがしています。
データベースを使わないので、phpの動くサーバならOKだし。管理画面が英語なので、その部分だけが難点ですが。

ブログ用CMSではないので、ブログ記事を書いたりするには向きません。
ですが、wordpressで企業サイト作るよりは作りはシンプルだし、一度テンプレート作ってしまえばブラウザ上で殆どの作業ができるので、とてもよいです。
テーマファイル編集もできるし、いろんなレイアウト用に必要になってくる template.php の複製も管理画面でできるんですよ。

興味もたれた方はぜひ、使ってみてくださいね!
以上、Monstraの感想でした。

「くろひつじのベビめも」もよろしくね@・ェ・@

くろひつじのベビめも

Category : MemoTags : , ,

関連記事

コメントを残す




About

中の人:Mei Koutsuki (@mei331)
神奈川でweb作ったり、お洋服つくったりしてる黒いひつじさん。ロリィタ系webクリエイター。12年9月に一児の母となり、自宅で子育てしながらお仕事してます。
>> もっと詳しく