2005年03月29日
Seesaaブログへ提案してみるの話
先ほど、Seesaaの問い合わせフォームへ以下の提案を提出しました。
いつか実装されるといいな。良い子は寝て待つ。
-----------------
先日のHTML編集機能が実装されたことで、Seesaaブログのカスタマイズ性は格段によくなったと感じています。
現在の形でもテンプレート機能はできあがっておりますが、次のような機能の追加を、次回ご検討いただければと思います。
・HTML編集＋CSSの一括エクスポート機能
・同上の一括インポート機能
※ログの一括エクスポートのイメージです。
手軽にテンプレートを配布できる方法があれば、後はユーザー間でテンプレート配布コミュニティーが育っていくと思われますので、ご検討いただければ幸いです。どうぞよろしくお願いいたします。
いつか実装されるといいな。良い子は寝て待つ。
-----------------
先日のHTML編集機能が実装されたことで、Seesaaブログのカスタマイズ性は格段によくなったと感じています。
現在の形でもテンプレート機能はできあがっておりますが、次のような機能の追加を、次回ご検討いただければと思います。
・HTML編集＋CSSの一括エクスポート機能
・同上の一括インポート機能
※ログの一括エクスポートのイメージです。
手軽にテンプレートを配布できる方法があれば、後はユーザー間でテンプレート配布コミュニティーが育っていくと思われますので、ご検討いただければ幸いです。どうぞよろしくお願いいたします。
2005年03月16日
階層化メニュー ブレッドリスト
HOME ⇒ テンプレートカスタマイズ ⇒ この記事
↑のようなパンくずリストと呼ばれる階層化メニューを記事毎に追加します。
「デザイン」→「コンテンツ」を開き、コンテンツ一覧から「記事」を選択します。
「コンテンツ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編集」を開いて、記事タイトル部分を探します。通常だと次のようなタグの部分です。
<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>
記事部分の中でないと、このタグは使えませんので注意です。
2005年03月15日
HTMLテンプレートカスタマイズのよくある質問が追加されました
HTML編集の解説: 無料ブログでビジネスブログの深田さんによると、ブログ・よくある質問と回答にテンプレートタグ関連の情報が追加されたそうです。
技術者向けの内容になっていますが、なんとなくでも理解できそうな人は読んでおくといいかもしれません。
なお深田さんのブログで、カスタマイズまわりの情報が集まってきています。そちらもチェックしておくと吉です。
技術者向けの内容になっていますが、なんとなくでも理解できそうな人は読んでおくといいかもしれません。
なお深田さんのブログで、カスタマイズまわりの情報が集まってきています。そちらもチェックしておくと吉です。
カテゴリで記事一覧を表示する [HTML+CSS]
HOME ⇒ テンプレートカスタマイズ ⇒ この記事
Seesaaブログのカスタマイズ情報です。
前々からカテゴリページで記事一覧を表示させたかったので、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と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ブログで件数表示を伴うカテゴリ・過去ログ別記事一覧表示
2005年03月13日
[HTML+CSS]メニューに●ポチをつけて遊ぶ
HOME ⇒ テンプレートカスタマイズ ⇒ この記事
後半でCSS部分を追加しました。
------
Seesaaブログのテンプレートカスタマイズ小技です。
2005年03月09日からSeesaaでHTMLのカスタマイズができるというアナウンスがありました。あれ、XHTMLだと思ってたらHTMLでしたっけ。記憶が曖昧なので深く考えずに遊んでみましょう。
以前から少し気になっていたサイドメニュー内の記事を●ポチつきにしてみます。●ポチとは、下のイメージのように、ひとつの記事リンク文字先頭に●がついてる状態のこと。
HTMLを知っている人ならば、リスト表示にしているといえばわかりやすいでしょうか。
ついでに、記事リンクの下の間隔を広げて少し見やすくしてみます。所要時間は１０〜１５分程度。HTML編集は初めてだという人もいるかもしれませんので、今回はできるだけわかりやすく図で手順を説明いたします。
まず、管理画面を開いて「デザイン」→「コンテンツ」へすすみます。
そのページの一覧から「新着記事」を選択。
新着記事の設定画面になりますので、右肩の「コンテンツHTML編集」を選択します。
こんな入力画面がでてきます。これが新着記事部分のテンプレートです。
※選択しているテンプレートによっては内容が違うかもしれません。
簡単に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で修正します。
管理画面から「デザイン」 → 「スタイルシート」を開きます。
今、利用しているスタイルシートの一覧が表示されるので、タイトルをクリックします。
スタイルシートが表示されますので、その最後尾に次の命令を追加します。
//<ul id="newEntry">の上下左右マージン
ul#newEntry{
margin: 10px;
}
//<ul id="newEntry">の中にある<li>の下マージン
ul#newEntry li{
margin-bottom: 0.5em;
}
//がついている行は注意書きですので、必要ないなら消してもいいです。
入力したら画面下の「プレビュー」ボタンを押してマージンが調整されているか確認します。OKなら「スタイルシートを変更する」ボタンを押して完了です。おつかれさまでした。
--------------------------------------
これだけ別記事でまとめたいと思いますが、このHTMLテンプレートとCSSを使って自由自在にレイアウト！ということも可能です。可能でありますが、誰でも自由自在にできるというわけにはまいりません。次のような知識が必要です。
お気づきデショウカ。HTMLとCSSで普通のホームページが作れます。＋ Seesaaテンプレートの使い方をマスターしないと自由自在にといきません。
そのうちヘルプが完備され解説サイトが増えてくれば、ソースだけコピペしてカスタマイズということができるようになりますので、しばらく待ってみるのも手ですね。
なんだか難しそうに思えるかもしれませんが、地道にコツコツ進むタイプの人なら、誰でも使いこなせるようになるのは間違いありません。ただ敷居が高そうにみえるというだけです。
「高い山があるならば、登らぬわけにはいかんだろう」という人は、がんがん遊んでください。
でも遭難することもあるので注意だぞ。
------
Seesaaブログのテンプレートカスタマイズ小技です。
2005年03月09日からSeesaaでHTMLのカスタマイズができるというアナウンスがありました。あれ、XHTMLだと思ってたらHTMLでしたっけ。記憶が曖昧なので深く考えずに遊んでみましょう。
以前から少し気になっていたサイドメニュー内の記事を●ポチつきにしてみます。●ポチとは、下のイメージのように、ひとつの記事リンク文字先頭に●がついてる状態のこと。
HTMLを知っている人ならば、リスト表示にしているといえばわかりやすいでしょうか。
ついでに、記事リンクの下の間隔を広げて少し見やすくしてみます。所要時間は１０〜１５分程度。HTML編集は初めてだという人もいるかもしれませんので、今回はできるだけわかりやすく図で手順を説明いたします。
まず、管理画面を開いて「デザイン」→「コンテンツ」へすすみます。
そのページの一覧から「新着記事」を選択。
新着記事の設定画面になりますので、右肩の「コンテンツHTML編集」を選択します。
こんな入力画面がでてきます。これが新着記事部分のテンプレートです。
※選択しているテンプレートによっては内容が違うかもしれません。
簡単に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で修正します。
管理画面から「デザイン」 → 「スタイルシート」を開きます。
今、利用しているスタイルシートの一覧が表示されるので、タイトルをクリックします。
スタイルシートが表示されますので、その最後尾に次の命令を追加します。
//<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テンプレートの使い方をマスターしないと自由自在にといきません。
そのうちヘルプが完備され解説サイトが増えてくれば、ソースだけコピペしてカスタマイズということができるようになりますので、しばらく待ってみるのも手ですね。
なんだか難しそうに思えるかもしれませんが、地道にコツコツ進むタイプの人なら、誰でも使いこなせるようになるのは間違いありません。ただ敷居が高そうにみえるというだけです。
「高い山があるならば、登らぬわけにはいかんだろう」という人は、がんがん遊んでください。
でも遭難することもあるので注意だぞ。
