CALENDAR
S M T W T F S
   1234
567891011
12131415161718
19202122232425
2627282930  
<< November 2017 >>
ペパボ新聞ティッカー
ARCHIVES
CATEGORIES
スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - |
第10回 テンプレート作成講座−ul編

ulタグはJUGEMの公式テンプレートのサイドバーでも良く使われているリストを表現する一般的なHTMLタグです。今回は、そのulタグの見た目を変更するCSSの書き方を勉強していきます。

まずは、リストの頭についてる「・」といったマーカーを取り去ったり変更したりする書き方です。実際に試してみると、

  • item1
  • item2
  • item3

このリストが、下のようになります。

  • item1
  • item2
  • item3

このときのHTMLとCSSは以下のとおりです。実際に「・」を取っているのは、CSS内の「list-style-type:none;」という箇所になります。

HTML:

CSS:

次は、マーカー部分を画像に変更する方法です。画像を使う場合は、「list-style-image:url("【画像のURL】");」を記述します。なお、画像のURLは許可がある場合を除いてJUGEMに自分でアップロードした画像のURLを使うようにしましょう。

  • item1
  • item2
  • item3

このソースは以下のとおりです。

HTML:

CSS:

ulタグはサイドバーで頻繁に使われているので、JUGEMの見た目を変更する場合にはulタグのCSSの記述方法を知っておくと、とても便利です。ぜひマスターしてください。

| 一から作るテンプレート | 18:40 | comments(13) | trackbacks(149) |
第6回フリースペースにJavascript

今回は、Javascriptネタを久しぶりにやります。

フリースペースという機能がJUGEMに搭載されたため、Javascriptの埋め込みも簡単になりました。今回ピックアップするのは、JUGEMを提供してるpaperboy&co.の社長であるイエイリカズマさんのブログで使われてるネタを紹介します。

イエイリさんのブログ上では、リンク部分にマウスカーソルがくるとフラッシュが再生される仕掛けが盛り込まれており、これはJavascriptで実現してる機能になります。

フラッシュファイルをそのまま使うことはできなかったので、フラッシュ部分を画像にしたり、Javascriptのソース部分はイエイリさんから許可を貰いながら、私の方でフリースペースに入れるだけで動作するような形へと改変を行いました。

使い方はとても簡単です。JUGEMの管理画面にログインし、フリースペースのID番号は何処でも構わないので、空いてるIDの内容部分に以下の引用部分をコピペしてください。それ以外の作業は必要ありません。

<script type="text/javascript">
<!--
/*
このJavascriptは、aタグに「target="_blank"」が設定されている場合に画像を表示する機能を提供します。
作者はイエイリカズマ氏です。(http://ieiriblog.jugem.jp/)
*/

var ahref_diff_x = 12;
var ahref_diff_y = 35;
var ahref_target_none_html = "<img src='http://img-cdn.jg.jugem.jp/385/9138/20051229_122492.gif' />";
var ahref_target_blank_html = "<img src='http://img-cdn.jg.jugem.jp/385/9138/20051229_122491.gif' />";

function ahref_getMouseX(e){
var _x;
if (document.all){
_x = window.event.clientX+ahref_getScrollWidth();
}else{
_x = e.pageX;
}
return _x;
}

function ahref_getMouseY(e){
var _y;
if (document.all){
_y = window.event.clientY+ahref_getScrollHeight();
}else{
_y = e.pageY;
}
return _y;
}

function ahref_getScrollWidth()
{
var w;
if(document.body.scrollLeft){
w = document.body.scrollLeft;
}else if(window.parent.pageXOffset){
w = window.parent.pageXOffset;
}else{
w = document.documentElement.scrollLeft;
}
return w ? w : 0;
}

function ahref_getScrollHeight()
{
var h;
if(document.body.scrollTop){
h = document.body.scrollTop;
}else if(window.parent.pageYOffset){
h = window.parent.pageYOffset;
}else{
h = document.documentElement.scrollTop;
}
return h ? h : 0;
}

function init_ahref() {
var links = document.links;
var linkc = links.length;
for (var i = 0; i < linkc; i++) {
m = 0;
if (links[i].target != "") {
m = 1;
}
if (m == 1) {
links[i].onmouseover = ahref_LinkDispWin;
} else {
links[i].onmouseover = ahref_LinkDisp;
}
links[i].onmouseout = ahref_LinkHide;
links[i].onmousemove = ahref_LinkMove;
}
var ahref_block = document.createElement("div");
ahref_block.id = "ahref_block";
ahref_block.style.position = "absolute";
document.body.appendChild(ahref_block);
ahref_onload_backup();
}
var ahref_onload_backup = window.onload;
window.onload = init_ahref;

function ahref_LinkDisp(e) {
var ahref_block = document.getElementById("ahref_block");
ahref_block.innerHTML = ahref_target_none_html;
ahref_block.style.top = (ahref_getMouseY(e) - ahref_diff_y)+"px";
ahref_block.style.left = (ahref_getMouseX(e) - ahref_diff_x)+"px";
}

function ahref_LinkDispWin(e) {
var ahref_block = document.getElementById("ahref_block");
ahref_block.innerHTML = ahref_target_blank_html;
ahref_block.style.top = (ahref_getMouseY(e) - ahref_diff_y)+"px";
ahref_block.style.left = (ahref_getMouseX(e) - ahref_diff_x)+"px";
}

function ahref_LinkHide(e) {
var ahref_block = document.getElementById("ahref_block");
ahref_block.innerHTML = "";
//ahref_block.style.visibility = "Hidden";
}

function ahref_LinkMove(e) {
var ahref_block = document.getElementById("ahref_block");
ahref_block.style.top = (ahref_getMouseY(e) - ahref_diff_y)+"px";
ahref_block.style.left = (ahref_getMouseX(e) - ahref_diff_x)+"px";
}

-->
</script>

フリースペースを使うには、タイトルを入力しないといけないのですが、タイトルには「ahref javascript」と入力してください。

最後に一点だけ補足しておきます。フリースペースタグは新しくダウンロードした公式テンプレート内には組み込まれていますが、昔ダウンロードした公式テンプレートやUTFから手に入れたテンプレートにはフリースペース用の独自タグが入ってない可能性があります。今回のjavascriptをご利用の際にはご注意ください。

今回のようなモノを作ってみると、フリースペースがなんて素晴らしいんだろうということが良く分かります。もっとあれこれ活用していきたいです。

| Javascript | 02:57 | comments(1) | trackbacks(1) |
第9回 テンプレート作成講座−CSS2カラム編

CSSの講座が始まってから更新頻度が落ちてしまいました。苦手分野なのでどうしても立ち上がりが遅くなっちゃうのですが、年末休暇に入ったことだし、重い腰を上げてやってみたいと思います。

というわけで、まずはとっても簡単なところである「divタグを使った2カラムの作成」から始めます。

使用するテンプレートは第7回で作ったテンプレートです。

このテンプレートに対して、左側にサイドバーをつけて右側に記事本文、コメント、トラックバックが入るようなテンプレートを作成します。

まずは、左のサイドバーに入れる独自タグを埋め込んでいきます。(第7回ではサボってつけてませんでした)埋め込むときにサイドバー用のclass値「サイドバーのタイトル="sidebar_title"」「サイドバーのアイテム="sidebar_item"」を記述したdivタグで囲みながら作成します。(ちょっと長いです)

<!-- BEGIN calendar -->
<div class="sidebar_title">calender</div>
<div class="sidebar_item">{calendar}</div>
<!-- END calendar -->

<!-- BEGIN latest_entry-->
<div class="sidebar_title">latest_entry</div>
<div class="sidebar_item">{latest_entry_list}</div>
<!-- END latest_entry-->

<!-- BEGIN archives -->
<div class="sidebar_title">archives</div>
<div class="sidebar_item">{archives_list}</div>
<!-- END archives -->

<!-- BEGIN category -->
<div class="sidebar_title">category</div>
<div class="sidebar_item">{category_list}</div>
<!-- END category -->

<!-- BEGIN amazon -->
<div class="sidebar_title">amazon</div>
<div class="sidebar_item"></div>
<!-- END amazon -->

<!-- BEGIN user -->
<div class="sidebar_title">user</div>
<div class="sidebar_item">{user_list}</div>
<!-- END user -->

<!-- BEGIN selected_entry -->
<div class="sidebar_title">selected_entry</div>
<div class="sidebar_item">{selected_entry_list}</div>
<!-- END selected_entry -->

<!-- BEGIN recent_comment -->
<div class="sidebar_title">recent_comment</div>
<div class="sidebar_item">{recent_comment_list}</div>
<!-- END recent_comment -->

<!-- BEGIN recent_trackback -->
<div class="sidebar_title">recent_trackback</div>
<div class="sidebar_item">{recent_trackback_list}</div>
<!-- END recent_trackback -->

<!-- BEGIN link -->
<div class="sidebar_title">link</div>
<div class="sidebar_item">{link_list}</div>
<!-- END link -->

これに合わせてJUGEMの広告枠である独自タグ「{ad}」もサイドバーに入れてしまいます。サイドバーに入れるには、まずHTML側でサイドバーに入れる部分とサイドバーの横に表示する部分の両方をdivタグで囲む必要があります。

今回は、左側のサイドバーなので"side_left"と"main"というclass値を利用します。つまり、サイドバーに入れる部分を「<div class="sidebar_left">〜</div>」で囲み、サイドバーの横に表示する部分を「<div class="main">〜</div>」で囲みます。このdivタグは、適切な場所に自分で埋め込んでください。

これで、HTML側の準備は完了です。いよいよ、CSS側の設定を行います。

左に寄せるには、CSSの設定でdiv.mainに"margin-left"の値を設定し、div.side_leftに"float"と"width"の二つを設定すればできます。

ここで注意しなくてはならないのは、divタグを書いてる順番とfloatを指定するdivタグの関係です。HTMLに記述された文章は上から下に描画されるという原則があります。floatを指定することによって、その原則から外れることになり、float指定したdivタグとその後に続く部分が、同じ位置から描画されるようになります。

よって、先の説明で行ったdiv.side_leftに"float"を設定するということは、HTML側で以下のようなdivタグの順番になっていないといけません。

<div class="side_left">
(サイドバーの内容)
</div>

<div class="main">
(本文表示の内容)
</div>

HTMLで上記の順番に変更を行った上で、CSSに以下の記述を付け足してください。

div.main{
margin-left: 170px;
}

div.side_left{
float:left;
width: 170px;
}

この設定は、floatで指定したdivタグの幅(width)を170pxに設定して、後に続くdivタグに同じサイズの左マージン(margin-left)を設定すれば描画部分がかぶらないことを意味しています。

今回はココまでです。サイドバーと本文部分を用意したことにより、ぐっとブログっぽくなってきました!

■■■今回作ったHTMLとCSS■■■

画面イメージ

HTML:

CSS:

| 一から作るテンプレート | 17:51 | comments(0) | trackbacks(0) |
第8回 テンプレート作成講座−フリースペースタグ編

フリースペースタグなるものが実装されたという情報を仕入れました。

これは、この講座で取り上げなくてはなりません!というわけで、さくっと行ってみます。

まず、新規で追加された「フリースペースタグ」ですが、説明を読んでみましょう。

「フリースペース」機能とは、テンプレートのHTMLを直接編集することなく、サイドバーにブログパーツなどの好きな内容を表示させることができる機能です。
テンプレートのHTMLを編集が苦手・・・、といった方でもブログのサイドバーに自分の好きなパーツ(Mybloglistやblogpeoleなど)を簡単に追加することができます。
また、フリースペースを表示させる独自タグがテンプレートに含まれていれば、別のテンプレートを変更してもサイドバーの編集をもう一度行う必要がありませんので便利です。

おお!これは、私のようにテンプレートをちょこちょこと変更する人にとって、とても便利そうな機能です。

JUGEMのテンプレート機能は、HTMLとCSSの両方をいじれるため、ほぼ自分が好きなデザインを載せることができました。但し、その「自由」と引き換えに、テンプレートを変更する際には、自分が追加したサイドバー用のタグなども全て新テンプレートに移行しなくてはならないという制限がついてました。

今回の機能により、そういった制限のほとんどは気にしなくて良いレベルになりました。但し、本サイトで紹介した高橋もんたメソッドのような例外もありますが…。なんとなく凹。

前置きはこのぐらいにして、実際に使ってみます。

まずは、何をサイドバーに入れるかですが、私は先日左ツールバーに導入した「track word」というブログパーツをフリースペースタグに移行してみます。

まずは、管理画面から「フリースペースの編集」を選択して、リストの一番上の編集ボタンを押します。

タイトルと内容を入力する欄があるので、タイトルに「track word」と入力し、内容にtrack wordで入手したHTMLコードを、そのままコピペします。「状態」という設定もありますが、これはデフォルトで「公開」になってるので、そのままにしておきます。

これで、「編集内容を保存する」を押すと、フリースペースタグ側の設定は終わりです。

次に、テンプレート側の設定を行います。フリースペースタグを導入するには、以下のような独自タグをテンプレートのHTML内に記述すればよいようです。

<!-- BEGIN freespace1 -->
{freespace_title1}
{freespace_contents1}
<!-- END freespace1 -->

この独自タグおよびブロックは、繰り返し処理されるタイプのタグではないため、entryやcomment、trackbackといったブロック内に記述しても意味はありません。というか、何が起こるか分からないので、入れないようにしましょう。

また、「freespace1」や「freespace_title1」といった最後の数字は、フリースペースのID番号と一致してるようです。私は一個しか使いませんが、複数使う場合は注意しましょう。

さて、独自タグの記述ですが、今回は左サイドバーの中に入れたいので、記述する場所は「<div id="left">〜</div>」になります。(※これは、今現在利用しているテンプレートでの話です。記述する場所はテンプレート毎に異なります。)

実際に記述するタグは、divタグなどを付け足して以下のようにします。

<!-- BEGIN freespace1 -->
<div class="linktitle">{freespace_title1}</div>
<div class="linktext">{freespace_contents1}</div>
<!-- END freespace1 -->

これを実際にテンプレートのHTML内に記述してみると、今現在のテンプレートのようになります。これで、テンプレートを新しいものに変更しても、track wordの設定は引き継がれます。いいぞっ、この機能!

| 一から作るテンプレート | 22:16 | comments(0) | trackbacks(0) |
第7回 テンプレート作成講座−CSS基礎編

えーっと、そろそろCSS編に入らないといけないと思いつつ、全然入れてません。というのも、HTMLもあまり詳しくないのですがCSSはもっと素人よりなので、何を伝えたら良いのかが分からないためです。

というわけで、何を伝えるという視点よりも、私が何をやりたいかという視点で勝手に自分で悩みながら、その結果をアップしていきます。

まず、最初に私がやりたいのは、JUGEMのテンプレートの仕様では、どのようにCSSを利用するのかという一連の決まりごとを明らかにしていくことです。

というわけで、今回はどのようにCSSを使っていくのかということを主眼とします。

まず最初は、JUGEMのテンプレートにおけるCSSファイルの指定方法になります。CSSはHTML内にCSSの記述を行う手法と、CSSを外部ファイルとして利用する方法が用意されていますが、JUGEMでは主にCSSを外部ファイルとして利用する方法をとります。

一般的にCSSを外部ファイルとして利用する場合、CSSを使うという記述をHTMLのHEAD部に記述しなくてはなりません。JUGEMでは以下の記述をHEAD内に行うことで、CSSを外部ファイルとして利用できます。

<link rel="stylesheet" href="{site_css}" type="text/css" />

上記の記述をすると、CSSを外部ファイルとして使うことができるようになりますので、以下のような非常に簡単なCSSをJUGEMテンプレートの「CSS」に記述して確かめてみます。

div{
background-color:red;
}

上記をJUGEMテンプレートの「CSS」に記述しテンプレートの更新を行うと、全体が赤くなることが確認できると思います。

さて、これでJUGEMにおけるCSSの使い方の概略は分かったと思います。今回は、更にブロックごとの簡単な色分けまでやっておき、テンプレートにおける「HTML」と「CSS」の役割みたいなのを理解してもらうところまでやってしまいます。

下記の要領でブロック内のdivにclass属性を記述していきます。今回は分かり易いようにclassの値はブロック名にしています。

<!-- BEGIN title -->
<div class="title">
<div>ブログの名前[{blog_name}]</div>
<div>ブログの説明[{blog_description}]</div>
</div>
<!-- END title -->

<!-- BEGIN entry -->
<div class="entry">
entry:<a href="{entry_permalink}">{entry_title}</a>
</div>
<!-- END entry -->

CSSでクラスごとに設定を変更するには、タグ名の後ろに".クラス名"と書くことで指定することができます。先ほどのCSSの記述を以下のように変更してください。

div.title{
background-color:red;
}

上記二つの作業で、titleブロック部分だけが赤くなったと思います。

これがJUGEMにおけるテンプレートでの基本的な操作になります。HTMLでタグとタグの属性値を指定し、CSSでタグと属性値ごとの表現方法を決めるという流れになります。

上記のような流れでテンプレートを作成していくため、テンプレートはHTMLとCSSが一対になってるわけです。この基本概念が理解できてないと、何故HTMLとCSSが一対になってるかが分からないと思いますので、今回でしっかりと理解しておいてください。

さて、上記で紹介してきたコードを更にちょっといじったものを、今回のまとめとして最後に記述して終わりとします。

なお、今回の講座を記述をして動作確認中に気付いたことがあるんですが、一つのテンプレート内で同じ独自タグを複数記述することはできませんので、注意してください。更に、ブロック内に独自タグがきちんと記述されていないとブロック自体が処理されないという制限もありました。(これらの制限は、第4回講座に追記しました。)

■■■今回作ったHTMLとCSS■■■

画面イメージ

HTML:

CSS:

| 一から作るテンプレート | 00:05 | comments(0) | trackbacks(1) |
第6回 テンプレート作成講座−独自タグ脱線編(MTログ)

今回は、ちょっとだけ脱線し、テンプレート作成はCSSを使わなくても楽しいことができるという証拠みたいなのをやってみたいと思います。

今回作成してみるのはMTログ形式です。MTのログ形式を吐き出すテンプレートを作成し、MTログデータをテンプレート上のHTMLだけで表現しちゃおうという無謀な試みをやってみます。

まず、MTログ形式の最初には以下のような記事単位の記述が必要になります。

AUTHOR: 記事作者名
TITLE: 記事タイトル
STATUS: 記事のステータス
ALLOW COMMENTS: 記事にコメントを許可しているか
CONVERT BREAKS: セパレータかな?
ALLOW PINGS: 記事にトラックバックを許可しているか
CATEGORY: 記事のカテゴリ

DATE: 記事の日付時刻
-----
BODY:
記事本文
-----
EXTENDED BODY:
記事の続き本文
-----
EXCERPT:
-----
KEYWORDS:
-----
COMMENT:
AUTHOR: コメント者の名前
EMAIL: コメント者のe-mail
IP: コメント時のIP
URL: コメント者のURL
DATE: コメント時の日付時刻
コメント本文
-----

PING:
TITLE: トラックバック送信元の記事名
URL: トラックバック送信元のURL
IP: トラックバック送信元のIP
BLOG NAME: トラックバック送信元のブログ名
DATE: トラックバック送信時の日付時刻
トラックバックの概要
-----



--------

残念ながら独自タグで全てを出力することはできないので、無理なところは固定値で吐き出す形でテンプレートを作成します。

最初に確認しておかないといけないことは、コメントとトラックバックは記事固有のURLでないと表示されないため、複数記事を表示する形式では上手く機能しません。

上記の制限は、言い換えると全く使えないテンプレートであるってことなんですが、そこは使えるかどうかより、できることの確認の意味が強いので目をつぶってください(汁)。

さて、まずは記事自体のMTログ形式での表示を行ってみます。使う独自タグを調べるには、いつものJUGEMのオンラインマニュアル「JUGEMの設定に関するタグ」を使います。

<!-- BEGIN title --><!-- END title --><!-- BEGIN entry -->AUTHOR: {user_name}
TITLE: {entry_title}
STATUS: Publish
ALLOW COMMENTS: 1
CONVERT BREAKS: __default__
ALLOW PINGS: 1
CATEGORY: {category_name}
DATE: {entry_month}/{entry_day}/{entry_year} {entry_time_only}
-----
BODY:
{entry_description}
-----
EXTENDED BODY:
{entry_sequel}
-----
EXCERPT:

-----
KEYWORDS:

-----<!-- END entry -->


--------

使った独自タグ部分のみ太字にしてます。ブロックの開始と終了時に改行を入れていないのは、MTログ形式にあわせるために改行は入れていません。

また、念のため説明しておきますが、以下の4つはJUGEMの独自タグでは用意されてないので、固定値をテンプレート内で入れ込んでます。

  • STATUS: Publish
  • ALLOW COMMENTS: 1
  • CONVERT BREAKS: __default__
  • ALLOW PINGS: 1

さて、このテンプレートを使えば記事単位のMTログはできました。残すはコメントとトラックバックです。オンラインマニュアルの、コメントトラックバックのところを使って、じゃんじゃんとMTログ形式で書いてみると以下のようになります。ブロック毎埋め込むのですが、埋め込む場所としては、entryブロックの直後になります。この場合も改行の位置などを考えないといけないので、ブロックの位置は重要です注意してください。

(省略)
-----<!-- END entry --><!-- BEGIN comment_area --><!-- BEGIN comment -->
COMMENT:
AUTHOR: {comment_name_only}
EMAIL: {comment_email}
IP:
URL: {comment_url}
DATE: {comment_month}/{comment_day}/{comment_year} {comment_hour}:{comment_minute}:00 {comment_ampm}
{comment_description}

-----<!-- END comment --><!-- END comment_area --><!-- BEGIN trackback_area --><!-- BEGIN trackback -->

PING:
TITLE: {trackback_title_only}
URL:
IP:
BLOG NAME: {trackback_blog_name}
DATE: {trackback_month}/{trackback_day}/{trackback_year} {trackback_hour}:{trackback_minute}:00 {trackback_ampm}
{trackback_excerpt}
-----<!-- END trackback --><!-- END trackback_area -->


--------

記述した独自タグとブロックは太字で表示しています。また、足りない独自タグがいくつかありますので、以下に列挙します。

  • トラックバック送信元のURLに該当する独自タグがありません
  • コメント、トラックバックのIPに該当する独自タグがありません
  • コメント、トラックバックの受け付け時間の秒単位に該当する独自タグがありません

上記で記事単位のMTログ形式のテンプレートが完成です。

実際にテンプレートのHTMLとして利用するには、{ad}タグなどいくつかの必須タグがありますので、MTログ部分をtextarea内に埋め込んだテンプレートとして最後にまとめて今回の講座を終了とします。

■■■今回作ったHTMLとCSS■■■

画面イメージ

HTML:

CSS:(空っぽ)

| 一から作るテンプレート | 21:47 | comments(2) | trackbacks(0) |
第4回 テンプレート作成講座−独自タグ基礎編(おさらい)

今回は、ちょっとおさらいをしつつ「独自タグ」と「ブロック」に関する注意点をまとめてみたいと思います。というわけで、記事は短めになります。

前回までで学んだことは、JUGEMのテンプレートを構築するには「独自タグ」と「ブロック」という概念を理解しなくてはなりません。

■独自タグの特徴

  • タグ名を"{}"で囲む
  • 使用できるブロックが決まっている
  • ブロックを間違えると思ったように動作しない
  • 同じ独自タグを二つ記述すると動作しない
  • マニュアルは間違えてる箇所もあるので注意!

■ブロックの特徴

  • ブロック名を以下のHTMLコメントで囲む
    <!-- BEGIN ブロック名 -->
    <!-- END ブロック名 -->
  • 画面によって処理されるブロックが異なる
  • 複数回処理されるブロックと、一回しか処理されないブロックがある
  • ブロック内に独自タグが入ってないと処理されない
  • 同じブロックを二つ記述すると動作しない

こんな感じです。このような特徴を踏まえたうえで、テンプレートを作成していくと、行き詰ることが少ないと思います。

個人的には、変な挙動を見つけたら、とりあえず「ブロック内の独自タグを疑え!」ってのが教訓になりつつあります。

今回の最後に、JUGEMのオンラインマニュアルで欠落している「ブロック」の一覧表を書いておきます。テンプレート作成時の参考にしてください。

(表中の"*"はアカウント名で、"nn"は数字をあらわす)
ブロック名処理されるURL複数処理
entry
  1. http://*.jugem.jp/
  2. http://*.jugem.jp/?eid=nn
  3. http://*.jugem.jp/?cid=nn
  4. http://*.jugem.jp/?month=nn
2の時だけなしで、後はあり
comment_area
  1. http://*.jugem.jp/?eid=nn
なし
comment
  1. http://*.jugem.jp/
    (但し、正常に動作はしない)
  2. http://*.jugem.jp/?eid=nn
あり
trackback_area
  1. http://*.jugem.jp/?eid=nn
なし
trackback
  1. http://*.jugem.jp/
    (但し、正常に動作はしない)
  2. http://*.jugem.jp/?eid=nn
あり
title
  1. 全てのページ
なし
calendar
  1. 全てのページ
なし
archives
  1. 全てのページ
なし
category
  1. 全てのページ
なし
amazon
  1. 全てのページ
なし
sequel
  1. http://*.jugem.jp/?eid=nn
なし
profile_area
  1. http://*.jugem.jp/?pid=nn
なし
page
  1. http://*.jugem.jp/?page=nn
なし
selected_entry
  1. http://*.jugem.jp/
  2. http://*.jugem.jp/?eid=nn
  3. http://*.jugem.jp/?cid=nn
  4. http://*.jugem.jp/?month=nn
なし
recent_comment
  1. 全てのページ
なし
recent_trackback
  1. 全てのページ
なし
link
  1. 全てのページ
なし
profile
  1. 全てのページ
なし

自分の確認用の意味も込めて、テーブルで一覧表作ってみましたが、これをいちいちブロックとして書いていくのがめんどくさいですね。

というわけで、空っぽのブロックだけを記述したのを用意しました。新規テンプレートを作る際にコピペして使ってください。

あ、全然記事短くないやん…。

| 一から作るテンプレート | 20:59 | comments(0) | trackbacks(0) |
第4回 テンプレート作成講座−独自タグ基礎編3

今日は仕事が休みだったので、超特急で進めて行きます。

「ブログ」の重要な特徴といえば、自分の書いた記事だけではなくコメントやトラックバックといった読者側からの意見を取り入れるという機能を有しているということがあります。今回は、そのブログの特徴であるコメントやトラックバックのブロックについて解説していきます。(記事のブロックよりも、ちょっとだけ複雑なので頑張って理解してください。)

前回までで「独自タグ」と「ブロック」に関しては説明が終わり、記事(entry)を表示するだけの準備はできました。コメント(comment)やトラックバック(trackback)が記事と大きく違う点として、記事はブログのトップで表示されますが、コメントやトラックバックはトップで表示されず、各記事の個別ページ上で表示されます。

この「トップで表示しないけど、個別記事のページでは表示する」という制御を行うために、コメントとトラックバックは特殊な別のブロック「コメントエリア(comment_area)」「トラックバックエリア(trackback_area)」ブロックでコメント、トラックバックのブロックを囲みます。

具体的には、以下のような記述をHTMLのBODY内に記述します。

<!-- BEGIN comment_area -->
<!-- BEGIN comment -->
<!-- END comment -->
<!-- END comment_area -->

<!-- BEGIN trackback_area -->
<!-- BEGIN trackback -->
<!-- END trackback -->
<!-- END trackback_area -->

更に、このブロック内にコメントの表示に関するタグトラックバックの表示に関するタグを埋め込んでいきます。

まずはコメント部から。

<!-- BEGIN comment_area -->
<!-- BEGIN comment -->
<div>コメントの本文[{comment_description} ]</div>
<div>コメント者の名前[{comment_name}]</div>
<div>コメントが書かれた日時[{comment_time}]</div>
<!-- END comment -->
<!-- END comment_area -->

コメントにも、記事と同じく罠独自タグがあるので、以下のタグはcommentブロック内では使わないでおきましょう。
{cookie_name}{cookie_email}{cookie_url}{entry_id}

次にトラックバックの独自タグを埋め込みます。

<!-- BEGIN trackback_area -->
<div>この記事のトラックバックURL[{trackback_url}]</div>
<!-- BEGIN trackback -->
<div>トラックバック送信元のブログ名称[{trackback_blog_name}]</div>
<div>トラックバック記事の概要[{trackback_excerpt}]</div>
<div>トラックバック受信日時[{trackback_time}]</div>
<div>トラックバック記事のタイトル[{trackback_title}]</div>
<!-- END trackback -->
<!-- END trackback_area -->

トラックバックの罠独自タグは「{trackback_url}」だけです。これをtrackback_areaブロックではなくtrackbackブロック内に入れてしまうと、trackbackブロックが不必要に繰り返されてしまいますので注意してください。

さて、かなりの駆け足でコメントとトラックバックのブロックについて解説をしたのですが、コメントブロックとコメントエリアブロック(トラックバックも同じ)の違いを上手く理解できてない方も居ると思います。

この違いが理解できてないと、あるコメントに関する独自タグがあったとして、その独自タグをcommentブロックに入れればいいのか、commentブロックの外でcomment_areaブロックの中に入れればいいのかといった判断ができません。

この違いを理解するためには、まず、コメントやトラックバックは一つの記事に対して複数個存在しますが、コメントやトラックバックに関するモノで一つの記事に一回だけ必ず表示すれば良いモノがあるというポイントを抑えてください。

この「一つの記事に対する多重度の違い」がcommentブロック内に入れるか、comment_areaブロック内に入れるかの違いになります。

コメントであれば、コメント入力用の「formタグ」であるとか、トラックバックであれば、上記で既にtrackbackブロックの外に出してますが、「記事に対するトラックバックURL」などが一つの記事で一回だけ表示すれば良いモノになります。

まとめると以下のように考えてください。

一つの記事で必ず表示するcomment_area,trackback_area
一つの記事で0〜n個表示するcomment,trackback

トラックバックを例にとって、実際の動きを見ていきます。作業としては、独自タグを埋め込んだtrackbackブロック内に更にいくつかの行を追加します。

<!-- BEGIN trackback_area -->
<div>▼▼▼▼▼trackback_area 開始▼▼▼▼▼</div>
<div>この記事のトラックバックURL[{trackback_url}]</div>
<!-- BEGIN trackback -->
<div>▽▽▽▽▽trackback 開始▽▽▽▽▽</div>
<div>トラックバック送信元のブログ名称[{trackback_blog_name}]</div>
<div>トラックバック記事の概要[{trackback_excerpt}]</div>
<div>トラックバック受信日時[{trackback_time}]</div>
<div>トラックバック記事のタイトル[{trackback_title}]</div>
<div>△△△△△trackback 終了△△△△△</div>
<!-- END trackback -->
<div>▲▲▲▲▲trackback_area 終了▲▲▲▲▲</div>
<!-- END trackback_area -->

上記を記述したテンプレートで表示した画面イメージに説明を入れたのを見てください。これで理解が深まると思います。

さて、今回はこれでおしまいです。最初真っ白だったブログも、だんだんブログっぽくなってきました。独自タグが落ち着いてきたら、素人に毛が生えた程度の知識しかないCSSにも手を出していくつもりなので、私も勉強しなくちゃいけません。一緒に頑張っていきましょう。

■■■今回までで作ったHTMLとCSS■■■

画面イメージ

HTML:

CSS:(空っぽ)

| 一から作るテンプレート | 21:01 | comments(0) | trackbacks(3) |
第3回 テンプレート作成講座−独自タグ基礎編2

今回は独自タグの「ブロック」という概念を説明しつつ、実際に使ってみます。

この独自タグの「ブロック」とはJUGEMテンプレートの特殊な考え方で一般的なHTMLには存在していない概念です。というか一般的なHTMLでは、単なる「コメント」という位置付けになります。

何故、このようなブロックという概念が存在するかを説明すると難しくなるので、「ふーん、そういうものなのか」ぐらいで止めておいて、実際に使ってみるという荒療治手法でいきます。まあ、そんなに大層な理由があるわけじゃなく、上手く説明する自信がないだけだったりします(屍)。

早速実際に手を動かしていきます。最初は、一番基本的な「記事」に関する独自タグ(含:ブロック)を利用します。(以下の手順内で記述する場所は、全てHTML内のBODY部分になります。)

  1. ブロック内に記述しなくてはならない独自タグを使うには、まずブロックを記述します。記事に関するブロックは以下のブロックになります。
    <!-- BEGIN entry -->
    <!-- END entry -->
  2. ブロックを記述したら、そのブロック内に各独自タグを記述していきます。まずは分かり易く記事のタイトルだけを記述してみます。
    <!-- BEGIN entry -->
    <div>記事タイトル[{entry_title}]</div>
    <!-- END entry -->
  3. とりあえず、この状態でテンプレートを更新するとこんな表示になります。
    リンク先の画像を見てもらえば分かりますが、追加した記事タイトルが表示されていません。私は、ここでひとしきり悩んでしまいました。解決方法は次で説明します。
  4. 上記で問題になった現象に関しては、多分JUGEMの仕様だと思われますが、ある特別なブロックを用意してあげるだけで解決できます。そのブロックはtitleブロックになります。
    以下ようにtitleブロックを追加してください。
    <!-- BEGIN title -->
    <!-- END title -->
    <!-- BEGIN entry -->
    <div>記事タイトル[{entry_title}]</div>
    <!-- END entry -->
  5. 上手く解決した場合の表示はこの画像のようになります。ばっちりと記事タイトルが2つ表示されました。(記事を二個追加してます。)

ここで疑問に思ったことはありませんか?追加したのは一個のentryブロックなのに、記事タイトルは二個表示された点をすんなり理解できたでしょうか?

このように、一個のentryブロックを追加することにより、複数の記事(entry)が繰り返し表示されます。これがブロックという概念を使う一番大きな理由となります。この概念は今後テンプレートを作り上げていく上で、何度か出てくるのでしっかりと理解しておいてください。

さて、記事タイトルだけじゃ勿体無いので、entryブロック内に一般的な独自タグもドンドン埋め込んでみましょう。

注意点としては、記事の表示に関するタグ以外はentryブロック内に入れないようにすることです。entryブロック内に入れちゃうと、思わぬ動作をしてしまうことがありますので、避けておくのが無難なようです。

<!-- BEGIN title -->
<!-- END title -->
<!-- BEGIN entry -->
<div>記事タイトル[{entry_title}]</div>
<div>カテゴリ名[{category_name}]</div>
<div>記事本文[{entry_description}]</div>
<div>記事続き[{entry_sequel}]</div>
<div>投稿日付[{entry_date}]</div>
<div>投稿時刻[{entry_time}]</div>
<div>投稿者名[{user_name}]</div>
<div>コメント数[{comment_num}]</div>
<div>トラックバック数[{trackback_num}]</div>
<div>記事固定リンク[{entry_permalink}]</div>
<div>固定リンク[{permalink}]</div>
<!-- END entry -->

これで一般的な記事に対する独自タグは全て記述しました。今回はここまでにします。次はコメントについて記述していきます。

(!)注意
記事の表示に関するタグで指定されている独自タグ「{permalink}」ですが、これをentryブロック内に入れると動作がおかしくなります。最初にアップした記事上では、{permalink}というタグを入れて説明したのですが、現在は打ち消し線を入れてる状況です。注意してください。

■■■今回までで作ったHTMLとCSS■■■

画面イメージ

HTML:

CSS:(空っぽ)

| 一から作るテンプレート | 13:40 | comments(0) | trackbacks(0) |
第2回 テンプレート作成講座−独自タグ基礎編

前回で空っぽのテンプレートが作成できましたので、ここからは色んなJUGEMの独自タグを使っていきます。この作業は、組み上げていく感じになるので、かなり面白いです(それって私だけ?)。

とはいえ、独自タグ自体を理解しないと先に進めないため、まずは、JUGEMの独自タグに関する重要な決まりごとをリストアップします。

  • 独自タグはテンプレートの「HTML」内に記述する(CSS内に記述しても機能しません。)
  • 独自タグはタグ名称を{}という括弧でくくる
    例:{hoge}
  • 独自タグには、更にブロックという概念もありブロックは、ブロック名を以下のHTMLコメントでくくる。(ブロック名をhogeとしてます。)
    <!-- BEGIN hoge -->
    <!-- END hoge -->
    特定のブロック内でしか機能しない独自タグもあったりしますので、このブロックの概念があることは絶対に覚えておいてください。概念があることさえ知っていれば、後で実際に使ってみたときに「お!これか!」と実感できると思います。

基礎知識が長くなりすぎました。

実際にHTML内にいくつか独自タグを入れていきましょう。最初はブロックの概念を使わない簡単なJUGEMの設定に関するタグを試してみます。

前回作った空っぽのテンプレートのHTMLのBODY内に、以下のような記述をしてみてください。

<div>ブログの名前[{blog_name}]</div>

テンプレートを更新してブログを確認すると、ブログ名称が「powered by JUGEM」の上に表示されるようになりました。

ついでに他のJUGEMの設定に関するタグも、どんどんと書いてみます。

<div>サイトの名前[{site_title}]</div>
<div>ブログの説明[{blog_description}]</div>
<div>ページの文字エンコード[{site_encoding}]</div>
<div>サイトのCSSファイル名[{site_css}]</div>
<div>サイトのRSSのURL[{site_rss}]</div>

表示はカッコワルいまんまですが、表示の調整はCSSで行うので、今はこのままで進めていきます。

■■■今回までで作ったHTMLとCSS■■■

画面イメージ

HTML:

CSS:(空っぽ)

| 一から作るテンプレート | 11:15 | comments(4) | trackbacks(0) |
| 1/2PAGES | >>