今回はSeesaaブログさんで各ページのデザインを別のものにする方法をご紹介します。

■TOPページ(サイト名から来た場合のページ)
■記事ページ(各記事のタイトルから来た場合のページ)
■カテゴリページ(カテゴリを選んで見るページ)
■過去ログページ(過去ログ(月別)を選んで見るページ)


Seesaaさんは↑の4つのページで構成されていて、それぞれ別のデザインにする事が可能です。

わざわざ別のデザインに変える必要はありませんが、訪問される方がサイトトップから
訪問して下さるとは限りません。検索サイトさんなどから各記事に、各カテゴリに訪問される
場合も多くあります。
そんな時にそれぞれのページにあった見やすい工夫をするだけでも、来て下さった方が
他の記事も見てみようという気になって下さるかも知れません^^
―――――――――――――――――――――――――――――――――

1:テンプレート管理を開く→テンプレート一覧へ

2:「テンプレートを追加」をクリックし、好きなデザインのテンプレートを追加する。
  4つとも同じデザインのものを追加しても、全く違うものを追加しても構いません。
  全く違う雰囲気にしたいのであれば別のデザインの物を追加して下さい。

3:それぞれの「コンテンツ/追加・変更」でサイドバーに表示させたい物や順番を
  お好きな様に設定します。(並び順は数値を変える事で変更出来ます)

それぞれ変更が終わったら、テンプレート一覧に戻り「TOP」「記事」「過去ログ」
「カテゴリ」の所の丸ぽちを指定して(どれを記事用、カテゴリ用などご自分で決めて下さい)
「テンプレート指定」をクリック。

その後は「再構築」で”すべて”を選んで再構築すればそれぞれ違ったデザインに変更されます。

ただし、全く別のデザインのテンプレートを選んだ場合は見栄えなどの点から出来れば
CSSをいじれる方が良いと思います。
CSSに関してはまた少しずつここでご紹介して参りますm(_ _)m

当サイトではトップページ・カテゴリページは両サイドバー、記事ページは右サイドバーのみ
といった感じの変更や、サイドバーに表示させる順番やアイテムも各ページで別にしています。

【追記】
2005年3月より、HTMLを編集出来るようになりました。
それに伴い多少、この記事で書いた設定方法と変更になっている部分があります。
当サイト関連記事⇒Seesaaブログをカスタマイズ?【その3】

その他のSeesaaカスタマイズ関連カテゴリ⇒Seesaaをカスタマイズ?

↓情報を色々集めるなら
人気ブログランキング
2004年10月09日




■ コメントはこちらからお願いします ■  ※宣伝・誘導と判断されるものは削除します。
お名前:

メールアドレス:

ホームページアドレス:

コメント:

■ コメントありがとうございました ■
いつも楽しみに拝見しています。
今日の記事も、すごく良いタイミングでした。
昨日、seesaaの新しいテンプレートの中に気に入ったものがあったので、
それを今までの自分のブログのテイストのまま変化させようと奮闘していたんです。
CSSを理解していないのでやみくもにいじり倒して、なんとか完成。
ただ、その時に「各ページのデザインを別のものにすることが出来るらしい」
というのに気づいたんです。
でも、それが具体的にイメージできない!
手を出してみたいけれど、どうしようかなぁ?よくわかんないし・・・という状態だったんです。

記事を書くよりも、外見を整えるほうに精力を傾けてしまうバカな私、
Berryさんのサイドバー構成を参考にして、
さっそく変えたくなってきちゃいました。
Posted by うわわ at 2004年10月10日 23:25
>ブロガーズ・ランキング様
はじめましてm(_ _)m ご連絡ありがとうございます。

サイトを今色々といじっている最中なので
落ち着きましたら登録させて頂きます^^


>うわわさん
こんばんわ〜^^
良いタイミングで良かったです★
新しいテンプレート、私もいいなって思ったんですよ〜。

うわわさんのサイト、すごいきれいで見やすくて
私の方こそ見習わないとなぁ〜って思ってます^^
本当はもっと全く違うデザインにした方が皆さんの参考になるかな〜と、
この記事を書く前にデザイン変えようかな。。と思ったものの
私、ものすごく飽きっぽいので集中して出来なくて(^^;
何だか中途半端なまま『また今度』状態ですw
この性格を直さないと(@_@;)
Posted by Berry@管理人 at 2004年10月11日 03:48
こんにちは^^

私もこっちへ来て1ヶ月・・・
そろそろカスタマイズしようかと思っていたところでした。。。^^

トラックバックいただきました♪
Posted by stream at 2004年10月11日 11:48
streamさん、こんばんわ^^
トラバありがとうございます!

私も、変えたばかりのクセにもう変えたいな〜なんてw
飽きっぽいのが私の問題です(^^;
Posted by Berry@管理人 at 2004年10月11日 21:25
初めまして。minamiと申します。
昨日ここ(seesaaブログ)に申し込んだばかりです。
使い方がヘルプじゃイマイチ分からず、検索していてこちらにたどり着きました。
ブログの使い方からアフィリエイトについて、私の知りたい情報がたくさんあって嬉しかったです♪
事後報告になりますが、リンク貼らせていただきました。(seesaaではありませんが・・・)
seesaaはまだ手つかずなもので(^^;
こちらで色々勉強させていただいて、またお邪魔させていただきます(^-^)
Posted by minami at 2004年11月06日 17:39
>minamiさん
はじめまして&コメントありがとうございます^^

Seesaaは使い方のサポートが全くされていないのが困りますよね(^^;
でも使い方さえ分かればすごく使いやすいブログですよ♪
お役に立てるように頑張りますm(_ _)m

おまけにリンクまで。。本当にありがとうございます!
こちらにも貼らせて頂きます^^
これからもよろしくお願いしますvv
Posted by Berry@管理人 at 2004年11月06日 21:59
初めまして。sachicafe と申します。
今日、登録してみました。で、必死にカスタマイズ中です。

すごく、参考にさせていただいています!
ありがとうございます。
Posted by sachicafe at 2005年01月18日 18:49
>sachicafeさん
はじめまして^^
お役に立ててすごくうれしいです!
Seesaaさんは使い慣れれば本当に使い易いブログですよ♪

サイト拝見させて頂きました。
すっごくイラストカワイイですね(>▽<)★
私もsachicafeさんのようなイラストが描けたらいいのになぁって
本当に思います。。。絵心なくって(^^;
よろしかったらまたいらして下さい!
私も伺います♪
Posted by Berry@管理人 at 2005年01月18日 20:08
おじゃまします〜^^

Berryさんの記事を読ませていただいて、
初めてこのことを知りましたので、
テンプレをリニューアルしたついでに、
各ページでデザインを変えてみました☆

記事中にリンク貼らせていただきました。
(といっても、うちレベルでは、
残念ながらあまり宣伝効果は期待できませんが・・・すみません)

トラックバックさせていただきます。
よろしくお願いします。
Posted by 天鐘 at 2005年05月13日 18:34
>天鐘さん

いらっしゃいませ〜^^
多少面倒なものの、個々のページで全く違うデザインにする事が可能な所が
私が特にSeesaaさんのファンの理由の1つだったりします★
作ろうと思えば普通のサイトの様に変える事も可能だったり無料でここまで出来るのは
本当にありがたいです♪

記事中にリンク貼らせていただきました。
(といっても、うちレベルでは、残念ながらあまり宣伝効果は期待できませんが・・・すみません)

いえいえ、そんな宣伝効果なんて気にしませんよ〜。
逆にこんなサイトを紹介して頂けるだけでも本当にうれしいです^^
Posted by Berry@管理人 at 2005年05月13日 23:26
Berryさん、先日は画像の事で本当にお世話になりました。思ったページになり本当に感謝しています。
日々ページを作っているとやはりこうしたい、ああしたいと思うもので、またまた質問が出来ました。

初歩的な事かも知れないのですが...
楽天のサイトにはトップにフリーページという所があります。これは日記を書いても常に一番上に表示されているのですが、こういうページはブログではできないのでしょうか?

この間の画像の下にスペースを開けてトップのテンプレートを貼るとかじゃダメですよね?(いろいろ探していてダメと書いてあったような気がしました。)またお時間ある時にアドバイス御願いできると嬉しいです。
よろしく御願いいたします。
Posted by まあるいお月様 at 2005年10月24日 00:15
>まあるいお月様

いらっしゃいませ^^

>楽天のサイトにはトップにフリーページという所があります。
>日記を書いても常に一番上に表示されているのですが、こういうページはブログではできないのでしょうか?

ええと、このブログのトップページの「アクセスの多いカテゴリはこちら」みたいな感じのですか?
それとも、楽天さんのどのページにも表示されるコンテンツバー(トップ・日記・フリマ〜みたいなの)ですか?

―――――――――――――――――――――――――――――――

1:【デザイン】→【コンテンツ】の順に開きます。

2:「新しいコンテンツの追加」という所を使用して・・・
  種類:自由形式(注:サイドバーと同じタイトル部分デザインを利用したい場合は
自由形式ではなく、「お気に入りリンク」)を選択

  追加先ページ:全ページ同じ位置に表示させたいのであれば「全ページ」、トップだけ、
  記事ページだけ〜という形であれば、表示させたいページを選択

  配置:表示させたい部分(記事の上や下なら「メイン」)を選択

  並び順:お好きな数値(記事の上なら下にある記事ページよりも少ない数値、
  下ならばそれより大きい数値)を選択

3:「コンテンツの追加」をクリック。すると新しい画面が開きますので、そこへ楽天さんの
  フリーページのようにページソースを作って行って下さい。
  タイトルは、何でもご自分の分かりやすいものを。
  (もし、手順1で「お気に入りリンク」を選んだ場合はタイトルの所に表示させるタイトル、
  挿入テキスト(下部)に、ソースを入れていきます。)

4:ソース作成終了したら、すぐ下にある「保存」をクリックし、再構築→全部を。

―――――――――――――――――――――――――――――――

もし、ツールバーみたいな方の事でしたら、手順2で必ず「自由形式」を選択し、
表示位置を「ヘッダー」にして下さい。並び順はブログタイトルや説明の数値よりも必ず
大きい数値にして下さい^^

こんな感じで試して頂けますか? よろしくお願いしますm(_ _)m
Posted by Berry@管理人 at 2005年10月24日 18:53
Berryさん、いつもすばやく、しかもかゆい所に手が届く!的確なアドバイスありがとうございます。

>ええと、このブログのトップページの「アクセスの多いカテゴリはこちら」みたいな感じのですか?

そうです!そうです!私Breeyさんのブログはこのページがお気に入りになってるので(トツプページがお気に入りになっていなかったので)気付きませんでした。

すごい!出来るんですね。まだページは出来ていないんですが早速挑戦したいと思います。またまたやる気が沸いてきました。
本当にありがとうございます。頑張りますのでこれからもよろしく御願いいたします。
Posted by まあるいお月様 at 2005年10月24日 21:49
Berryさん、早速やってみました。自由形式でテンプレートを貼り付けたらちゃんとできました。ありがとうございます。
まだ試作段階でアップしてませんが...というのも...

今は右側とメインの2つなのですが、これを左、メイン、右の3つにするのに悪戦苦闘中です。
他のサイトでその方法を見つけたのですが、なかなか上手くいきません。
というか、説明がよくわからない(^^ゞ。
いつもBerryさんのわかりやすい説明がどれだけすばらしいか良くわかりました。

最初に3つのテンプレを選べばよかったと後悔してます。
でも配色などガーベーラのデザインが気に入っていたのでこのまま使いたいと思ってます。
もう少し頑張ってみます。なにかアドバイスがあれば御願いします。
またこんな参考書がいいよとかあれば教えて下さい。

Posted by まあるいお月様 at 2005年10月25日 15:15
>まあるいお月様

いらっしゃいませ^^

>今は右側とメインの2つなのですが、これを左、メイン、右の3つにするのに悪戦苦闘中です。
>他のサイトでその方法を見つけたのですが、なかなか上手くいきません。

大丈夫です、ガーベラを使ってもサイドバーを両方にする事は可能ですよ^^
ええと、このサイトを例に出してしまって申し訳ないのですが・・(^^;
まあるいお月様のご希望はどちらになりますか?

A:このサイトの様に記事ページはメインと右サイドのみ、トップは両サイド・・という風に異なったデザインにする。

B:全てのページ(トップ・記事・過去・カテゴリ)を両サイドバーにする。

どちらを希望するかでいじる場所が変わるので(ちなみにAの方が作業が難しくなります)
ご希望を教えていただけると幸いです^^

>またこんな参考書がいいよとかあれば教えて下さい。

以前、記事にしたのですが⇒http://blue-berry.seesaa.net/article/3671667.html
この独自タグの意味を覚えて(ここに書いたのはこれでもほんの一部です)
その上で、HTMLとCSSも把握していないとカスタマイズは難しいという特殊仕様のせいか
関連書籍って今の段階では出ていない様なんです(^^;

ただ、HTMLやCSSの記述の仕方を覚えておけばいじりやすくなるのは確かです^^
インプレスという出版社さんが出している辞典シリーズ(色々な種類があります)
は、ちょっとお値段張りますが(¥2000〜)、”こうしたい時はこのソースを”っていう
感じで辞典なだけにたくさんのソースが載っているのであると便利です♪
Posted by Berry@管理人 at 2005年10月25日 16:19
Breeyさん こんばんは。
さっき本屋さんでいろいろ見てきました。でも数冊しかなくて...後日大きな本屋さんに行こうと思っています。

他サイトで見たときもA,Bどちらもやり方が書いてありましたが、さっぱりわからず...私の理解力の問題もありますが...

出来ればAの方が記事のみ読む時に幅が広くて読みやすいですよね?
3列の時のメインの記事は2列になった時には自動的に幅がかわるということでしょうか?

というのも私の記事のところで使っているテンプレートの設定のせいなのかわかりませんが、幅の数値が広い時にはサイドバーが落ちてしまう時があるんです。そのたびに幅を変える事が数回ありました。
(今朝教えていただいた「新しいコンテンツの追加」の時も新しいトップ用のテンプレをいれて見たんですが幅が広かったのかサイドが落ちてしまいました。でも幅を縮めて何度か試したら戻りました。)

希望はAにしたいと思っていますが、今の私の力ではBが妥当かも...
もしお手数でなければAを教えていただけますか?
いつもいつも早く回答して頂いて恐縮してます。
Breeyさんもいっぱい回答するので大変ですよね。時間があるときで本当に構いませんのでよろしく御願いします。
Posted by まあるいお月様 at 2005年10月25日 21:58
>まあるいお月様

お返事遅くなりまして申し訳ありません(><)

まあるいお月様のおっしゃっている右サイドバーが落ちるという現象は、
記事コンテンツ部分、またはサイドバー部分に設定幅よりも大きすぎる物を置くと起こります。

#container(サイト全体)、#content(メイン部分)、#links(右サイドバー)、#links-left(左サイドバー)

↑これらの4ヶ所の部分にそれぞれ width:○○px; という部分があります。
ここの数値を変えていく事でそれぞれの幅が変わります。
ただし、#containerに設定する数値よりも、他3つ部分の数値を足した合計の数値が
小さくなるように設定して下さい。そうしないとサイト全体より中身が大きすぎ=落ちる事になります。

―――――――――――――――――――――――――――――――
ではAタイプのカスタマイズに入ります^^

【スタイルシート:下準備】
1:「デザイン」→「スタイルシート」の順に開いたページに出てくるソースを全てコピーして下さい。

2:同画面、左側に【ページ】という部分があります。
  これの「記事」「過去ログ」「カテゴリ」それぞれに手順1でコピーしたソースを
  丸々貼り付けて下さい。(それぞれのページで「スタイルシートを保存するボタン」を貼り付け後必ず
  押して下さいね^^)

こうする事によって、各ページで違うスタイルシートデザインにする事が出来るようになります。

【スタイルシート:カスタマイズ】
1:同画面の同じ場所「ページ」から、両サイドバーにしたいページのスタイルシートを開きます。

2:そのスタイルシートから

#links-left {
}
#links {
font-weight:normal;
width:226px;
float:left;
margin-top:10px;
margin-left:20px;
}

という部分を見つけて下さい。そして#linksのかっこ内にあるソースをひとまずそのまま
コピーして、すぐ上の#links-leftのかっこの間に貼り付けて下さい。

3:数値を直して行きます。例としてガーベラの元々設定されている数値でお話します^^

#containerの数値がwidth:769px; です。
手順2の後は両サイドバーになっていますので・・・・

【#links width:226px;】+【#links-left width:226px;】+【#content width:500px;】
+【#links margin-left:20px;】+【#links-left margin-left:20px;】+
【#content margin-left:4px;】=合計の数値【996PX】

このままだと、#containerの数値769をはるかに上まってしまいます(^^;
そこで、#containerの数値を増やすか、または他3つ部分の数値を減らすなどして
#containerに全てが収まるようにして下さい。

(marginは記事部分とサイドバー部分の間の余白の所を設定出来ます。
右に余白を空けるならmargin-right:○px;  左に余白を空けるならmargin-left:○px; とします)

これで一旦保存して下さい。

―――――――――――――――――――――――――――――――
【コンテンツをカスタマイズ】
スタイルシートをいじったら、今度はコンテンツの表示位置を変更していきます。

コンテンツページを開き、現在右にある物で左にしたいものがあれば左サイドバーに変更します。

・・・ただし、タイプAのようにページごとに両サイドバーOR片側という設定にしたい場合は以下の手順が必要になります。
例として【最近のコメント】を挙げて説明します^^

1:デフォルトだと表示するページが「全ページ」になっています。
 これを変更するためには、まず一旦「全ページ」から「トップページ」に変えて下さい。(ここで一旦保存)

2:同画面の上にある「新しいコンテンツの追加」から以下の3つを作ります

 種類:最近のコメント 追加先ページ:過去ログ 配置:表示したい所 並び順:配置したい位置になる数値

 種類:最近のコメント 追加先ページ:記事ページ 配置:表示したい所 並び順:配置したい位置になる数値

 種類:最近のコメント 追加先ページ:カテゴリページ 配置:表示したい所 並び順:配置したい位置になる数値

(↑それぞれ保存毎に必ず保存して下さい。)

3:手順1、2を終了すると同じコンテンツが合計4つ出来た事になります。
  この配置&ページを右やら左、メイン・・・など変えて行く事でそれぞれのページで
  配置場所、配置したいアイテムを変えて行く事が出来るようになります^^

これで再構築⇒全部をかけて下さい。

―――――――――――――――――――――――――――――――
例えばトップページのみを両サイドバーにしたいのであれば、スタイルシートのカスタマイズは
トップページのみ行い、コンテンツもその分↑上記のように用意し、トップページのコンテンツのみ
左におきたいものを、表示→トップ 配置→左サイドバー ・・のようにします。

う〜ん、長くなった上に分かりづらくて申し訳ありません(^^;
Posted by Berry@管理人 at 2005年10月28日 17:26
Berryさん、「ブロガーが選ぶブログ大賞」のお仕事が忙しい中ありがとうございます。
まだ解説を読んだだけなのですが、他サイトよりもとてもわかりやすくこれなら未熟な私でも出来るかも...と期待しています。

あのあと本屋さんでHTML&スタイルシートレイアウトブックというのを買ってみました。こんなレイアウトにするならというのが写真がついていて、なんとなく私にもわかるかもと思い決めました。というか,他のは文字が多くてわかりにくかったので(^^ゞ

また数日前に新しいクリスマスのサイトを作って今は2列でアップしているのですが、それも3列にしようかとも思っています。

Berryさんの解説で3列のレイアウトにできるよう順を追ってカスタマイズしていきたいと思います。また出来ました!!報告が出来るよう頑張ります。ありがとうございました。
Posted by まあるいお月様 at 2005年10月29日 10:47
Berryさん、こんにちは。今から教えていただいた事に取り掛かろうとしていたところ、変な事に気が付きました...

検索語句と言うところが右サイドバーにありますよね。ココでは自分のサイトの中のものが検索できると思うのですが、ココで検索して出た記事の画像がみんな大きく流れてしまっているのです。
これはhttp://attaraiikamo.seesaa.net/  もhttp://attaraiikamo-xmas.seesaa.net/ もどちらも同じでした。

私が再構築する時に失敗したりしてなっているのか、それともこういうものなのか?今まで気が付かなかったのですが気になってしまって,,,

どこに書き込みしていいのかわからず続きで書き込みしました。Berryさんのこのサイトにはこの検索語句と言うところありませんよね?
もし何かわかれば教えて下さい。よろしく御願いいたします。
Posted by まあるいお月様 at 2005年10月29日 15:45
検索語句の続きですが...
検索して別ページで出てくる画像が変なので、カテゴリーも別ページで画像がでるから(こちらはちゃんと表示されます)と思い両方のHTMLを比べてみてるのでがわかりません。

取り合えず何かの手がかりになるかと思い検索語句の方載せます。


<% content.title %>

<% content.header -%>
検索語句



<% content.footer -%>



どこか指定が変だから画像が流れてしまうんですよね?
引き続き考えてみます。
Posted by まあるいお月様 at 2005年10月29日 17:44
>まあるいお月様

では、はじめにご質問のお答えから^^

検索語句の結果ページの事なのですが、よく見て頂くと画像以外の文章も改行されずに、
全部繋がって表示されるかと思うのですが、これSeesaaさん自体のシステムの不都合のようで
どこのサイトさんも同じようにおかしく表示されてしまうようです。

そのため、こちらからどうする事も出来ず(修正できず)、それで私の所では使用していなかったりします(^^;
その代わりにつけてるのが→記事ページの右側にあるグーグルさんの検索ツールバーです。
他にヤフーさんなども提供されていらっしゃるのですが、通常の検索+自分のサイトページの検索の
両方をこなしてくれるものなので、もしどうしても検索機能が必要であれば、
そういったものを使用されてみても良いかもです^^

。。。お役に立てず申し訳ありません(><) 私も何か方法ないか今一度試してみます〜。

「HTML&スタイルシートレイアウトブック」、本屋さんで見かけた時に、欲しいかも♪って思った本です^^ 
HTMLとCSSが両方載ってるのでブログには使い易いと思います^^
Posted by Berry@管理人 at 2005年10月29日 18:30
Berryさん、こんばんは☆
>Seesaaさん自体のシステムの不都合のようで
>どこのサイトさんも同じようにおかしく表示されてしまうようです。

そうだったんですね。自分だけ変かと思っていたので慌てました。
表示が変なのは気になるので私も外そうと思います。
疑問が解けてすっきりしました。ありがとうございました。
本当にこちらのサイトがあるのはありがたいです。
Posted by まあるいお月様 at 2005年10月29日 21:31
>まあるいお月様

お返事大変遅くなりまして申し訳ありませんでした。
おやしらずを抜いて弱っています(笑)

以前から、検索結果ページがおかしいというお話は色々な方から出てるようなのですが、
(Seesaaさんの開発ブログみたいな所のコメント覧で)
今だ特に対策されたというお話がないんです(^^;
記事が増えてくるとやはり検索窓は欲しいですし、早く直ってくれると良いのですが・・・^^
Posted by Berry@管理人 at 2005年11月03日 13:25
Berryさんこんにちは。以前にもいろいろと教えていただき、大変参考になったのでまたまた来てしまいました。最近の投稿がないようですが、質問してもよいでしょうか?TOPのところで表示される記事のことなのですが、設定した件数が表示されていて、それ以上の記事を>>次や>>2などで表示させたいのですがどうやっても出来ません。
カテゴリーのページでは>>次なのがあるので、そこから同じようにしようとトライしていますが、何度やってもダメ...
最後の頼みの綱とこちらに伺いました。お時間がある時でいいのでお力を貸していただけると嬉しいです。よろしくお願いいたします。
Posted by まあるいお月様 at 2006年11月20日 16:27
■ この記事へのTrackBack URLはこちら ■  http://blog.seesaa.jp/tb/772385
左サイドバーには新着記事を表示しよう!
SEM/SEO対策さんの記事でキーワード注目度では 英語の論文は、重要な概念が必ず文章の最初に現れる 米国生まれのGoogleは「頭括式」を採用しています。つまり、重要なキーワードはHPの..
ブログ☆GoogleAdSenseでアフィリエイト
2005-01-20 21:30
改装御礼 ニ
改装第2弾です! 今回もまた、Lazy Crazy*Blog!!!!さんからテンプレをお借りしました。 lazy_crazyさんのテンプレは他にもありますので、 興味のある方はこちらをどうぞ☆ そ..
誰が地球のねじを捲いているんだろう
2005-05-13 19:16
CSSカスタマイズ 2
以前カスタマイズしたときに参考にしたサイトの他にも 参考になるサイトはないかと探してみました。 いつくか見つけることができました。 まだ、詳しくは見ていないけど 少しずつ参考にさせていただこうかと思..
みりゅ〜
2005-07-31 23:24
アクセス解析 無料レンタル 無料レンタル
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。