2005年09月01日

メールフォームを使おう!

ブログは普通のHPやWEB日記より
多くの方がアクセスする可能性が高いものです。

トラックバック・スパムやコメント・スパムに
迷惑している方も多いことと思います。

なのでプロフィールにメールアドレスをのせてしまうと
迷惑メールの嵐・・・となってしまう危険があります。



プロバイダーの本アドではなく
ヤフーMSNなどのフリーアドを使うと言う手もありますが
一番安全なのは、こちらのアドレスを知らせずにメールを受け取れる
メールフォームですexclamation×2

無料メールフォームで検索すれば
沢山のサイトがヒットしますが
例えば、私が右下のプロフィールで使っているのは
フォームズです。

ですから、プロフィールのメールアドレス欄は空欄にしておいて
挿入テキスト部分などに
ここで作成したメールフォームのURLを
「メールはこちらへ」などの文字にリンクさせるだけで完成です。

ちなみに私は画像を使ってリンクさせています。
posted by みえにゃん
at 08:20 |Comment(6) |TrackBack(0) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年08月14日

動画ファイルを記事中に表示する

記事の中に画像を何枚も表示出来るのが
(それぞれのサービスにもよりますが)
ウェブ日記より、ブログを日記として使用する場合の
魅力でもあると思いますが
最近では、動画ファイルも表示している所も多いですね。

そこで、記事中に動画ファイルを表示する方法を
紹介したいと思います。



まず一番人気は、なんといっても「つなビィ」
こちらは記事中だけでなく、サイドパーツとしても利用でき
さらにbotan.gifを使えばスライドショーとしても利用できますexclamation
(記事中にスライドショーを表示する方法についてはまた改めてアップします)

ただし、「つなびぃ」は携帯画像&動画専用でして
デジカメなどの動画ファイルには対応していませんふらふら
さらに、今現在、新規登録は出来ない状態であることが悲しいですもうやだ〜(悲しい顔)


次に紹介するのは「モビゾー」ですが
こちらも携帯専用囹;
パソメールを設定しておけばデジカメでも大丈夫exclamation×2

表示としては
こちら

BlogPet用にアカウントを別にしているので
この記事中に表示できなくて申し訳ありません。

広告がないのは良いのですが
やはり携帯の動画ファイルだと(機種にもよりますが)
ちょっと寂しい。。。

対応ブログについては上記「モビゾー」サイトにあるとおりで
勿論、Seesaaにも対応しています。
一度にアップできるファイルはFAQにあるとおり、3Mまで


次に携帯以外の動画ファイルにも対応しているのが
ムービーキャスターらくちんFLVメーカー

表示はバッド(下向き矢印)こんな感じ









このファイルは11.83MBもあるので、それなりに見ごたえがありますが
広告がいかにも邪魔ですふらふら

広告なしの有料版もありますが
初期設定が高すぎるexclamation×2(100MBで5万円)
月額使用料も決して安くないたらーっ(汗)たらーっ(汗)

大容量とうたっていても50MBまでなので
しょっちゅう動画をアップすると、すぐ一杯になってしまう。

なので私は、規約違反ギリギリですが(虚偽申請ではない)
別のメールアドレスを使い、家族名義でもう一つ別のアカウントを取りました。

「モビゾー」と「らくちん」については、from shunさんの
動画Flash化ツール比較。【モビゾー】VS【らくちんFLVメーカー】
に詳しい比較があります。


次に試したのがubicast Blogger
これはDLして使うもので
複数のブログを管理して投稿できるツールです。
動画もアップできるので、ブログサーバーの容量さえあれば
(最近はギガクラスが多いですし)かなり使えるのですが
対応しているファイル形式がAVI とmpeg1 だけなんですよ。
私はデジカメも携帯も、この形式には当てはまらないので
動画の実際の使いごこちはわかりませんが
テキストや静止画像で試してみたところ
普通にエンターで改行すると行間が出来てしまうので
シフトボタンを押しながらエンターを押さなければいけないというのが
少し面倒だと思いました。

それにブログサービスにログインして記事を書くほうが
ずっと楽だし、絵文字対応もありません。

あと。。。
全く使ったことはありませんがgooブログ
携帯のみですが、動画に対応しているようですね。
posted by みえにゃん
at 06:14 |Comment(49) |TrackBack(11) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年08月12日

モビゾー


モビゾーのテストです
posted by みえにゃん
at 21:35 |Comment(0) |TrackBack(0) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年07月31日

ジングルをならす♪

ページを開いた時に短くジングルが鳴るのは
アクセントとして楽しいと思いませんか?
HPでもよく使われている方法ですが、ブログでも簡単に設置できます。



まずはジングルの音源をDLしてくる必要があります。
音楽素材で検索すると沢山の素材屋さんがありますが
こちらではblue-noteさんの効果音をお借りしました。

素材屋さんから「対象をファイルに保存」などして、音源をDLしたら
Seesaaにアップします。
画像ファイル以外はアップできないブログが多いですが
どんなファイルでもアップできるSeesaaは本当に便利ですね。

次にデザイン→コンテンツ→コンテンツの追加で自由形式を選択し
配置先はフッターを選びます。

そして自由入力欄に以下のタグを記入して再構築すれば完成です。
<EMBED src="音源URL" autostart="true" hidden="true">

これは見えない状態にしていますが
ボタンなどをクリックして見えるようするには
<EMBED src="音源URL" bgcolor="#背景色"width=165 height=40 autostart=true>
となります。

表示とともには再生させず、クリックで再生させるなら

autostart=trueautostart=falseに変えてください。

ちなみにこのタグを記入すると、下にあるとおり

こんな画像が表示されます。
これは表示とともには再生しませんから
左から二番目の△ボタンをクリックしてください。

これならサイドバーの上のほうや記事の中に記入してみても良いでしょうね。

又、ジングルではありませんが、簡単にBGMるんるんをつけることもできます。

クリックして音を聞いてみてください。

こちらはblog-tunes.comさんからお借りした効果音です。

設定により、ページ表示時と同時に再生する場合と
そうでないな場合が選べます。
ループ音が多いので
音を止めるボタンが見つかりやすい場所に設置すると良いでしょう。

blog-tunes.comさんには丁寧な設置方法も書いてあります。

posted by みえにゃん
at 03:33 |Comment(4) |TrackBack(0) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年06月27日

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

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

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



で、デザイン→コンテンツ→新着記事→コンテンツ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>

赤字部分青字部分を入れ替えただけなんです。
posted by みえにゃん
at 04:50 |Comment(11) |TrackBack(1) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年06月23日

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

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



最近のコメントを例にとると
デザイン→コンテンツ→最近のコメントを開き
表示形式をツリーにしてから保存
もう一度最近のコメントを開いて、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>


画像を使わないで ■ などを入れてもリスト化されてオッケーかと思います。
posted by みえにゃん
at 00:30 |Comment(4) |TrackBack(0) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年06月19日

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

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

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

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

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


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

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

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

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

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

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

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

記事の並び順より若い番号を設定すれば大丈夫です。
posted by みえにゃん
at 22:34 |Comment(2) |TrackBack(0) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年06月18日

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

画像にリンクを貼ると、何故かいらない枠ができていますよね。
これを回避するのは、とても簡単!
<a href="リンク先URL"><img src="画像URL" border="0"></a>


赤字部分を加えるだけで枠は消えます。
posted by みえにゃん
at 12:00 |Comment(1) |TrackBack(0) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年06月15日

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

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

方法は簡単です。


デザイン→スタイルシート
.comments-post{ }

を見つけて
その中に
background-image:url('画像URL');
background-repeat:no-repeat;
background-position:bottom;

を加えるだけです。

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

もっと簡単に画像を使わずにラインで区切るなら
border-bottom:1px dotted #666;

を書き加えるだけでもオッケーです。
posted by みえにゃん
at 05:14 |Comment(14) |TrackBack(4) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年06月11日

投稿者別アイコンの設置

お気づきの方もいらっしゃるかもしれませんが
記事本文の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編集で
表示したいところに画像表示のタグを入れただけです。
posted by みえにゃん
at 05:39 |Comment(6) |TrackBack(0) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年06月05日

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

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

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


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

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

< は半角で&lt;
> は半角で&gt;
と置き換えて記入します。

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

また、先ほどのページでは
タグやスクリプトが長くなってしまうと
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;
}
posted by みえにゃん
at 19:58 |Comment(4) |TrackBack(2) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年05月26日

コメントにクッキー機能を導入

とても便利なスクリプトを見つけました!

PERSONA@BLOGさんの
【Seesaaユーザー必見】コメントにクッキー(cookie)をです。

カスタマイズ方法は、PERSONA@BLOGさんの記事を
見ていただくのが一番ですが
コメントに絵文字を使えるようにするを導入している場合
ほんの少し訂正が必要です。



<form name="comment_form" action="/pages/user/
comments2/regist/input" method="post">
と変更しなければならないので
記事HTMLで画像リスト出力スクリプトの

// コメントを入力するテキストエリアを指定
の部分で

var textarea = 'document.comform.article_child__body';


var textarea = 'document.comment_form.article_child__body';
と書き換える必要があります。

あとは【Seesaaユーザー必見】コメントにクッキー(cookie)を
に従って書き換えれば、クッキーが有効になります。
posted by みえにゃん
at 06:06 |Comment(5) |TrackBack(3) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年05月18日

Seesaaでコメントに絵文字を使えるようにする

Seesaaでは、記事には絵文字わーい(嬉しい顔)が使えますが
コメント欄でも使えるようにカスタマイズしてみました。

お世話になったのはstroll::blogさんの
コメントにカスタマイズ絵文字入力機能です。

ただし、コメント確認画面で、どうしても不具合があったので
コメント確認を削除してしまいました。
それでもよければ使ってみてください。




まず、当然ながら絵文字画像が必要になります。
私はstroll::blogさんでもおすすめしていた
SWEETSさんの素材をお借りしました。

画像をアップしたら、画像設定スクリプトの編集をします。

はじめはstroll:blogさんのまま使ってみたのすが
この画像は11X11と小さくて、間がないと非常に見づらかったので
間を空けるために少し書き換えてあります。
青字部分が書き換え箇所です)

その設定でよければ、
以下の画像設定スクリプトをコピーしてメモ帳に貼り付けて
赤字部分を編集します。

list[list.length] = new Array('画像名', '画像URL');
は画像の数だけ増やして下さい。(これが結構大変ですあせあせ(飛び散る汗)

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定
list[list.length] = new Array('画像の名前', '画像URL');
list[list.length] = new Array('画像の名前', '画像URL');
list[list.length] = new Array('画像の名前', '画像URL');
return list;

}

function getCustmizeEmojiAttribute() {
// 画像タグに含める属性値(alt属性以外)
var att = 'border="0" style="vertical-align:middle" hspace="2" vspace="2"';



// ***************** 設定ここまで *****************
att = (att != '') ? (' ' + att) : '';
return att;
}
// -->
</script>

では、編集したらそれをコピーして
デザイン→HTMLを開いて
今までHTMLを編集したことのない方はHTMLの追加をクリックして
HTML名をつけ、その画面を編集します。

</head>
を探して、その前に、先ほどの画像設定スクリプトを貼り付けます。

HTMLの編集はここまでなので、これを保存して
この新しいHTMLを適用させます。

続いてデザイン→コンテンツ→記事HTML編集画面を開いて
ここに画像リスト出力スクリプトと画像変換スクリプトを記述します。

まず、画像リスト出力スクリプトですが
stroll::blogさんのものをSeesaa用に書き換えた以下のものをコピーしてください。
青字部分が書き換えた箇所です)
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comform.article_child__body';

// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
for (var i = 0; i < list.length; i++) {
window.document.write('<a href="javascript:;" onClick="addCustmizeEmoji(' + textarea + ', \'' + list[i][0] + '\');"><img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" /></a>');
}
}

// reference from jugem.jp (c)
function addCustmizeEmoji(obj, tag) {
var item = '[' + tag + ']';
if (document.selection) {
obj.focus();
sel = document.selection.createRange();
sel.text = item;
} else if (obj.selectionStart || obj.selectionStart == '0') {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ item + obj.value.substring(endPos, obj.value.length);
} else {
obj.value += item;
}
}
writeCustmizeEmojiTagList();
// -->
</script>


これを絵文字を表示したい部分に貼り付けるのですが
私の場合は、コメントテキストエリアの上に表示したかったので
<textarea name="article_child__body" rows="10" cols="50">
の上に貼り付けました。

それで、コメントテキストエリアはスタイルシートで見ると350pxだったので
その上にきれいに収まるように
この画像出力スクリプトを

<div style="width:350px;"></div>
で囲んで
3列きれいに並ぶように絵文字の数を調節してみました。

pxの値はスタイルシートによって違うかもしれないので
自分の環境に合わせて変えてください。


それから

<form action="/pages/user/comments2/regist/input" method="post">
を探して、これを

<form name="comform"
action="/pages/user/comments2/regist/input" method="post">
と書き換えます。


続いて画像変換スクリプトですが
これもSeesaa用に書き換えた以下のものをコピーしてください。
青字部分が書き換えた箇所です)

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像変換
function changeCustmizeEmojiTag() {
// (1)コメント全体のタグの id 属性
var commentAreaIdName = 'comments';
// (2)コメント全体のタグ名
var commentAreaTag = 'div';
// (3)各コメントの class 属性
var commentBodyClassName = 'comments-body';

// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();
if (commentAreaIdName != '') {
objComArea = document.getElementById(commentAreaIdName);
if (!objComArea || !objComArea.innerHTML) return;
classComArea = objComArea.getElementsByTagName(commentAreaTag);
} else {
classComArea = document.getElementsByTagName('*');
}
for (var i = 0; i < classComArea.length; i++) {
if (classComArea[i].className == commentBodyClassName) objComBody[objComBody.length] = classComArea[i];
}
for (var i = 0; i < objComBody.length; i++) {
objComBody[i].innerHTML = getStringCustmizeEmojiTag(list, objComBody[i].innerHTML, att);
}
}

function getStringCustmizeEmojiTag(list, s, att) {
for (var i = 0; i < list.length; i++) {
s = s.split('[' + list[i][0] + ']').join('<img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" />');
}
return s;
}
changeCustmizeEmojiTag();
// -->
</script>

これを

</form>
</div>
<% /if -%>
<% if:page_name eq 'search' -%>
の前に貼り付けます。

以上で保存して記事ページを再構築すれば完了です。


【追記】
以前の記事では、HTMLにも3つのスクリプトを記述して
確認画面の不具合があったので、確認部分を削除すると書きましたが
HTML部分には画像設定スクリプトのみを記述して
記事HTMLに画像リスト出力スクリプト画像変換スクリプト
を記述すれば、確認画面の不具合は出ませんでした。
ただし、確認画面では絵文字ではなくタグなんですけど・・・もうやだ〜(悲しい顔)
posted by みえにゃん
at 14:36 |Comment(19) |TrackBack(7) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年05月15日

スクロールバーの色を変える

HPでよく見られる方法ですが
SeesaaならHTMLを編集できるので
スクロールバーの色を変えるのも簡単です。

このブログも右スクロールバーが黄色になっていませんか?
(IEのみでしか適応になりませんが。。。)



デザイン→HTMLと開いて
<HEAD></HEAD>の間に
以下のタグを入れるだけです。

<STYLE type="text/css">
<!--BODY{
border:0px solid #○○○○○○;
scrollbar-face-color:#○○○○○○; /*スクロールバー表面の色*/
scrollbar-highlight-color:#○○○○○○;/*内側の明るい色*/
scrollbar-shadow-color: #○○○○○○; /*内側の暗い色*/
scrollbar-3dlight-color: #○○○○○○; /*外側の明るい色*/
scrollbar-arrow-color:#○○○○○○;/*矢印の色*/
scrollbar-track-color: #○○○○○○; /*余白の色*/
scrollbar-darkshadow-color: #○○○○○○;/*外側の暗い色*/
}-->
</STYLE>

○○○○○○の部分は
カラーチャートなどで決めますが
7色も決めるのが面倒であれば
こちらがお勧めです。
posted by みえにゃん
at 00:00 |Comment(1) |TrackBack(1) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年05月11日

faviconつけちゃお〜!

企業のサイトはもちろん、個人のHPでもよく見かけるようになった
お気に入りアイコンfavicon

Seesaaなら、ブログにfaviconをつけてしまうことも、とても簡単です。

ちなみにこの「BlogPetはじめよう!」「Blogであそぼう!」も
お気に入り登録していただければ
i_nek15.gifこんなマークがついているんですよ。





まずはfaviconとなるべき
拡張子icoのアイコンを作成する必要があります。

アイコンぱくら
私はグッド(上向き矢印)というフリーソフトを使っているのですが
(画像をクリックするとDLサイトへ飛びます)
もっと簡単に作ってしまうなら
Favicon Japanさんがお勧めです。

GIF、JPG、PNGのいずれかで、正方形の画像を用意して
(フリーの素材屋さんからDLしてきてもよいのでは?)
faviconを作成するだけです。

自分のパソコンに、作成したfaviconをDLしたら
今度はSeesaaにアップロードします。

次にデザイン→HTMLを開いて
<head>タグの中に下記のタグを挿入してください
<link rel="shortcut icon" href="あなたのブログURL/favicon.ico">

あとは保存して、トップページを再構築するだけです。

どんなファイルでもアップロードできるブログは多くはないですから
faviconつきのブログで
ちょっと目立ってしまいましょう!!
posted by みえにゃん
at 20:48 |Comment(2) |TrackBack(2) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年05月10日

リンク系リストの利用

みなさんはお気に入りのブログリストは
どのようにリンクしていますか?

コンテンツの追加でお気に入りリンクでしょうか?

もちろんそれでもかまわないのですが
ブログは常にRSS情報を発信しているので
それを利用するというのも非常に面白いと思うのです。



リンク系リストのお勧めは
MyblogList
BlogPeople
アメリカの人気NO.1 Blogrollingなどですが

機能的にはほぼ同じと考えてよいので
ここでは、左下でも使っている
MyblogListを例に説明したいと思います。

まず、登録したブログが更新されると
(そのブログがping送信している必要がありますが)
設定時間により更新マークが表示されます。

そして、ブログタイトルの他に
ブログ作者名、最新記事タイトルなどを表示させることもできます。

この左下「おすすめブログ」では
更新マーク表示を24時間以内の更新
ブログタイトルにカーソルを合わせると
最新記事タイトルがポップアップされるように設定しています。

どうです?普通のリンク表示より、ずっと便利だと思いませんか?
posted by みえにゃん
at 23:10 |Comment(0) |TrackBack(0) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年05月03日

スタイルシートの編集V

デザインが大体決まったら、あとは文字色の設定を変更するだけです。
これはデザインの変更に比べればとても簡単です。


h1 a{}の中で
ブログタイトルの文字色が決められるので
ここのcolor:#6桁の数字;
カラーコードを参考に好きな色に変えます。

同じように
title a{}で記事タイトル
text{}で記事本文の色を指定します。
posted{} sidetile{}side{}内のcolorも同様に指定していきます。

どうです?簡単だと思いませんか?

スタイルシートのカスタマイズでの実例として
私のメインブログも見てみてくださいね。
posted by みえにゃん
at 22:00 |Comment(2) |TrackBack(1) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年05月02日

スタイルシートの編集U

壁紙やヘッダーだけでなく
とことんオリジナルに変えてしまうのも
そんなに難しいことではありません。

実は私のこのブログ、テンプレートの「さくら」を雛形にしているんです。

どうです?ぜんぜん違うと思いませんか?


壁紙やヘッダーについては
スタイルシートの編集Tのように変更して差し替えます。

私のこのブログを例に説明すると
「さくら」は、右サイドバーのみなので
スタイルシートのlinks-left{}
内もlinks{}と同様に指定する必要があります。

ただ、この時、width:○○px;をそのままにしてしまうと
ブログ本体に収まりきれず、サイドバーが落ちてしまうので
width:○○px;の値を調整します。

簡単に言うと、widthとは幅のことなので
links-leftとlinkscontentとそれぞれのmarginを足した幅が
containerの幅に収まればよいのです。

そして、スタイルシートの中でbackground-image:url();で指定されているものを
殆ど全て自分で作成するか、素材屋さんからDLしてきて
それをアップロードし、プロパティを調べて()内を差し替えます。

例えば、「さくら」h3{}の中では
sakura.gifhttp://blog.seesaa.jp/img/bg/sakura/title.gifというアイコンが
記事タイトル左に指定されているので、これを差し替えます。

簡単に差し替えをするなら、上記urlをコピーしてブラウザに表示させて
プロパティを確認して同じ幅と高さのアイコンを設定すればいいわけです。

ここで幅や高さも変わってしまった場合は
h3{}内の
paddingを調整します。

同じように
date{}sidetitle{}内の
background-image:url()内を差し替えます。

ここでは

ashi2.gif

side4.gif

date2.gif

などを作成したり、DLしてきて差し替えています。

この時、date{}であれば
content
sidetitle{}であれば
linkswidthのサイズにぴったり合わせましょう。

そしてblogbodysidebackground-colorを指定すればほぼ完成です。

このブログの場合は、さらにblogbody
background-image:url()で画像を指定して
それをbackground-position:bottom;で位置を記事の下としてラインを表示したり
sideにも同じように
下に表示する画像を指定しています。

Seesaaではトップページに限り、プレビューで確認できますし
スタイルシートに名前をつけておけば
いつでももとの状態に戻すことは可能なので
怖がらずに、どんどん自分でスタイルシートをいじってみて
どのようにかわるのか、実際に体験してみることが一番だと思います。
posted by みえにゃん
at 00:00 |Comment(39) |TrackBack(8) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年05月01日

スタイルシートの編集T

Seesaaの一番の弱点はテンプレートの少なさと、そのデザイン・・・

だったら、自分好みにCSS(スタイルシート)を編集してしまえばよいのです!

基本はとほほのスタイルシート入門などでおさえておくほうがよいことは確かですが
もっともっと単純にデザインを変えてしまうには・・・・

まずは壁紙とヘッダーを変えるだけで印象はずいぶん変わるはずです


デザイン→スタイルシートと開き
今、適応になっているスタイルシートを開きます。

一番上
body{}の中で
background-image:url();が指定されていれば
この()の中身を変えてしまいます。

あなたのお気に入りの壁紙をツールでアップロードして

tool.gif

今アップロードしたファイルのタイトルをクリックして開きます。

開いたら、上の元画像を右クリックして、プロパティを開きます。
アドレス部分をコピーして
先ほどの()内と変えてしまえばよいのです。

プレビューで見てみてください。
あなたのお気に入りの壁紙に変わりましたか?

body{}の中で
background-image:url();が指定されていない場合は
background-color:#6桁の数字;となっているはずです。

その場合、background-color:#6桁の数字;の代わりに
background-image:url();を入れて
()内に先ほどと同じように
アップロードした壁紙のURLをコピーします。

ただ、このとき
#container{}内に
background-color:#6桁の数字;の指定がないと
ブログ本体の文字背景にもなってしまい
文字が見づらくなることもあるので
background-color:#6桁の数字;を指定するか、文字背景として差し支えない壁紙を
background-image:url();として指定するのがよいと思います。
#container{}内に色の指定がある場合は
そのままにするか、背景色を変えてみてください。
6桁の色のコードはカラーコード表を参考にすると便利です。

同じように、ヘッダーを差し替えるには
#banner{}内の
background-image:url();
()の中のアドレスを変えればよいので
自分好みのヘッダーを作成するか、素材屋さんからDLして
壁紙と同じようにアップロードして、プロパティをコピーし
()内を差し替えます。

このとき、プレビューで見て
ブログタイトルや説明文の位置がおかしければ
タイトルはh1{}内の
padding:○ ○ ○ ○;で調整します。
paddingとは枠の外の余白のことで
(後で出てくるmarginとは枠の内側の余白のことです)
それぞれの数字は、上右下左になるので、数字を変えて確認してみましょう。

説明文は.description {}内の
margin:○ ○ ○ ○;
で調整しましょう。

プレビューで見て大丈夫であればスタイルシートの交換をクリックしますが
このとき、スタイルシートタイトルを
自分のオリジナルの名前に変えておいたほうが、後の作業も楽に進むと思います。
posted by みえにゃん
at 15:54 |Comment(4) |TrackBack(1) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

2005年04月22日

表示を統一させる

SeesaaにBlogPetを貼り付けるには
コンテンツの自由形式を選択しますが
デフォルトの「自由形式」というタイトルを
たとえば「BlogPet」に直しても
そのままでは、ブラウザには反映されません。

タイトルだけでなく
表示形態を他のコンテンツと同一にさせるには
HTMLの編集をする必要があります。


まず、BlogPetを貼り付けたコンテンツを開きます。

そうすると右にコンテンツのHTML編集というのがありますから
そこをクリックします。

html.gif

デフォルトで入っている
<% content.header -%>
<% content.free.text %>
<% content.footer -%>
を消して
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>
と上書きして保存ください。
これは、BlogPetに限らず
自由形式のコンテンツを他と統一させる時に使います。

又、BlogPetが左によっているのが気になるようであれば
自由形式の設定画面に戻り
BlogPet貼り付けコードの前後を
<center>〜〜〜</center>
のようにで囲んでください。
posted by みえにゃん
at 14:22 |Comment(8) |TrackBack(1) | カスタマイズ | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

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