プルダウンメニューつけました(BlogPet)

みっちゃんは、ここでドロップに設置したかった。
いやみっちゃんは、シートは調整するはずだった。
それからみえにゃんはここへみえにゃんはここへみえにゃんが設置する？


*このエントリは、BlogPet(ブログペット)の「みっちゃん」が書きました。

新着記事の日付と記事タイトルを逆にする

あちこち、リスト化してをつけていたら
新着記事の日付と記事タイトルを逆にしないと、どうも変な感じ

・・・っていうか、これ、以前から逆のほうがいいと思っていたんですよ。。。

---

で、デザイン→コンテンツ→新着記事→コンテンツHTML編集を開いてみて

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

赤字部分と青字部分を入れ替えただけなんです。

最近のコメントとトラックバックをツリーにする

・・・とは言っても、Seesaaの場合、なんの技もいらず
表示方法をノーマルからツリーに変更するだけなのですが
それだけではつまらないので、元記事タイトル前にアイコンをつけたり
ツリーにすると、どうしても長くなってしまうので
スクロールバーを入れたり
よりツリーらしい表示方法にするなどしてみました。

---

最近のコメントを例にとると
デザイン→コンテンツ→最近のコメントを開き
表示形式をツリーにしてから保存
もう一度最近のコメントを開いて、HTML編集に進みます。

以下の赤字部分を加えたり
変更したりするだけです。

<div class="sidetitle"><% content.title %></div>
<div class="side"><div style="overflow: auto; height: ○○px;"><% content.header -%>
<% if:content_recent_comment.type == 0 -%>
<% loop:list_article_child -%>
<a href="<% article_child.article.page_url %>#comment"><% article_child.article.subject | tag_strip %></a> by <% article_child.writer | tag_strip %> (<% article_child.createstamp | date_format('%m/%d') %>)<br />
<% /loop -%>
<% /if -%>
<% if:content_recent_comment.type == 1 -%>
<% loop:list_article -%>
<img src="画像URL"><a href="<% article.page_url %>#comment"><% article.subject | tag_strip %></a><br />
<% loop:list_article_child -%>
　├ <% article_child.writer %> (<% article_child.createstamp | date_format('%m/%d') %>)<br />
<% /loop -%>
<% /loop -%>
<% /if -%>
<% content.footer -%>
</div></div>

画像を使わないで　■ などを入れてもリスト化されてオッケーかと思います。

すごい進化！！

昨日の記事を見てください！！

なんとBlogPetのみっちゃんが絵文字書いています！！

今までは絵文字のタグを読んでも、頭の&が抜けて記述されていたので
絵文字になっていませんでしたが
今回はちゃんと&がついているので
無事、絵文字になっています！！

これからは、BlogPetも絵文字、どんどん使うのかも
ちょっと楽しみです

投稿者別アイコンの設置(BlogPet)

きのうはお気づきに設置したかったみたい。
きのう、ここに投稿されたみたい…
ここで本文みたいな投稿しなかった。

S e e s a aでは、記事には絵文字が使えますがコメント欄でも使えるようにカスタマイズしてしまいました。
それでもよければ使ってみてください。

*このエントリは、BlogPet(ブログペット)の「みっちゃん」が書きました。

プルダウンメニューつけました

あると便利だなぁ〜と思っていたプルダウンメニュー

Seesaa用のソースが作成できるサイトを発見

それは　StyleBookさんのナビゲーションバー公開です。

ヘルプも丁寧なので簡単に設置できますが
以下、私が設置するにあたっての覚書きです。

---

TBされていた懸賞メモさんのドロップダウン式ナビゲーションバーにあるとおり

<table border=0 cellspacing=0 id="drop"><tr>

を加えないとテーブルになりませんでした。

＊現在はテーブルタグが加えられているので必要ありません。

それから、はじめはヘッダーに入れていたのですが
画像と重なるので、色々と調整してみたところ
（スタイルシートでマージンなどを）
IEではきれいに表示されていても、FirefoxやNetscapeでは崩れてしまう

いや、これは単に、私の知識不足なのですが・・・

それで、項目も少ないので、ヘッダーではなく
メインに入れてみました。

記事の並び順より若い番号を設定すれば大丈夫です。

画像にリンクを貼ると枠ができるのを回避する

画像にリンクを貼ると、何故かいらない枠ができていますよね。
これを回避するのは、とても簡単！

<a href="リンク先URL"><img src="画像URL" border="0"></a>

赤字部分を加えるだけで枠は消えます。

自動的にペットの名前を読み込む背景

あたまがうにになるさんのブログペットAPI復活を見て
Flash背景・・・すごいことになるかも？と思っていたら
早速 **SilverHeart**さんで
自動的にペットの名前を読み込んで、ペット小屋の表札になる
ペット小屋ラクラク建設（笑）が配布されました。

早速、別ブログのこぱんだ「ぱんち」の背景にお借りしました〜〜！！



これはすごい！！お勧めです！！

コメントをラインで区切る

コメントをいくつか頂くと
それぞれのコメントに区切りがないと、見づらいような気がして
ラインで区切ってみました。

方法は簡単です。

---

デザイン→スタイルシート

.comments-post{　}

を見つけて
その中に

background-image:url('画像URL');
background-repeat:no-repeat;
background-position:bottom;

を加えるだけです。

ただ、画像の高さによっては
paddingを調整する必要があるかもしれません。

もっと簡単に画像を使わずにラインで区切るなら

border-bottom:1px dotted #666;

を書き加えるだけでもオッケーです。

投稿者別アイコンの設置

お気づきの方もいらっしゃるかもしれませんが
記事本文のposted byの後と、コメントのposted byの後に
投稿者別アイコンを設置しました。

---

お世話になったのはstroll:blogさんの
コメント投稿者別アイコン表示と
記事投稿者名＆カテゴリー名別アイコン表示です。

stroll:blogさんのものはJUGEM用なので
コメント投稿者別アイコンの場合は

<script type="text/Javascript">
<!--
getCommentNameImageTag('{comment_name}');
//-->
</script>

を

<script type="text/Javascript">
<!--
getCommentNameImageTag('<% comment.writer | tag_strip %>');
//-->
</script>

と変更して
デザイン→コンテンツ→記事HTML編集で

<div class="comments-post">Posted by

のすぐあとに貼り付けます。

又、記事投稿者別アイコンは
同じく記事HTML編集の

<div class="posted">posted by

のすぐ後ろに

<script type="text/Javascript">
<!--
getCommentNameImageTag('{user_name}');
//-->
</script>

を下のように書き換えて

<script type="text/Javascript">
<!--
getCommentNameImageTag('<% article.nickname %>');
//-->
</script>

と貼り付けます。

同じく、HTML編集画面でも
上記スクリプトを同じ箇所に貼り付けます。

記事投稿者別アイコンのおかげで
BlogPetの投稿もアカウントを別にしていると楽しくなります。こちら
又、ここではBlogPetにコメントを許可しているので
それぞれ専用アイコンを設置しました。こちら
アイコンはBlogPet切り替え用アイコンと同じにしてみました。

ついでに、時間やコメント、トラックバックにもアイコンをつけました。
これは、コンテンツ→記事HTML編集で
表示したいところに画像表示のタグを入れただけです。

決めたカテゴリに自動投稿させる(BlogPet)

きょうみっちゃんがみえにゃんがカテゴリは設定されたみたい…

Harbot＋素材で検索すると沢山の素材屋さんがヒットしていますがBlogPet＋素材で検索しても背景素材しか出てきませんよね。
。
。
まぁ、BlogPetはブログのサイドバーにつけるものでサイドバー自体がテーブルなので必要ないといえばそうなのですが・・・特に表示を統一させている場合は、まったく必要のないものですが・・・#63916;

*このエントリは、BlogPetの「みっちゃん」が書きました。

掲示板を設置する

ブログにはそれぞれの記事にコメントをつけることができますが
記事に対する意見ではなく、
全体的な感想や、足跡として掲示板を設置するのも楽しいと思います。

一番簡単な方法は、レンタル掲示板をリンクリストの中に入れることですが
そうすると別窓を開くか、別のサイトへ飛ぶことになるので
もっと手軽に書き込めるように、サイドバーに埋め込むことをお勧めします。

---

ここでは、右サイドバーにからお借りした
BBS SKINを使っていますが
これはCGIをアップできる環境がある人のみなので
もっと手軽にブログ用掲示板をサイドバーに埋め込むなら
comitia
Atomic ASP
CHOBI
プチ掲示板
などをお勧めします。

中でもAtomic ASPはカスタマイズが簡単で
幅や高さの調節もらくらく！！
文字コードの関係で設置できないブログも多いようですが
Seesaaなら問題ありません。

いずれの掲示板もコンテンツの追加→自由形式で
コードを貼り付けるだけです。

掲示板等のタイトルも反映させたい場合は
表示の統一も参考にしてみてください。

記事の中にタグを書くには？

タグやスクリプトを書いて説明しようとしても
そのまま書いてしまうと、タグとして認識されてしまい
記事として表示することができません。

でも、ちょっと技を使えばこちらのように
タグを記事として書くことができます。

---

問題は＜や＞を
そのまま半角で打ってしまうと、タグとして認識されてしまうので

先ほどのページの記事部分をソースで見ていただくとわかりますが

<　は半角で＆ｌｔ；
>　は半角で＆ｇｔ；
と置き換えて記入します。

タグやスクリプトをメモ帳にコピーして
編集→置換→全て置換　を利用すると便利です。

また、先ほどのページでは
タグやスクリプトが長くなってしまうと
blogbodyのwidthを超えてしまい
サイドバーが落ちてしまう危険もあり
又、見易さを考えて<blockquote> </blockquote>
blockquoteタグで挟んでいます。

blockquoteを使うと上下左右に間ができ
とても見易いのですが
インデントして使うのは邪道との説もあるのですが・・・

又、blockquoteの設定はスタイルシートに記入しています。
こちらではスタイルシートの一番下に次のように指定しています。

blockquote{
color:#000000;
background-color:#FFF0F5;
border-style:dotted;
border-width:2px 2px 2px 2px;
border-color:#C71585;
margin:10px 10px 5px 10px;
padding:5px 10px 5px 10px;
}

進化中�U

きょう、みえにゃんはここにお願いしなかった？


*このエントリは、BlogPetの「さちこさん」が猫が好きを読んで書きました。

よその日記を読んで投稿するようになったようですね。。

黒猫Maukie設置方法(BlogPet)

きょうはみえにゃんはここにみえにゃんと設置するはずだったの。


*このエントリは、BlogPetの「みっちゃん」が書きました。