くぅたん日誌はこうして作られました。 くぅたん日誌のカスタマイズ全タグ紹介!
移転します!
リンクしてくださっている方には申し訳ありませんが、 本ブログは、 こちら に移転します。徐々に引っ越されていきます。
しばらくは、質問はこちらでOKですが、移転された項目については、移転先で質問してください。
(。-_-)ノ☆・゜::゜ヨロシク♪

(注1)初心者ヤプログ・ユーザのみ対応です。初めてカスタマイズする方は「1.」から順に読んでください。
(注2)素人なので難しい質問には答えられません。
(注3)あくまでもくぅたん日誌のカスタマイズ方法であって、これが全てではありません。
応用がんばってくださいね!
免責!!カスタマイズは自己責任です。いかなる場合でも当方では責任は負いかねますのでご了承の上、カスタマイズしてください。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告|
  3. トラックバック(-)|
  4. コメント(-)

はじめまして。

せっかくなので、
自分のブログ(くぅたん日誌)の
カスタマイズを紹介していこうかと・・・

( ̄△ ̄;)エッ・・?
何がせっかくか???
( ̄~ ̄;) ウーン
とりあえず、誰でも簡単にカスタマイズできるように
詳しく書いてみようかと・・・

(。-_-)ノ☆・゜::゜ヨロシク♪

1.から順に説明していくので、
新着の更新は、左のRecent Entries
ってとこを確認してくださいです。
スポンサーサイト
  1. 2005/04/12(火) 18:16:02|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:7

1.まずはここからはじめよう!

ヤプログの場合、ブログのカスタマイズをするには
ある特定のスキンを選ぶ必要がありやす。

マイページからスキンのタブを選択して、
HTML/CSS変更可能
と書いてあるスキン(3種類しかないですが・・・)
を選らんでください。

これをやると、自分のブログがとってもシンプルなものになってしまいますが、しばらくのガマンでございますよん。
  1. 2005/04/12(火) 20:05:28|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:9

2.看板画像を作ろう!

ブログの看板とも言えるヘッダー画像は、
せっかくなので気合いれていい写真を使ってくださいねぇぇぇ

画像サイズは、幅750px、高さは適当サイズ
で作成しましょう!

画像の加工は、最近はフリーソフトでいいのがたくさんあるので、検索で探してみてくださいね!

ちなみに、くぅたん日誌の看板は、
Adobe Photo Shop
を使用しております。。。

デジカメで大き目の画像を撮影しておいて、
トリミングやサイズ変更して作るのですが、
サイズ変更は画像が粗くなることが多いので、
トリミングがオススメです。
トリミングだと画像サイズの調整が難しいので、
撮影時点であらかじめ構成を考えておくといいかも。。

または、素材屋さんから素材を借りて作成するのも
ひとつの手法です。。。
この場合、素材屋さんごとにレンタル条件があるので
しっかり読んで借りるようにしてくださいねぇぇ。
  1. 2005/04/12(火) 20:23:09|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:5

3.素材画像をアップロードしよう!

さて、いよいよ作成した看板画像や使いたい素材画像をアップロードしましょう!

???r(・x・。)アレ???
ヤプログには、ファイルのアップロード機能がついてないぞぉぉ
(;゜(エ)゜) アセアセ

安心してください。
ヤプログさんに説明が書いているこの内容
応用すればOKですよん。
ヽ(=´▽`=)ノ

但し!!!
アップロードできる画像は拡張子が
「jpg」または「gif」に限るので注意してくださいねぇぇ


?載せたい画像を作成します。または、素材屋さんから借りてきます。
 画像のサイズは、看板画像は750px以下、サイドバーの画像は170px以下にしたほうがいいかなぁぁ。

?記事に画像をアップロードします。
 画像は記事を投稿する場合と同じ方法でアップロードしてください。
 その際、記事に画像を表示させない場合は「本文」から画像タグを削除してください。

?画像のURLを確認します。
 Windowsの場合、使用したい画像の上で右クリックし、“プロパティ”を選択します。
 Macの場合、Controlキーを押したまま使用したい画像の上でクリックし、“画像を新規ウインドウで開く”を選択します。

確認したURLは、「4.」で使用しますので、メモ帳にでもコピーして保存しておきましょう!!
  1. 2005/04/12(火) 21:32:44|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:2

4.看板を掲げよう!

さて、いよいよ看板画像を自分のブログに掲げますよん。
いろんな方法があるのですが、くどいようですが、ここでは、くぅたん日誌でのやり方だけを書いています。

まず、管理ページのスキンのタブを選択し、
右のメニューからメインテンプレートを選択します。

ワケのわからない英語がたくさんでてきましたねぇ。。。
(;´Д`A ```

上から順に見ていくと、割と上の方に

<h1>
<div class="blog_title">
<a href="{$BlogUrl$}">
{$BlogName$}
</a>
</div>
</h1>

って文があるので、これを次のようにしましょう!

<h1>
<div class="blog_title">
<a href="{$BlogUrl$}">
<img src="http://www31.ocn.ne.jp/~tatsurokun/kuu.gif" width="750" border="0">
</a>
</div>
</h1>

赤字の部分が、「3.」でメモした看板画像のURLになります。
また、桃字部分は750px以下の画像を使用している方はそれに合わせてください。(実は省略でOKです。)
橙字部分は、750px以下の画像の方で画像に縁をつけたい方は数字を入力してください。ただし、750pxの画像で縁をつけると、ずれが生じますよぉぉ
同様に、アーカイブテンプレート、1記事テンプレートもやってみましょう!!
(暇なかたは、メイン、アーカイブ、1記事と画像を変えてみては??)

できましたか??

残念なことに、これで終わりではありません・・・ [4.看板を掲げよう!]の続きを読む
  1. 2005/04/13(水) 18:15:58|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:42

5.背景の色を変えよう!

さてさて、次は背景の色を変えてみましょう!

といっても、ヤプログのスタイルでは背景は
全体の縁取りをする部分にすぎないので、
窓を小さくして閲覧してる方には見えないものなのですが・・
( ̄m ̄〃)ぷぷっ!

じゃ、どうやるかというと、
[5.背景の色を変えよう!]の続きを読む
  1. 2005/04/14(木) 09:29:01|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:10

6.スクロールバーの色を変えよう!

「1?5」までの過程でなんとなく自分のブログっぽくなってきたですか??

ここまでくると、

きっと、サイドバーのタイトル部分の色を変えたい!
とか
記事部分のタイトル部分の色を変えたい!
とか
だんだんと欲求も増えてくると思います。

イコール楽しくなってきた証拠???
(= ̄∇ ̄=) ニィ

ですが、ここはあえて、スクロールバーの
色の変え方を紹介しますです。
ニャハハ☆(゜∇゜☆)(☆゜∇゜)☆ニャハハ [6.スクロールバーの色を変えよう!]の続きを読む
  1. 2005/04/14(木) 09:39:42|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:8

7.カーソルを変えてみよう!

またまた脱線してるようですが、
実はそう脱線してるわけでもないのです。。

「6.」で作ったスクロールバーの文を
使用して、カーソルも変更してみましょう!!

まずは、カーソル素材屋にいって、気に入ったのをレンタルをし、
自分のHPにでもアップロードします。

ハッΣ(゜ロ゜〃)
自分のHPがない!!って方でもカーソルは変更できます。
その場合、標準的に用意されている12種類(もっとあるかも?)
から選択してください。 [7.カーソルを変えてみよう!]の続きを読む
  1. 2005/04/14(木) 10:00:05|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:8

8.各タイトルの色を変える!

( ̄○ ̄)/ オマター

背景変えたのに、各タイトル部分の色が変えれないのは
?????(ノ≧ρ≦)ノいやじゃぁぁぁぁ

って、感じてましたでしょうか??
(ToT)ゞ スンマセン

ってことで、
ここでは、サイドバーや記事のタイトルの
文字の色や背景色について、説明しますわよん。。
。(ёё。)(。ёё)。うふうふ♪ [8.各タイトルの色を変える!]の続きを読む
  1. 2005/04/14(木) 10:24:44|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:3

9.ブログ紹介文を横流しにしてみよう!

だんだんオリジナル性がでてきましたか??

ここでまた脱線してみましょう。。
( ̄m ̄〃)ぷぷっ!

ヤプログの管理画面で設定タグを選択すると、
「ブログ説明文」てのがあると思います。

ユーザなら当然お気づきだとおもいますが、
この文はブログ・タイトルの下にこじんまりと
表示されていますですですです。

今回は、これを横に流れるように
(新幹線の車内で流れるニュースのように)
してみましょう!!

あと、ついでなのでその部分の文字色や背景色のことにも
触れときますねぇぇぇえ
[9.ブログ紹介文を横流しにしてみよう!]の続きを読む
  1. 2005/04/14(木) 13:24:15|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:0

10.主要部分の背景を変えよう!

さて、やっと書いてくれるかって感じ???

(;´Д`A ```
やっぱり書く順番まちがったかなぁぁ
ニャハハ☆(゜∇゜☆)(☆゜∇゜)☆ニャハハ

ってことで、ここでは次の背景色の変え方を紹介しますです。
くどいようですが、背景には画像を挿入することも当然可能です。
が、まだここでは紹介しませんです。
なぜなら、あくまでもくぅたん日誌の作り方ですから。。
(。・w・。 ) ププッ

説明する背景は、
?記事部分の背景(+Post部分の背景)
?サイドバー部分の背景
?記事部分の枠外の背景

ではでは、どうすりゃ変わるか??
[10.主要部分の背景を変えよう!]の続きを読む
  1. 2005/04/14(木) 13:39:32|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:0

11.サイドバーを分類したい!

本日は仕事に気が乗らないので、
じゃんじゃん書きまくってますが・・・
...( = =) トオイメ

サイドバーに「こうさぎ」などを設置している方が多いと思いますが、
最近のブログパーツは楽しいものが多くて
あれよあれよという間にパーツが
ごちゃになっていませんでしょうか?

ここで紹介するのは、そんなパーツの整理方法です。

まぁ、要はパーツにもタイトルバーをつけてあげようって
話ですよん。。。

どうすればいよいかというと、
[11.サイドバーを分類したい!]の続きを読む
  1. 2005/04/14(木) 13:56:35|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:3

12.記事の枠を変更しよう!

背景を変えたのに、記事の枠の色が合っていない!!
って思ってる???

そんなときは、ここをいじれば
Love is OK!!

いつもと同じように・・・ [12.記事の枠を変更しよう!]の続きを読む
  1. 2005/04/14(木) 16:20:30|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:3

13.サイドバーにも枠をつけよう!

さてさて、せっかく記事部分の枠をカスタマイズしたので、
サイドバーの各々にも枠をつけたいなんて衝動が沸いてこないですか??

じゃ、どこをいじればよいかというと・・・ [13.サイドバーにも枠をつけよう!]の続きを読む
  1. 2005/04/14(木) 21:42:56|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:9

14.あいさつ文を流そう!!

IEの下の方(ステータスバーといいます)に、
よく、あいさつ文が流れているサイトを見かけませんか?

今回はあれをやってみましょう!!

作業はとっても簡単ですよん。

さて、 [14.あいさつ文を流そう!!]の続きを読む
  1. 2005/04/14(木) 21:52:01|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:8

15.タイトルバーに画像を挿入しよう!

さて、ではでは、次に記事のタイトルや
サイドバーのタイトル部分に画像を挿入してみましょうか。。

使用したい画像は、「3.」を参照してアップロードしてくださいませ。

タイトル部分の画像なので、素材屋さんで小さい画像を
借りてくるとよいと思います。

んじゃ、
[15.タイトルバーに画像を挿入しよう!]の続きを読む
  1. 2005/04/15(金) 09:22:02|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:10

16.記事にアクセントをつけよう!

まぁ、記事にアクセントっていっても、右下に画像をいれましょかってだけなんだけどね・・・
ヽ( ´ー`)ノフッ

やることは、「15.」とほぼ同じっす。

どこに対して同じことをやるかというと、 [16.記事にアクセントをつけよう!]の続きを読む
  1. 2005/04/15(金) 09:57:02|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:8

17.「16.」をやったら困った!!!

「16.」をやってみたら、
なななななんと???
コメントを書く欄が変なことになってる!!!
“(*`ε´*)ノ彡☆バンバン!!

って方へ・・・

次の作業をがんばってくださいませ??
o(*⌒O⌒)bふぁいとっ!! [17.「16.」をやったら困った!!!]の続きを読む
  1. 2005/04/15(金) 12:53:12|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:0

18.記事の見せ方にアクセント!

まぁ、これは結構みな知ってると思うんだけど、

よく、ブログで、

「続きを読む…」

ってなってるのを見かけませんか?
これってどうやったらできるの?
難しい???
なんて思ってないでしょうか?

実は、これは簡単にできちゃうですよん。 [18.記事の見せ方にアクセント!]の続きを読む
  1. 2005/04/15(金) 22:22:12|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:0

19.記事の見せ方にアクセント其の2

「18.」で説明した方法以外に記事の見せ方には
こんなんもあると思いますです。。。

ただ、以下の方法は、メインテンプレートやアーカイブテンプレートではいいと思うけど、1記事テンプレートには対応しないほうがよいかと・・・

ここでは、
記事部分のサイズを決めてしまって、
それをはみ出す部分は、スクロールバーで対応!!
っていう説明をしますです。
ヽ(=´▽`=)ノ

[19.記事の見せ方にアクセント其の2]の続きを読む
  1. 2005/04/15(金) 22:40:51|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:5

20.「19.」のバーの位置が気に食わない!

「19.」の対応をした方、

なんとなくスクロールバーが内側によってて、
気になりませんか?
特に、「16.」「17.」の対応をした方で、
右側に画像をつけた方は、スクロールバーとかぶって
“(*`ε´*)ノ彡☆バンバン!!
って感じだと思います。。。

ちょっとだけ位置調整をしましょうか。。 [20.「19.」のバーの位置が気に食わない!]の続きを読む
  1. 2005/04/15(金) 22:54:02|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:0

21.現在の閲覧者設定をしよう!

よくブログで、
現在の閲覧者は**人です。ての見かけませんか?

これあると、
(゜O゜;アッ!いま、誰かと一緒にこのブログ見てる!!
ちょっと嬉しいかも。。
って気になりませんか?

( ̄△ ̄;)エッ・・?
ならない???
。。。。(( T_T)トボトボ

さておき、どうすればできるのかというと、

[21.現在の閲覧者設定をしよう!]の続きを読む
  1. 2005/04/15(金) 22:55:44|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:0

22.コメント入力欄をアレンジしよう!

ここまできたらずいぶんとカスタマイズも
慣れてきたでしょ
ヽ(=´▽`=)ノ

ここでは、コメント入力欄のカスタマイズについて
説明しますですよん。

例のごとくスキンのスタイルシートを選択してください。

んで、次の文を追加してください。 [22.コメント入力欄をアレンジしよう!]の続きを読む
  1. 2005/04/15(金) 23:00:43|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:3

23.検索機能をつけよう!

20050521
タグミス修正。
(ToT)ゞ スンマセン



そうそうめったには使わないけど、
いざ、あると便利なのが
ブログ内検索機能!!!

いろんな付け方があると思うけど、
ここでは、くぅたん日誌的つけ方だけを
説明しますので、
横につけたい片は、サイドバーにつけるなりの
アレンジをしてください。

サイドバーにつける場合で、
つけ方がわからなぁぁぁぁい
って場合は相談してくださいでし。

じゃ、本題に入ろう! [23.検索機能をつけよう!]の続きを読む
  1. 2005/04/16(土) 08:35:53|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:13

24.記事のタイトルを揺らしてみる?

まぁ、これは正直どうなんだろうって
気もしますが・・・

くぅたん日誌では、記事のタイトルがゆらゆらしてます。

あれは、どうすればできるのかというと・・・

[24.記事のタイトルを揺らしてみる?]の続きを読む
  1. 2005/04/16(土) 08:58:16|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:2

25.サイドバーにもスクロールバー!

ってなことで、
サイドバーにもスクロールバーをつけたいですか?
(´△`) えっ?
そんなもんいらん??
(;´Д`A ```

まぁ、一応簡単なので説明だけ書くでし。
[25.サイドバーにもスクロールバー!]の続きを読む
  1. 2005/04/16(土) 19:11:55|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:8

26.音楽を流そう!

ブログによっては、MIDIを流しているとこも
ありますねぇぇ。。。

(´△`) えっ?
MIDIってなに????
( ̄へ ̄|||) ウーム
簡単に説明すると、簡易的な音楽ファイルです。
( ̄Д ̄;;
説明下手ですんまそん・・・
m(。_。;))m ペコペコ…

じゃ、どうすりゃいいのさ、って話ですが、
まぁ、いろんな方法があるのですが、
ここでは、聞きたい人が自分でスタートボタンを
クリックしないと、音楽が流れない方法を書きますね。

MIDIを流す方法はほんとにいろいろあるのですが、
もっともポピュラーな方法は・・・


[26.音楽を流そう!]の続きを読む
  1. 2005/04/17(日) 07:26:38|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:4

27.アーカイブをリスト化しよう!

さぁて、だんだんと細かい部分を
カスタマイズしていきましょうか。。。

アーカイブってあるですよね。
これって、現在は、
月別、日別、カテゴリ別
の3種類あるのですが、おそらくは日別アーカイブは毎日何件も投稿してる人しか設置してないと思いますので、ここでは、月別とカテゴリ別について、説明しますです。

カテゴリは自分で増やさないと増えないからたいしたことないかもしれないですけど、月別アーカイブは、月が替わるごとに1個ずつ増えていくので、1年続けると12行にもなってしまいます。

「25.」で対応してもよいのですが、ここでは、
ドロップダウンリスト
にしてみましょうか。。。

( ̄△ ̄;)エッ・・?
前置き長い??
(ToT)ゞ スンマセン

ではでは、


[27.アーカイブをリスト化しよう!]の続きを読む
  1. 2005/04/17(日) 11:09:19|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:0

28.カレンダーを自作しよう!

?????((((((ノ゜?゜)ノあぁ
ついにここまでたどり着きましたか・・・

ここでは、簡単カレンダー自作方法を説明しますです。

くぅたん日誌のカレンダーを見ながら読むとよいです。。

が、正直、くぅたん日誌のカレンダーはセンスない!!
そのうちオシャレに変身させたいのですが・・・
力尽きました。。
...( = =) トオイメ

話がそれてしまったですが、どうすりゃカレンダー自作できるのか。。

まずは、

[28.カレンダーを自作しよう!]の続きを読む
  1. 2005/04/17(日) 21:04:15|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:8

29.最新記事欄を自作してみよう!

ここから先に紹介していく

29.最新記事欄を自作してみよう!
30.最新コメント欄を自作してみよう!
31.最新トラックバック欄を自作してみよう!

は、その後に説明する
32.最新コメント欄をツリー化しよう!
33.更新マークをつけよう!
34.サイドバーを折りたたみ式にしよう!

の前処理みたいなもんです。
だんだんと複雑になっていきますが、

裏くぅたん日誌では、単にコピーすればOKというレベルで書いていきますので、がんばってついてきてくださいねぇぇぇ!
エイエイ (ι´Д`)ノ オー!!

じゃ、まずは、最新記事欄を自作してみましょう。。
[29.最新記事欄を自作してみよう!]の続きを読む
  1. 2005/04/18(月) 11:18:20|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:0
次のページ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。