Monday, February 27, 2006

よちよちブログ

PC用語もちんぷんかんぷんなまま
ブロガーテンプレートをいじってみたいと思います。

日本語訳のhelpを参考にしてますが、これって日本語なの~?と感じるくらい実は言葉がわからないのです(汗)
でも今はこれしか材料がないのですよね。ではまず、やってみましょう。


 投稿に表示/非表示のリンクを設定するにはどうすればよいですか。
Blog に長文の記事を投稿する場合は、表示と非表示を切り替えるリンクを設定すると便利です。 たとえば、最初は投稿のタイトルだけを表示しておくと、ユーザーは関心のある投稿を簡単に探して、 読みたい投稿があったときにリンクをクリックして全文を読むことができます。 読み終わったら、本文をもう一度非表示にできます。 これらの動作は 1 つのページ上で行われるため、他のページへの移動や読み込みは必要ありません。 次に方法を紹介します。

これは長文の投稿です。
実はそれほど書くこともないのですが、 この機能を説明するには、ここに十分な長さの文章を記載する必要があります。 気の利いたジョークを知っている人がいたら、 教えてください。 一人で長い文章を書くことは大変です。 しかし、これ以上続けても仕方ないので、 続きをご覧になることをお勧めします (次のリンクをクリックするとこの項目が非表示になります)。
[+/-] show/hide this post

この方法では、CSS の編集、Javascript の追加、Blogger Template タグの編集の 3 つの設定を行います。 手順は次のとおりです。

CSS の編集
最も簡単な作業です。 投稿を表示するクラスと非表示にするクラスを定義するため、スタイル シートに次の 2 行を貼り付けます。

.posthidden {display:none}
.postshown {display:inline}

スタイル シートはテンプレートの上部の タグの間にある部分です。 スタイル シートを別のファイルで作成している場合は、テンプレートではなく、そのファイルにコードを追加します。

Javascript の追加
テンプレートの タグの間に、次のコードを追加します。

このコードは、投稿の表示と非表示を切り替える働きをします。 具体的には、投稿の固有 ID を取得して、その投稿に別の CSS スタイルを適用します。

Blogger タグの編集
機能の動作に必要な設定が完了したら、次に投稿部分を編集します。 テンプレートの タグの間の、投稿を表示するセクションで、 コードを次のように編集します。


<$BlogItemTitle$>

<$BlogItemBody$>



[+/-] show/hide this post

必要な場合はテンプレートに合わせてさらに編集し、 書式タグ、署名またはコメント用のタグなどを追加します。 "[+/-] show/hide this post" のテキストは、自由に変更できます。

ここでは、<$BlogItemBody$> タグを囲む が重要な働きをします。 このセクションは最初非表示の状態で出力され、<$BlogItemNumber$>1 を使用して固有 ID が作成されます。最後の "1" は、Blog の ID がテンプレートの他の部分 (Permalink など) で既に使用されている場合に、ID が重複しないようにするためのものです。Javascript へのリンク部分では、この ID を使用して、該当する投稿の表示と非表示を切り替えています。

テンプレートの設定が完了したら、変更を保存して再構築します。 これで、すべての投稿に新しいフォーマットが自動的に適用されます。他の部分を変更する必要はありません。

注:

テンプレートに変更を加える際は、事前にバックアップをとっておくことをお勧めします。 変更が失敗した場合に元の状態に戻せるよう、コードをすべてコピーしてテキスト ファイルに貼り付け、コンピュータに保存します。
投稿の表示と非表示を切り替えるには、投稿の要約を作成する方法もあります。 この方法のメリットとデメリットは次のとおりです。
メリット: 変更が必要なのはテンプレートだけで、投稿自体を編集する必要はありません。
デメリット: 投稿のタイトルだけが表示され、要約は表示されません。 この機能はすべての投稿に適用されるため、長文の場合のみこの機能を使用するなど、投稿に応じて設定することはできません。

No comments: