スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログ共有テンプレート作成入門②

テンプレートのHTMLデータを作成するにあたって知っておかなければならない変数の使い方について学んだり、実際にHTMLデータを作ってみます。

テンプレート変数について

テンプレート変数っていうのは、大きく3つに分けられていて、それぞれ使い方が違います。

  • ブロック変数
  • 条件変数
  • 単変数

ブロック変数

囲った部分をデータの個数分だけ繰り返し表示させる変数です。
例えば<--topentry-->~<--/topentry-->を使ったときのイメージは↓みたいな感じ。

Block var

条件変数

条件があったときだけ囲った部分を表示する変数です。
次の例は、追記があったときだけ続きを読むリンクを表示するものです。

<!--more_link--><a class="more" href="<%topentry_link>"><%template_extend></a><!--/more_link-->

単変数

実際のデータが入っている変数です。
例えば、<%topentry_title>には記事タイトルが入っているので、記事タイトルを表示したい場所に<%topentry_title>と入力しておけばそこに表示されます。

変数一覧

テンプレート内で使える変数一覧がまとめられています。
HTMLデータを作るときはいつもここを見ながら作っています。

HTMLデータを作る

まだHTMLエディタをインストールしていない人はインストールしておいてください。
無料のものですと、Windowsならez-HTMLとかサクラエディタ、MacならhpDrafter、英語でも良い人はSublime Textあたりがオススメです。

ベースとなるHTMLデータを拝借する

初心者さんがいきなりHTMLデータを1から作りあげようとするとかなり大変だと思います。
というわけで、公式テンプレートからHTMLデータを拝借して、気に入らない部分を修正してHTMLデータを作ってしまう方法がオススメです。

データの拝借方法はとても簡単で、新しめの公式テンプレートをダウンロードして、名前を変更するだけです。
このとき、作りたいカラム数と同じカラム数のものを選んでおくと自分で修正しなくていいので楽です。

気に入らない部分を修正する

例えば、公式テンプレート特有のフッター(ページの下の部分)などの Powered by FC2ブログ の文字を消すとかしたい場合は、

<p class="powered">Powered by <a href="http://blog.fc2.com/" title="<%template_fc2blog>"><%template_fc2blog></a></p>
こういうのを消したりします。

完成

HTMLデータはこれでひとまず完成ですが、スタイルシートを作成していく過程で変更点が出てくることもあると思いますので逐次修正していきましょう。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。