Seesaa デザインテンプレート http://template.seesaa.net/ 非公認：Seesaa Blog内で利用できるテンプレートの配布とHTMLカスタマイズTIPS。 ja Seesaa用テンプレートサイト募集 http://template.seesaa.net/article/5282938.html Seesaa用のテンプレートを初めて作ってから１年ほど経過しました。当時、テンプレートを配布していたサイトは少なかったのですが、最近になって徐々に増えてるんじゃないだろうかと感じています。ところが、検索で探すもそれほど見つからない^^：もし、「テンプレートを作成してるよ」「ここがが配布してるよ」という方がおりましたら、トラックバックか、コメントに書き込んでいただけるとありがたいです。※自薦・他薦どちらでも。できれば作成したテンプレートの一覧ページなんかもリンクしてくれると、探... 日記 えびす 2005-07-22T21:37:03+09:00
ところが、検索で探すもそれほど見つからない＾＾：
もし、「テンプレートを作成してるよ」「ここがが配布してるよ」という方がおりましたら、トラックバックか、コメントに書き込んでいただけるとありがたいです。
※自薦・他薦どちらでも。


できれば作成したテンプレートの一覧ページなんかもリンクしてくれると、探している人に喜んでもえるかもです。


こんな感じで。
ブログ・テンプレート Seesaa
一覧サンプル集


※コメント・トラックバック欄でテンプレート配布サイトの一覧を確認できるようにしたほうが便利なので、個別に返信いたしません。あしからーず。 ]]> 求む：ブログデザインツールの動作テスト告知協力 http://template.seesaa.net/article/2853384.html PETさんがブログのデザイン（CSS）を簡単に変更できるツールを開発中です。ツール自体は形になっており、現在はIEでスクリプトが皆さんの環境で動作するかテスト中のようです。配色やレイアウトを確認しながら変更できる便利なツールです。おもしろそうと感じたら、ぜひ動作テストにご協力くださいね。PETさんを質問攻めにしちゃいますと返信でアップアップになっちゃいますので、今回は動作報告のみということでお願いいたします。動作報告の数は多いほどよいと思います。ブログをお持ちの方は、この記事... 日記 えびす 2005-04-08T20:32:49+09:00
use9.jpg

use3.jpg

配色やレイアウトを確認しながら変更できる便利なツールです。おもしろそうと感じたら、ぜひ動作テストにご協力くださいね。

PETさんを質問攻めにしちゃいますと返信でアップアップになっちゃいますので、今回は動作報告のみということでお願いいたします。

動作報告の数は多いほどよいと思います。ブログをお持ちの方は、この記事を紹介していただいて、トラックバックを送っていただけるとありがたいです。


以下、PETさんのコメントです。
------------------------------------------
皆様
http://style.yarea.net/オンラインのＣＳＳエディタなのですが、
うまく動作しないとの報告を受けております。
環境により違う可能性がありますので
動作テストに協力していただけないでしょうか？
コメントいただけるとありがたいです。
よろしくお願いします。
------------------------------------------

動作報告はhttp://styletanuki.seesaa.net/のコメント欄へお願いします。

なかなかこういうツールを作るというのは骨がおれるものでありまして、実はわたしも作りかけでほったらかしであります。

作ろうとする人自体がそう多くありませんので、応援の意味もこめて、協力しちゃいましょう。どうぞよろしくです。 ]]> Seesaaブログへ提案してみるの話 http://template.seesaa.net/article/2663832.html 先ほど、Seesaaの問い合わせフォームへ以下の提案を提出しました。いつか実装されるといいな。良い子は寝て待つ。-----------------先日のHTML編集機能が実装されたことで、Seesaaブログのカスタマイズ性は格段によくなったと感じています。現在の形でもテンプレート機能はできあがっておりますが、次のような機能の追加を、次回ご検討いただければと思います。・HTML編集＋CSSの一括エクスポート機能・同上の一括インポート機能※ログの一括エクスポートのイメージです。手... 日記 えびす 2005-03-29T02:26:52+09:00 いつか実装されるといいな。良い子は寝て待つ。

-----------------

先日のHTML編集機能が実装されたことで、Seesaaブログのカスタマイズ性は格段によくなったと感じています。

現在の形でもテンプレート機能はできあがっておりますが、次のような機能の追加を、次回ご検討いただければと思います。

・HTML編集＋CSSの一括エクスポート機能
・同上の一括インポート機能

※ログの一括エクスポートのイメージです。

手軽にテンプレートを配布できる方法があれば、後はユーザー間でテンプレート配布コミュニティーが育っていくと思われますので、ご検討いただければ幸いです。どうぞよろしくお願いいたします。 ]]> 階層化メニュー ブレッドリスト http://template.seesaa.net/article/2436020.html ↑のようなパンくずリストと呼ばれる階層化メニューを記事毎に追加します。「デザイン」→「コンテンツ」を開き、コンテンツ一覧から「記事」を選択します。「コンテンツHTML編集」を開いて、記事タイトル部分を探します。通常だと次のようなタグの部分です。<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a&g... テンプレートカスタマイズ えびす 2005-03-16T03:03:21+09:00
「デザイン」→「コンテンツ」を開き、コンテンツ一覧から「記事」を選択します。

「コンテンツHTML編集」を開いて、記事タイトル部分を探します。通常だと次のようなタグの部分です。

<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>

この下に、パンくず用のタグを挿入します。

<p class="breadnavi"><a href="<% blog.page_url %>">HOME</a> ⇒ <a href="<% article_category.page_url %>"><% article_category.name %></a> ⇒ この記事</p>


記事部分の中でないと、このタグは使えませんので注意です。 ]]> HTMLテンプレートカスタマイズのよくある質問が追加されました http://template.seesaa.net/article/2429371.html HTML編集の解説: 無料ブログでビジネスブログの深田さんによると、ブログ・よくある質問と回答にテンプレートタグ関連の情報が追加されたそうです。技術者向けの内容になっていますが、なんとなくでも理解できそうな人は読んでおくといいかもしれません。なお深田さんのブログで、カスタマイズまわりの情報が集まってきています。そちらもチェックしておくと吉です。 日記 えびす 2005-03-15T20:29:47+09:00 HTML編集の解説: 無料ブログでビジネスブログの深田さんによると、ブログ・よくある質問と回答にテンプレートタグ関連の情報が追加されたそうです。

技術者向けの内容になっていますが、なんとなくでも理解できそうな人は読んでおくといいかもしれません。

なお深田さんのブログで、カスタマイズまわりの情報が集まってきています。そちらもチェックしておくと吉です。 ]]> カテゴリで記事一覧を表示する [HTML+CSS] http://template.seesaa.net/article/2429125.html Seesaaブログのカスタマイズ情報です。前々からカテゴリページで記事一覧を表示させたかったので、HTMLとSeesaaのテンプレートを修正して表示させてみます。■表示例http://openblog.seesaa.net/category/488043.html※ブログ・テンプレート Seesaaの管理人さんから、サンプルソースの修正提案をいただきました。感謝。試すまえに、テストブログやテスト用のテンプレートを作って試しましょう。管理画面から「デザイン」→「コンテンツ」を選... テンプレートカスタマイズ えびす 2005-03-15T20:13:37+09:00
前々からカテゴリページで記事一覧を表示させたかったので、HTMLとSeesaaのテンプレートを修正して表示させてみます。

■表示例
http://openblog.seesaa.net/category/488043.html
※ブログ・テンプレート Seesaaの管理人さんから、サンプルソースの修正提案をいただきました。感謝。


試すまえに、テストブログやテスト用のテンプレートを作って試しましょう。

管理画面から「デザイン」→「コンテンツ」を選択。

コンテンツ一覧から、「記事」を選択。

「記事(ページコンテンツ)の設定」が表示されたら、右肩の「コンテンツHTML編集」を選択。

<% if:page_name eq 'category' -%>
<% /if -%>

という部分があるので次のように書き換える。

<% if:page_name eq 'category' -%>
<div id="clist">
<p>このカテゴリの記事一覧です。</p>
<ul>
<% loop:list_article -%>
<li><a href="<% article.page_url %>" class="a"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>
<% /if -%>


保存して、カテゴリページを再構築する。この時にブログのカテゴリページで記事一覧が表示されているか確認しておく。


次にCSSを変更して、見栄えを整えます。


管理画面から「デザイン」→「スタイルシート」を選択。

適用しているスタイルシートを選択。

スタイルシートの修正画面で、スタイルシート入力欄の最後尾に次のCSSを追加します。


/* カテゴリ記事リスト */
#clist {
text-align:left;
background:#FEFFF0;
margin: 20px;
padding: 10px;
border: 3px double #B2B2B2;
font-size: 90%;
}
#clist li {
margin-bottom: 0.6em;
font-size: 90%;
font-weight:normal;
line-height:150%;
}

最後に「スタイルシートの変更」の変更ボタンを押して完了です。念のため、全てを再構築して、他のページがおかしくなっていないか確認しておきましょう。


カテゴリページで記事リストだけの表示もできると思いますが、今回は汎用性を考えて記事＋リストを表示する設定にしました。○○の解説ブログなどで威力を発揮するんではないかと思われます。

■追記
seesaaの仕様変更により、この方法だと20記事以降が表示されないように
なっています。詳しくは次の記事をご参照ください。
徒然なるままに: Seesaaブログで件数表示を伴うカテゴリ・過去ログ別記事一覧表示 ]]> [HTML+CSS]メニューに●ポチをつけて遊ぶ http://template.seesaa.net/article/2392963.html 後半でCSS部分を追加しました。------Seesaaブログのテンプレートカスタマイズ小技です。2005年03月09日からSeesaaでHTMLのカスタマイズができるというアナウンスがありました。あれ、XHTMLだと思ってたらHTMLでしたっけ。記憶が曖昧なので深く考えずに遊んでみましょう。以前から少し気になっていたサイドメニュー内の記事を●ポチつきにしてみます。●ポチとは、下のイメージのように、ひとつの記事リンク文字先頭に●がついてる状態のこと。HTMLを知っている人なら... テンプレートカスタマイズ えびす 2005-03-13T11:26:03+09:00
------

Seesaaブログのテンプレートカスタマイズ小技です。

2005年03月09日からSeesaaでHTMLのカスタマイズができるというアナウンスがありました。あれ、XHTMLだと思ってたらHTMLでしたっけ。記憶が曖昧なので深く考えずに遊んでみましょう。

以前から少し気になっていたサイドメニュー内の記事を●ポチつきにしてみます。●ポチとは、下のイメージのように、ひとつの記事リンク文字先頭に●がついてる状態のこと。

HTMLを知っている人ならば、リスト表示にしているといえばわかりやすいでしょうか。

temp.gif

ついでに、記事リンクの下の間隔を広げて少し見やすくしてみます。所要時間は１０～１５分程度。HTML編集は初めてだという人もいるかもしれませんので、今回はできるだけわかりやすく図で手順を説明いたします。


まず、管理画面を開いて「デザイン」→「コンテンツ」へすすみます。

k_01a.gif

そのページの一覧から「新着記事」を選択。

k_01b.gif

新着記事の設定画面になりますので、右肩の「コンテンツHTML編集」を選択します。

k_01c.gif

こんな入力画面がでてきます。これが新着記事部分のテンプレートです。

k_01d.gif
※選択しているテンプレートによっては内容が違うかもしれません。


簡単にSeesaaのテンプレートタグを確認していおきます。ふらっと探しましたが現時点で詳細なヘルプやマニュアルが見つかりませんでしたので、適当な説明になっています。テンプレートの概念だとか使い方は、初めての人には難解ですので、とりあえず●ポチつけるんだという人は読み飛ばしてもよいです。

<% content.title %>
このコンテンツブロックの名前。この場合はこれが新着情報という文字に変換されます。

<% content.header -%>　～　<% content.footer -%>
コンテンツブロック開始位置　終わり位置
たぶん、この中で以下のタグを使いましょうということです。

<% loop:list_article -%>　～　<% /loop -%>
管理画面で設定した回数だけループさせます。

<% article.page_url %>
記事のアドレスに変換されます。

<% article.subject | tag_break %>
記事の見出しです。tag_break って何じゃらほい。

<% article.createstamp | date_format("%m/%d") %>
記事が作られた日付を表示 | 表示形式 %m:月　%d日
未確認：時間も指定可能ですよね？

以上のテンプレートタグが使われています。


さて●ポチですが、HTMLのリストを使います。簡単に説明すると

<ul id="newEntry">
<li>記事の見出し</li>
<li>記事の見出し</li>
<li>記事の見出し</li>
</ul>

と表示させれば、勝手に●ポチがつきますので、そうなるようにデフォルトのテンプレートを修正します。



<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<ul id="newEntry">
<% loop:list_article -%>
<li><a href="<% article.page_url %>"><% article.subject | tag_break %></a>(<% article.createstamp | date_format("%m/%d") %>)</li>
<% /loop -%>
<ul>
<% content.footer -%>
</div>


修正した点は ul id="newEntry" と li を追加しただけです。興味のある人は、どの位置に挿入したか確認してください。ul につけたid="newEntry"は、後でCSSを使ってレイアウトを調整するためです。同じ名前のid名 は一ページ中に一つだけ。今回は新着だけを修正するので、id名をつけました。

最後に保存して、再構築してみます。うまくいけば新着情報の記事リストに●ポチがついているはずです。

ちょっと、左に隙間があってかっこ悪いですか？これはCSSで修正します。

管理画面から「デザイン」　→　「スタイルシート」を開きます。

k_01e.gif

今、利用しているスタイルシートの一覧が表示されるので、タイトルをクリックします。

k_01f.gif

スタイルシートが表示されますので、その最後尾に次の命令を追加します。


//<ul id="newEntry">の上下左右マージン
ul#newEntry{
margin: 10px;
}

//<ul id="newEntry">の中にある<li>の下マージン
ul#newEntry li{
margin-bottom: 0.5em;
}


//がついている行は注意書きですので、必要ないなら消してもいいです。

入力したら画面下の「プレビュー」ボタンを押してマージンが調整されているか確認します。OKなら「スタイルシートを変更する」ボタンを押して完了です。おつかれさまでした。



--------------------------------------

これだけ別記事でまとめたいと思いますが、このHTMLテンプレートとCSSを使って自由自在にレイアウト！ということも可能です。可能でありますが、誰でも自由自在にできるというわけにはまいりません。次のような知識が必要です。


  • HTMLの文法知識

  • CSSの知識

  • Seesaaテンプレートの知識



お気づきデショウカ。HTMLとCSSで普通のホームページが作れます。＋　Seesaaテンプレートの使い方をマスターしないと自由自在にといきません。

そのうちヘルプが完備され解説サイトが増えてくれば、ソースだけコピペしてカスタマイズということができるようになりますので、しばらく待ってみるのも手ですね。

なんだか難しそうに思えるかもしれませんが、地道にコツコツ進むタイプの人なら、誰でも使いこなせるようになるのは間違いありません。ただ敷居が高そうにみえるというだけです。

「高い山があるならば、登らぬわけにはいかんだろう」という人は、がんがん遊んでください。

でも遭難することもあるので注意だぞ。 ]]> テンプレート ヌリドウォール http://template.seesaa.net/article/1073261.html 使用するテーマ：路地(右サイドバーのみ対応)レイアウト：右サイドバー&lt;br /&gt;@charset "shift_jis"; &lt;br /&gt;/* &lt;br /&gt;&lt;br /&gt;このCSSは、Seesaaブログ用です。 &lt;br /&gt;文字色、大枠レイアウトマージン、各パーツマージンと分けて記述しています。&lt;br /&gt;修正等は自由ですが、CSSに関する質問は受け付けていませんので自己責任でお願いします。&lt;br /&... シンプル えびす 2004-11-18T21:57:16+09:00 2_790kabe_s.gif
  • 使用するテーマ：路地(右サイドバーのみ対応)
  • レイアウト：右サイドバー

次のZIPファイルをダウンロードし解凍します。解凍するとテンプレートで使用する画像が入っていますので、ファイルマネージャーからimageフォルダへアップしてください。注：ファイル名は変更しませんように

image_nuri.zip

解凍ツールはLhasaが便利です。

]]> コメント欄の不具合修正 http://template.seesaa.net/article/952545.html 各テンプレートでコメントを入力する際に、コメント欄が横長に伸びてしまう不具合を修正しました。 日記 えびす 2004-11-03T18:50:19+09:00 カラーコードパレット http://template.seesaa.net/article/935664.html エディタでソースを編集しながらブラウザで確認して作る場合、背景色や文字色の指定は面倒です。そんな時に使う簡易のカラーコードを取得できるツールがこれ。カラーコードパレット専用ツールとまではいかなくても、ちょこっと色の確認が出来ると意外と便利。ダウンロードして使うタイプのツールを探す場合は、ベクターで探すとこと。ベクター「カラーコード」で検索。配色を考えるのは楽しいのだけれど、綺麗な配色って難しいのですよね^^： Blogの小技 えびす 2004-11-01T15:35:30+09:00
カラーコードパレット

専用ツールとまではいかなくても、ちょこっと色の確認が出来ると意外と便利。

ダウンロードして使うタイプのツールを探す場合は、ベクターで探すとこと。
ベクター「カラーコード」で検索。

配色を考えるのは楽しいのだけれど、綺麗な配色って難しいのですよね＾＾： ]]> Seesaaのトップで紹介していただきました。 http://template.seesaa.net/article/915946.html 京極恭輔さんのコメントを拝見して初めて気付いた。知らせていただいて、ありがとうございます。コメント通知もアクセス解析も止まっちゃってるので、ぜんぜん気付いてませんでした。※教えていただいた方を間違ってましたので修正しました（恥かしあら、Seesaaのトップ右肩で紹介されているではありませんか。あなうれしや。元気がない。うれすぃー！^^）/ いえぇいー！ 日記 えびす 2004-10-29T19:29:39+09:00 京極恭輔さんのコメントを拝見して初めて気付いた。知らせていただいて、ありがとうございます。コメント通知もアクセス解析も止まっちゃってるので、ぜんぜん気付いてませんでした。

※教えていただいた方を間違ってましたので修正しました（恥かし

あら、Seesaaのトップ右肩で紹介されているではありませんか。

あなうれしや。元気がない。
うれすぃー！＾＾）/　いえぇいー！ ]]> Seesaaブログメール通知機能追加 http://template.seesaa.net/article/763294.html Seesaaブログにコメント・トラックバックのメール通知機能が追加されました。管理画面のブログ設定から送信先メールアドレスを指定できます。やっと通知機能がついたか！というのが個人的な感想ですが、無料サービスですから管理費や設備投資費も含めて慎重だったのだと思います。ユーザーからの要望は多かったとおもいますが、それだけ手間もお金もかかることですから、Seesaaには素直に感謝の一言です。個人的には他のブログに比べてもSeesaaはいいサービスだと思うのですが、細かいカスタマイズ... 日記 えびす 2004-10-08T10:59:15+09:00
管理画面のブログ設定から送信先メールアドレスを指定できます。

やっと通知機能がついたか！というのが個人的な感想ですが、無料サービスですから管理費や設備投資費も含めて慎重だったのだと思います。ユーザーからの要望は多かったとおもいますが、それだけ手間もお金もかかることですから、Seesaaには素直に感謝の一言です。

個人的には他のブログに比べてもSeesaaはいいサービスだと思うのですが、細かいカスタマイズ機能を備えた有料版を作ってもらえないか願っていたりします。ただカスタマイズができる＝複雑な管理画面になるという心配もあるでしょうから、難しいところだと思いますが検討していただけたら幸せです。 ]]> Seesaa用テンプレ 花空 http://template.seesaa.net/article/660190.html 使用するテーマ：路地(右サイドバーのみ対応)レイアウト：右サイドバー&lt;br /&gt;@charset "shift_jis"; &lt;br /&gt;/* &lt;br /&gt;&lt;br /&gt;このCSSは、Seesaaブログ用です。 &lt;br /&gt;文字色、大枠レイアウトマージン、各パーツマージンと分けて記述しています。&lt;br /&gt;修正等は自由です、CSSに関する質問は受け付けていませんので自己責任でお願いします。&lt;br /&g... かわいい えびす 2004-09-24T12:25:34+09:00 2_790sorahana_s.gif
  • 使用するテーマ：路地(右サイドバーのみ対応)
  • レイアウト：右サイドバー

次のZIPファイルをダウンロードし解凍します。解凍するとテンプレートで使用する画像が入っていますので、ファイルマネージャーからimageフォルダへアップしてください。注：ファイル名は変更しませんように

image_hana.zip

解凍ツールはLhasaが便利です。

]]> Seesaa用テンプレート 画像付きの試作 http://template.seesaa.net/article/648983.html http://testtemplate.seesaa.netCSSだけのテンプレートもいいんだけども画像を使うと、また雰囲気も違ってくるということで、軽く試作中です。使う画像が増えるほどテンプレートの配置に時間がかかるようになるので、３・４つぐらいの画像でまとめてるのが無難なよう。 日記 えびす 2004-09-22T17:12:19+09:00 http://testtemplate.seesaa.net

CSSだけのテンプレートもいいんだけども画像を使うと、また雰囲気も違ってくるということで、軽く試作中です。

使う画像が増えるほどテンプレートの配置に時間がかかるようになるので、３・４つぐらいの画像でまとめてるのが無難なよう。 ]]> シンプルテンプレート3つ修正 http://template.seesaa.net/article/642062.html 以前から公開していたテンプレートを少し手直ししました。具体的には、CSS記述を配色やレイアウトごとにわけています。合わせて、色もちびっと変わりました。新しいテンプレートの確認はメニューのシンプルからどうぞ。 日記 えびす 2004-09-21T18:00:23+09:00
具体的には、CSS記述を配色やレイアウトごとにわけています。合わせて、色もちびっと変わりました。

新しいテンプレートの確認はメニューのシンプルからどうぞ。 ]]>