ホーム > construction > Site Customize > JUGEMのテンプレ作成メモ

JUGEMのテンプレ作成メモ

JUGEMブログ用のテンプレートを作成する時のためのメモ。
テクニックとまではいえないやつ。構文とかそういうやつ。

サンプル構文

以下のサンプルはBootstrap 3.3.7を利用したもの。

cdnjs.comを利用してBootstrapを使う

<head>～</head>の間に入れる。
CSSの中で同一名のCLASS, IDが付けられていた場合、後から読み込まれたもので上書きされていくので読み込み順序に注意する。

なお、jqueryはGoogleAPIsのものを使う。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

月別アーカイブ（プルダウン式）

<form action="#">
<div class="form-group">
 <select class="form-control" id="archives" onchange="location.href=value;">
  <option value="">Choice Archives</option>
  <!-- BEGIN archives_items --><option value="./month={archives_item_id}">{archives_item_year}.{archives_item_num_month} ({archives_item_num})</option>
<!-- END archives_items -->
 </select>
</div>
</form>

月別アーカイブ（ツリー式）

<ol>
<!-- BEGIN archives_items --><li><a href="./month={archives_item_id}">{archives_item_year}/{archives_item_num_month}</a> ({archives_item_num})</li>
<!-- END archives_items -->
</ol>

月別アーカイブは一般的に新しいものが上、古いものが下だが、<ol>のリストが1,2,3…の昇順なので、降順に変える。
またはdiscなどの数値以外のリスト形式に変える。

コメントフォーム

Bootstrap使うとかなり楽だ。

<form class="form-horizontal" action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" class="input" />
<header>
<p>お名前は入力必須事項です。<wbr />コメントが長くなる場合は適宜改行して下さい。</p>
</header>
 <div class="form-group">
  <label for="name" class="col-sm-2 control-label">name</label>
  <div class="col-sm-10">
   <input type="name" class="form-control" name="name" id="name" placeholder="your name" value="{cookie_name}" tabindex="1" />
  </div>
 </div>

 <div class="form-group">
  <label for="mail" class="col-sm-2 control-label">e-mail</label>
  <div class="col-sm-10">
   <input type="mail" class="form-control" name="email" id="email" placeholder="mail address" value="{cookie_email}" tabindex="2" />
  </div>
 </div>

 <div class="form-group">
  <label for="url" class="col-sm-2 control-label">web site</label>
  <div class="col-sm-10">
   <input type="url" class="form-control" name="url" id="url" placeholder="http://" value="{cookie_url}" tabindex="3" />
  </div>
 </div>

 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
  <div class="checkbox">
  <label>
   <input type="checkbox" name="set_cookies" id="set_cookies" value="1"> Remember me
  </label>
  </div>
  </div>
 </div>

 <div class="form-group">
  <label for="text" class="col-sm-2 control-label">message</label>
  <div class="col-sm-10">
   <textarea class="form-control" name="description" id="description" rows="5" placeholder="適宜改行してください" tabindex="4"></textarea>
  </div>
 </div>

 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
  <button type="submit" class="btn btn-default">submit</button>
  </div>
 </div>

</form>

トラックバックURIのURLをクリックしたら全選択させる

コピーまで含めるとブラウザ別でスクリプトが効く/効かないの問題があるので一般的にはFlashを使うことになる。
けど面倒くさいのでコピーまでしない。

<input type="url" class="form-control" id="trackbackPing" onclick="this.select();" value="{trackback_url}" />

関連記事