Fri,May 06,2005

自作配布CSSテンプレの使い方

前からどうしようか考えつつちっともまとめていなかった「配布テンプレの使い方」をなんとかまとめてみました。
これに関しては、Seesaaがリニュアルする度に変更がかかってしまう部分である、というのもあって、積極的に力入れて説明したくない、という事情があったのですがそんなことは秘密。

2005.5現在のSeesaaブログの管理画面で作成した、自作配布CSSテンプレの使い方の基本です。あまり細かいことは説明してありませんが、参考になれば。
(※その他の注意事項の部分を2006.09に修正しました)
(※2007.02,03・Seesaaの管理画面リニュアルに伴い、軽く修正しました)
※基本的にはどの方が配布されているものにも使えるものではありますが、取り扱い方がしっかり書かれているものもありますので、その場合はきちんとそれらに目を通してそちらに従って下さい。
  1. 「マイ・ブログ」からログイン

  2. 配布CSSを使いたいブログの「デザイン」→「デザイン一覧」クリック
    temp01.gif

  3. 指定があればそのテンプレを、そうでない場合はデザインが同じもの(右サイドバー・左サイドバー・両サイドバー・サイドバーなし)のどれでもいいので選択(Sample画像の右下でcheck) ※なるべく新しく、なおかつタイアップ系のものではないテンプレがいいかと(HTMLの記述の差・または余計なプラグインが付く可能性があるので)
    今回は右サイドバーをSampleにします
    とりあえず比較的新しい「和柄」を選択して、画像の下あたりにカーソルを持っていくと出てくる「追加する」をクリック
    temp02.gif

  4. 更に「追加」クリック
    temp03.gif

  5. 「和柄」クリック
    temp04.gif

  6. 「スタイルシート」の部分にカーソルを持っていってクリック、「全て選択」(Macは「Ctrol+A」)して消去してしまい、使いたい配布CSSをそこに貼り付けます(先にそのCSSをコピーなりしておくor別窓で開いておくといいかと)

    temp05.gif

  7. 「スタイルシートを変更する」クリック(その前に「プレビュー」で確認するも良し※ただし、画像がある場合、このプレビュー画面では画像を確認出来ない場合があります。変更後はきちんと反映されるのでご安心を)
    temp06.gif
    ここで左にある「トップ」「記事」「過去」「カテゴリ」を選択すると、それぞれのスタイルシートの指定が出来ます。別物を指定したい場合、別々のページにそれぞれのCSSをコピー&ペーストします。
    ※私のように「トップページ」「その他」としたい場合は、トップ以外の残りページに全て同じものをコピー&ペーストします
    ココ↓
    temp09.gif

  8. 適応させていない場合は「デザイン一覧」のページに戻ってその使いたいスタイルシートを「適応」クリック

  9. 「再構築」で「スタイルシート」を選択、再構築します

以上。(多分)


■その他の注意事項

●その1・カラム違い
例えば、今まで2カラム右サイドバータイプのものを使っていたのに、今度は3カラムにしたい、左サイドバーにしたい、等という場合は、配布されているcssを変更しただけでは殆どの場合そこまで変更することが出来ません。
というのも、配布されているものは、あくまでも「css」なので、構成、つまりHTMLの部分までは修正出来ないからです。
ですから、この場合は別の修正が必要になります。
  1. 「デザイン」→「コンテンツ」クリック
    temp09.gif

  2. ドラッグ&ドロップで、したい配置に修正。(実は私のMac環境ではこれをまともに表示出来ないので画像がとれません。スミマセン。そのうち思い出したらWinでやるかも)
    以前のSeesaaのタイプのもののほうが分かりやすい方は「編集モード切替」で切り替えて、
    temol02.gif
    ↑の画面で修正をかけてもいいんじゃないかと思います。特に、私のような、ちょっと環境が劣悪な方はこちらでドウゾ。最初の画面だと反応してくれなかったり、そもそも表示出来ない事があったりするので。

  3. すべてを再構築、で完了。


●その2・画像関係
自分のブログのファイルマネージャを使って欲しい、と説明がある場合、
  1. 先ず自分のパソコンにその画像データをダウンロード

  2. 「記事投稿」→「ファイルマネージャー」クリック
    temp07.gif

  3. 「Browse…」をクリックして、そのダウンロードした画像を選んで、「アップロード」クリック
    temp08.gif

このようにしてから、指定された部分のcssを修正して下さい。

また、古いタイプでcssを配布されているところもあります。ぱっと見分かりにくいのですが、画像が反映されない場合は以下の可能性があります。↓(※このブログで私自身が配布しているものは修正済ですので直接関係しません)

2005.08.05のSeesaaメンテ以降、ファイルマネージャにアップしたファイルのURLが少々変更されてしまいました。(詳しくはこちらの記事を読んで下さい。Seesaaオフィシャルブログにとびます)
それに伴い、画像を使用しているテンプレに不都合が出てしまう事があります。上記の記事のように、アップした画像が「http://(ホスト名).up.seesaa.net/ファイルパス」というものになってしまっている場合、多分画像だけ拾えなくなってしまっていると思われますので、その場合はCSSの画像部分のデータの修正をして下さい。

こんなかんじで。
ex「image:url(image/star02.jpg)」となっている部分の、括弧内「image/star02.jpg」の前に、「http://(ホスト名).up.seesaa.net/」を追加して下さい。
「(ホスト名)」の所は、ご自分のブログのもの、例えば私のこのブログであれば「tagebuch-zweit」が入ります。
posted by sei at 00:10 | TrackBack(3) | ブログTIPS系? | 管理用
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/3459223
※言及リンクのないトラックバックは受信されません。

ヤッヴェ、もう飽きてきた!
Excerpt: テンプレの使い方の記事、ありがたいです。 リンク張らせていただきましたのでTBいたします。
Weblog: LAZY CRAZY*BLOG!!!!
Tracked: Fri,May 06,2005-01:51

《 サイト案内 》
Excerpt: リンクを付けさせていただきました。 http://blog-template.seesaa.net/      (テンプレート配布) http://blog-template.seesaa.net/s..
Weblog: ブログ・テンプレート Seesaa
Tracked: Sat,Jul 16,2005-00:51

モノクロ花(配布テンプレート・1)
Excerpt: 右サイドバー用2カラムです。 【サンプル】 使用サンプルはこちら。 【CSS&画像】 下からCSSをコピー&ペーストしてください。 body { margin:0px; pa..
Weblog: dna laboratory
Tracked: Sat,May 27,2006-22:52
×

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