太るための筋トレやらトレーニングの成果を確認するために、ブログに記録することにする。その際スピーディに更新できるようにするために、カスタムフィールドを使うことにするでごわす。
プラグインの準備・設定
有名テンプレート、カスタムフィールドテンプレートを採用。参照記事も多いので便利。プラグイン設定にはこちらの参照記事を参考にする。
Custom Field Templateの設定は以下のように。
[calorie-balance]
type = text
size = 10
label = カロリーの差し引きいくら?
[weight-today]
type = text
size = 10
label = 今日の体重はいくら?
[weight-balance]
type = text
size = 10
label = 体重はプラスマイナス前日差いくら?
[fat-bercentage]
type = text
size = 10
label = 今日の体脂肪率はいくら?
[fat-bercentage-balance]
type = text
size = 10
label = 体脂肪率のプラスマイナス前日差はいくら?
[workout]
type = checkbox
value = ストレッチ # ジョギング # 筋トレ
[memo]
type = text
size = 30
label = 一言メモ
アウトプットの仕方で、single.phpにコードを埋め込んでしまうかショートコードを記事に入れるかで迷う。カスタマイズ性が高そうなので、後者を選択。記事中にcft format=Xと入力すると表示されます(コードは[ ]の括弧でくくる)。Xはそれぞれ設定した番号で。
ショートコードの中身はこちら。
<table class="cft">
<caption>昨日のからだ</caption>
<tr>
<th>カロリー差引</th>
<td>[calorie-balance]kcal</td>
</tr>
<tr>
<th>体重</th>
<td>[weight-today]kg (前日差:[weight-balance]kg)</td>
</tr>
<tr>
<th>体脂肪率</th>
<td>[fat-bercentage] % (前日差:[fat-bercentage-balance]%)</td>
</tr>
<tr>
<th>今日のワークアウト</th>
<td>[workout]</td>
</tr>
<tr>
<th>メモ</th>
<td>[memo]</td>
</tr>
</table>
CSS側の調整
そのままでも使ってるテンプレートのCSSがキレイに出力したタグを見せてくれるけど、ちょっとだけ見た目を変更する。以下CSSをテーマのCSSに追記。
body table.cft {
width:100%;
margin-top: 60px;
}
body .cft caption {
font-weight: bold;
padding: 10px;
}
body .cft th {
width:25%;
background: rgba(145, 149, 152, 0.77);
}
body .cft ul {
list-style: none;
padding: 0;
margin: 0;
}
body .cft li {
float: left;
margin: 0 0.5em 0 0;
}
というわけでほとんど申し訳程度。元のテーマファイルがよく出来ている!
はてさて、実際出力してみたのが下。
昨日のからだ
カロリー差引 |
+215kcal |
体重 |
55.7kg (前日差:0kg) |
体脂肪率 |
11.6 % (前日差:0%) |
今日のワークアウト |
ストレッチ |
メモ |
つけはじめ |
とまあいい感じ。作業時間は1時間程度。これでレコーディング(太る)ダイエットするぞー。
プライム・ストラテジー株式会社 SBクリエイティブ 2015-02-21