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

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

スポンサーサイト

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

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

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

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

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

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

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

まずは、


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

んで、

.calendar { 省略 }
.calendar A { 省略 }
.calendar A:link { 省略 }
.calendar A:visited { 省略 }
.calendar A:active { 省略 }
.calendar A:hover { 省略 }

ってとこの

FONT-SIZE: 12px; で文字サイズを変えてください。
TEXT-DECORATION: underline; を TEXT-DECORATION: none; にするとリンクの下線を表示しないでくれます。

んで、text-align: center; を追加してください。

なお、.calendar A:hover { 省略 }
の FONT-SIZE: 12px; を他のサイズより大きくすると、
マウスを持っていったときに強調(拡大)されますよん。
くぅたん日誌で試してみてくださいでし。
さらに、.calendar A:hover { 省略 }
に 次の文を追加すると、マウスを持っていったときに背景に指定したURLの画像を表示します。
background-image: url('http://yaplog.jp/blog/image/emoji/13.gif');
background-position : center;
background-attachment: scroll;
background-repeat : no-repeat;
赤字部分には、すきな画像のURLを指定してください。

さらに、スタイルシートに次の文を追加してください。

th {
width: 19px; /* セル幅の調節 */
text-align: center;
font-size: 12px; /* 曜日の文字サイズ */
color: #fff; /* 曜日の文字色 */
background-color: #4488bb; /* 曜日の背景色 */
}
.ife
{
background-color: #ff99ff; /* 記事のある日の背景色 */
background-image: url('http://yaplog.jp/blog/image/emoji/51.gif'); /* 記事のある日の背景画像 */
background-position : center;
background-attachment: scroll;
background-repeat : no-repeat;
}
.ifne
{
background-color: #ffff88; /* 記事がない日の背景色 */
color: #47a; /* 記事のない日の文字色 */
background-image: url('http://yaplog.jp/blog/image/emoji/51.gif'); /* 記事のない日の背景画像*/
background-position : center;
background-attachment: scroll;
background-repeat : no-repeat;
}

桃字部分は、好きに変更してください。

今回はやること多いですねぇ・・・

さてさて、次は、サイドバーの機能の追加・編集を選択します。

んで、次の文を追加してください。

追記20050425
隙間に関するスタイルを追加しました。


<!-- カレンダー:始 -->
<div class="side" style="margin-bottom:10px;">
<div class="side_title">
{$BlogCalendarMonth format="%Y年%m月" language="jp"$}
</div>
<div class="side_text">
<table bordercolor="#3377aa" border="2" frame="box" rules="none" cellspacing="2" cellpadding="0" align="center" summary="monthly calendar" style="background-color:#99ddff;">
<tr>
<th abbr="Sunday"></th>
<th abbr="Monday"></th>
<th abbr="Tuesday"></th>
<th abbr="Wednesday"></th>
<th abbr="Thursday"></th>
<th abbr="Friday"></th>
<th abbr="Saturday"></th>
</tr>
<BlogCalendar>
<BlogCalendarWeekHeader>
<tr>
</BlogCalendarWeekHeader>
<BlogCalendarIfEntries>
<td class="calendar ife">
<a href="{$BlogCalendarDayLink$}">
{$BlogCalendarDay$}
</a>
</td>
</BlogCalendarIfEntries>
<BlogCalendarIfNoEntries>
<td class="calendar ifne">
{$BlogCalendarDay$}
</td>
</BlogCalendarIfNoEntries>
<BlogCalendarWeekFooter>
</tr>
</BlogCalendarWeekFooter>
</BlogCalendar>
</table>
</div>
</div>
<!-- カレンダー:終 -->

赤字部分は、ここ を参照してください。

緑字部分は、枠の色と枠ないの背景色を指定してください。
桃字部分は、好きな言葉に変更してください。

この手法は、ここ を参考にして改造しています。

いやぁぁぁぁあ
すげー長い文章になってまったが・・・
がんばってねぇぇぇぇ!
スポンサーサイト
  1. 2005/04/17(日) 21:04:15|
  2. カスタマイズ|
  3. トラックバック:0|
  4. コメント:8
<<27.アーカイブをリスト化しよう! | ホーム | 29.最新記事欄を自作してみよう!>>

コメント

(@'ω'@)ん?

書いた日の背景??
ちょと意味わからないけど、
これはできたってことかな?
(;´Д`A ```
  1. 2005/05/19(木) 19:58:07 |
  2. URL |
  3. あにぃ #RRPcnItQ
  4. [ 編集]

何度もすみません。

書いた日の背景を指定しているのですが出てくれません。
何回やってみてもだめなんです。
画像はアップロードされてるみたいなのですが…。
なんどもすみません!教えてください!
  1. 2005/05/18(水) 23:02:45 |
  2. URL |
  3. #-
  4. [ 編集]

ヽ(=´▽`=)ノ

よかったよかった
V(○⌒∇⌒○)
  1. 2005/04/25(月) 20:40:30 |
  2. URL |
  3. あにぃ #RRPcnItQ
  4. [ 編集]

キレイになったぁo(≧∇≦o)(o≧∇≦)o イエーイ

あにぃさん、キレイに幅が揃いましたぁわぁいヽ(ω・ヽ)(ノ・ω)ノ わぁい♪
ありがとうございました☆
  1. 2005/04/25(月) 20:18:40 |
  2. URL |
  3. SANDY #-
  4. [ 編集]

Σ(=o=;)ギク!!

ごめんちゃいm( __ __ )m
隙間のスタイルを指定しないとだめなので、
次のようにしてください。

<!-- アーカイブ:始 -->
<form>
<div class="side">



<!-- アーカイブ:始 -->
<form style="margin-bottom:0px;margin-top:0px;">
<div class="side" style="margin-bottom:10px;">

さらに、

<!-- カレンダー:始 -->
<div class="side">



<!-- カレンダー:始 -->
<div class="side" style="margin-bottom:10px;">

に修正してくださいませ。。

手間かけさせて、
m(o・ω・o)mゴメンヨ
  1. 2005/04/25(月) 06:30:22 |
  2. URL |
  3. あにぃ #RRPcnItQ
  4. [ 編集]

サイドバーの間隔が!!

あにぃさんっ!
タスケテクレー!ヽ(´Д`;ヽ≡/;´Д`)/

サイドバーなんですが、
機能と機能の間の間隔がバラバラなんです・・・
たとえば、『カレンダー』と『最新記事』の間は
完全にくっついちゃってます(´д`)=3
左のサイドバーは間隔がそろってて
キレイなんですが・・・
どうしたらいいかわかりますか?
(´・ω・`)ションボリ
  1. 2005/04/24(日) 22:49:48 |
  2. URL |
  3. SANDY #-
  4. [ 編集]

~(-゛-;)~

まず、スタイルシートの

.calendar
{ 省略 }

の中に、
PADDING-TOP: 0px

ってあるんだけど、次のように修正してください。

PADDING-TOP: 0px;
「;」が抜けているので追加してください。

これで、カレンダーの日付のずれはなおるはずです。

さて、レイアウトのずれだけど・・・
スタイルシートの、.side { 省略 }
から

MARGIN: 10px;
削除してください。

これで余計に崩れた場合は、元に戻してから、
スタイルシートに次の文を追加してください。

.side2
{
BORDER: #FF1493 2px dashed;
WIDTH: 175px
}

そして、カレンダーやアーカイブを作成するときに追加した文の、
<div class="side">

<div class="side2">

修正してください。

どうでしょうか??
これでなおればよいのですが・・・

なかなか適切な処置が思いつかなくて・・・
ごめんちゃいm( __ __ )m
  1. 2005/04/22(金) 07:10:28 |
  2. URL |
  3. あにぃ #RRPcnItQ
  4. [ 編集]

あにぃさん(>_<。)HelpMe!!

色合いが悪くて、見づらいと思うんですが・・
カレンダーのひとけたの日(1日とか9日とか)の数字が、
センターになりません。・゜゜・(≧д≦)・゜゜・。エーン!!

そして、リスト化したアーカイブとカレンダーの枠が、
他のサイドバーとずれてるんですぅ-----------------^( ToT)^
なぜなんでしょうか??

何度もすみません・・・・
  1. 2005/04/21(木) 23:06:42 |
  2. URL |
  3. SANDY #-
  4. [ 編集]

コメントの投稿

管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://10166.blog8.fc2.com/tb.php/29-f917dacb
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。