コメントも目を通すのがやっとの状態です。

落ち着きましたら、コメントのお返事なども含めて更新を再開しようと思っていますので、もうしばらくお待ちいただけたらと思います。

「JUGEMで複数のテンプレートを使い分ける方法」について具体的に解説します。

複数のテンプレートを使い分けると一口に言っても色んなアプローチがあるのですが、まず最初はもっとも簡単なものから紹介します。

基本となるアイデアは「条件を満たしたら、テンプレートを切り替える」ということです。

その際、若干の副作用を伴います。今回のスクリプトを導入することによって受ける影響も含めて解説します。

[続きがあります]

これから何回かに分けて「JUGEMで複数のテンプレートを使い分ける方法」について解説していきます。

複数のテンプレートを使い分けるために、まず必要なことは「複数のテンプレートを用意する」ことです。

複数のテンプレートを用意する方法には二通りのアプローチがあります。

1. 「別名で保存」を利用する
2. 「テンプレートダウンロード」を利用する

「別名で保存」は「テンプレートの編集」画面から「テンプレート選択」を選び、テンプレートリストの下にあるフォームを利用します。これは現在利用しているテンプレートを複製する形になります。

「別名で保存」となっていますが、実は同じ名前でも保存可能です。ただ、管理上混乱を招きやすいので、注意してください。

「テンプレートダウンロード」はJUGEMで用意されているテンプレートを追加する機能です。好きなテンプレートを選ぶことが出来ます。

「別名で保存」でも「テンプレートダウンロード」でも追加できるテンプレートの数には制限がありますので、注意してください。

複数のテンプレートを用意したら、「テンプレートのID」を識別する方法を覚えておきましょう。複数のテンプレートを使い分けるに当たって、テンプレートIDは重要な役割があります。

テンプレートIDを識別する方法はそれほど難しくありません。一番簡単な方法は一度そのテンプレートをプレビューしてみることです。

「テンプレートの編集」画面から「テンプレート選択」を選ぶと、現在ストックされているテンプレートのリストが表示されます。

そのリストにある「プレビュー」のアイコンをクリックすると、そのテンプレートをプレビューするために別ウィンドウが開きます。

その時にブラウザの「アドレス」欄でプレビューのアドレスを見てください。

http://simpleboxes.jugem.jp/?tid=40のように表示されているはずです。もちろん、「simpleboxes」と「tidの後ろの数字」は利用しているJUGEMによって変わります。

この時、「tidの後ろの数字」がそのテンプレートの「テンプレートID」になります。全てのテンプレートに対して「テンプレートID」を覚える必要はありませんが、利用したいテンプレートに関しては、この「テンプレートID」をどこかに控えておいて下さい。

近日中に新しいJUGEMカスタマイズを紹介しようと思っています。

そのカスタマイズを紹介する前に、正式版になってβ版とは動作が変わったテンプレートのプレビュー機能について説明します。

後日公開予定の新しいカスタマイズはこの「プレビュー機能」と密接に関連しています。

[続きがあります]

正式版になって、β版とは日付の書式が若干変わっています。β版から移行された方はお手数をおかけしますが、もう一度設置し直してください。

JUGEMはかなり柔軟なカスタマイズが可能ですが、日付は特定の書式で固定されています。

これを好きなようにカスタマイズしたいという方もいらっしゃるでしょう。

ここではJavaScriptを利用して、日付の書式を自由に変更する方法を紹介します。

[続きがあります]

JUGEMのカスタマイズと一口に言っても色々あります。

例えば、リンクをカテゴライズするのもひとつのカスタマイズの手法です。

プロフィールは独立した状態で表示されるという特徴を生かして、複数のダミーユーザーを作成し、それぞれの「ユーザーの説明」にページコンテンツを記述するというのも立派なカスタマイズです。

それでもやはり、カスタマイズの中心となるのは「テンプレートの編集」になるかと思います。

この「テンプレートの編集」に関しても、カスタマイズの手法がいくつか挙げられます。

テンプレートダウンロードセンターからテンプレートベースをダウンロードして、異なるテンプレートに差し替える。

これは普通にJUGEMで用意された機能を利用しているだけですが、訪問者から見たらページの見た目ががらりと変わるわけで、これも立派なカスタマイズと言ってよいでしょう。

また、実際にテンプレートを修正するというのでも

• htmlを編集する
• cssを編集する
• 利用する独自ブロックを変えてみる
• JavaScriptを利用して、もっと多様な表現を実現する

など色々なアプローチがあります。

実践編で紹介している内容のほとんどは、JavaScriptを利用して表示内容に変更を加える、というアプローチを取っています。

中には単にスクリプトを追加するだけでなく、cssもあわせて変更することで、目標とする表現を実現しているものもあります。

例えば、ツリー化スクリプト ver 2は、基本的にスクリプトの追加だけです(独自タグ部分は若干の修正が必要にはなりますが)。ですが、ツリー化カスタマイズ応用編ではcssの編集も含めたアプローチによってカスタマイズを行っています。

カスタマイズの基本となる「テンプレート編集」での役割を簡単に説明しておきます。

結構悩みどころだったりするのが、「〜をするためには、htmlとcssとどっちをいじればいいの？」ということかもしれません。

基本的な方針としては、文書構造を決めるのはhtmlで、配置(レイアウト)も含めた装飾を行うのはcssで、ということになります。

JavaScriptを利用したカスタマイズはhtml部分に記述します。JavaScriptを利用することによって、htmlの構造を後付で修正するからです。

JavaScriptでは後付のスタイルシート補正も可能なので(実際、ここで紹介しているスクリプトにはそのように利用されているのもあります)、厳密にはちょっと違ったりするのですが、細かいことは気にしちゃいけません。

「文書構造」とか言うと大袈裟ですが、ようするに「これはタイトル」「これはリンク集」「これは本文」といったパーツを決めるということだと理解してください。

JUGEMカスタマイズ講座では、htmlの基礎知識そのものはあまり触れないと思います(例えば、「<br />タグは改行になります」と言ったようなhtml要素の説明はほとんどしません)。

その代わり、スタイルシートやJavaScriptなどカスタマイズに関連する内容に関しては広く浅く触れようと思っています。

スタイルシートに関してはスタイルシート講座があります。私のような素人解説ではないので参考になるかと思います。

ツリー化スクリプト ver 2では、スクリプトを整理/統合したので、以前のバージョンよりもカスタマイズしやすくなっています。

ツリー部分のマークを変えるのはツリー化スクリプト ver 2の説明で触れましたので、ここではもう少し複雑なカスタマイズについて触れます。

[続きがあります]

おそらく紹介しているスクリプトでは一番人気。

ツリー化スクリプト ver 2では以下の機能が強化されています。

1. ツリー内部の表示順番を設定可能にした
2. ツリー表示をよりカスタマイズできるようにした
3. ばらばらになっていた、エントリーリストのツリー化・コメントリストのツリー化・リンクリストのツリー化をひとつに統合した
4. エラーチェックを強化した
5. コメント・トラックバックリストでは項目のチェックをより厳密にした
6. コメント・トラックバックリストではエントリータイトルでリンクするようにした

5番目の変更点により、今までコメント・トラックバックリストでエントリータイトルに関わりなく各エントリーに対して正しくツリー化されるようになりました。

6番目は変えるかどうか少し迷ったのですが、エントリータイトルでリンクした方が直感的だろうと判断して変更しました。

設置する際の大きな変更点はおそらく1番目と2番目です。これらの変更により柔軟なカスタマイズが出来ると思います。

[続きがあります]

カスタマイズに関して言うと、JUGEMのテンプレートの仕様には大きな特徴があります。

まず第一に、デザイン的・機能的に優れているテンプレートベースが用意されていると言う点です。

システム側で用意する標準のテンプレートと言うのはただ数があればよいというわけでなく、それぞれきちんと特徴を持っていて、変更を加えやすいかどうかというのがひとつのポイントとなります(テンプレート、ひな形ですから)。

また、用意された全てのテンプレートが同等に扱われているのも特徴です。「このテンプレートはhtmlまでいじれる上級者向けのテンプレートだよ」というようなテンプレートに対して差別化がありません。

これは実はカスタマイズを紹介する上で大きなポイントです。全てのテンプレートが同等なので、テンプレートのベースを変更してもテンプレートカスタマイズの手法は基本的に同じように適用できます。

次に、全てのテンプレートに対してスタイルシートだけでなく、html部分まで変更ができます。

html部分は独自タグや独自ブロックの動作を少し理解する必要がありますが、それほど難解な動作をするわけではありませんし、それさえ理解できれば、かなり自由なカスタマイズが可能になります。

独自タグや独自ブロックについては、るむりんさんがまとめられたJUGEMchu!で詳しく解説されています。ここでも解説することがありますが、カスタマイズしたいという方は一度JUGEMchu!をご覧になることをお勧めします。

そして、htmlテンプレートがひとつだけであるというのも特徴です。

複数のテンプレートを保持できますが、それぞれのテンプレートについてhtmlテンプレートひとつ、cssテンプレートひとつという構成は変わりません。

これは言い換えれば、個別記事に対するテンプレートはコレで、トップページに対するテンプレートはコレを修正する必要があるという切り分けが必要ないということです。

この特徴によって、管理しやすくなっていて、デザインの統一化が容易になります。ひとつだけしかないことから来る制限も出てきてしまうのは確かなのですが、機能の多様さと管理の容易さのバランスがちょうど良い具合にまとまっています。

更新日付が変更され、難易度記述のある記事は加筆・修正されたものになります。

基礎編・応用編・実践編とカテゴリー分けされる記事ですが、それぞれの記事の冒頭に「難易度」を記述しようかと思います。

難易度は初級から上級までの三段階(★の数で表示します)が基本です。

基礎編の場合はその内容の専門度によって変わります。初級(★)の場合は特に前提知識を必要としない内容にしようかと思っています。上級(★★★)になるとある程度の知識を前提に記述します。

応用編・実践編の場合は単純に設置の難しさや複雑さを示す指針になる予定です。これまでのスクリプトを例に挙げると、「ひよこ」ボタンをコメントにも……は初級(★)で、コメント・トラックバックの別窓表示あたりは上級(★★★)になります。上級と言っても、設置が複雑になるだけで手順通りに設置していただければおそらく設置自体は可能です。

無論、設置が複雑になる分、応用するためにはそれなりの知識が必要になります。記事内で利用されているテンプレート以外のテンプレートを利用されている場合、うまく設置できない場合もあります。

記事をご覧頂く際の参考にしていただければと思います。