Master[ Admin ::: Write ::: Comment ]
自己満足のテンプレートを作成してまっす♪テヘ
カレンダー
03 2024/04 05
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
プロフィール
HN:
向日葵ゆう♪
性別:
女性
日向
QRコード
ブログ内検索
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。




ベテランの方には全く必要ないと思いますが
初心者だけど ちょっと変えてみたい…と思われている方の為に
ちょっとカスタマイズの詳細を…

真ん中にカレンダーが縦に表示されている訳ですが
この縦の長さが上手く調節できなかった訳で…^^;

途中でちょん切れるのはイヤだったので ムリクリ長さを調節しました。
( 変動してフッターまできちんと表示できれば良かったのですが
  そこまでの技も持ち合わせず カレンダーブロックの下部の長さを固定しました^^;)



で その結果 上記のように プラグインと記事部分に
思いっきり空白ができてしまいました^^;
逆に テンプレートのDLページのプレビューだと
プラグインの量が多く 途中でカレンダー帯(?)がちょん切れてしまいます。

なので それぞれご自分のサイズに合わせて
カレンダーブロックの長さを変更してスッキリ表示できるよう
変更の仕方を説明します。

まず『テンプレートの作成/編集画面』の右下のCSS記述欄から
『/******カレンダーブロック用デザイン******/』を探してください。
そこからゆっくり下に行くと

#CalenderBlock ul {
margin-top:0px;
padding:0px;
margin:200px 0px 1500px 0px;
height:100%;
}

という部分があるので そこの
margin:200px 0px 1500px 0px;
の 1500pxがカレンダー枠の下部の長さ指定の部分です。
私のように プラグインも記事も少ないという方は
1500pxを 1200pxや1000pxなど 数値を少なくすると
カレンダーの帯が短くなり プラグインや記事部分の空白がなくなります。

逆に プラグイン&記事が沢山の方は
1500px以上で ご自分の表記に合わせて 数値を増やしてください。
すると ちょん切れる事無く フッター部分まで帯が延びます。


あと背景を変更して それに伴いカレンダーの帯の色も変えたい方。

背景の変更は 左側の BODYの所の
背景画像という所にアップロードした画像のアドレスを入れれば
簡単に変更できますね。

で カレンダーブロックの背景色(帯の部分)は
先ほどのCSS編集部分の

/******カレンダーブロック用デザイン******/
#CalenderBlock{
text-align:center;
font-size:11px;
font-weight:bold;
color:#FFFFFF;
width: 30px;
height:100%;
background-color:#CC0000;
font-weight:bold;
margin:0px 0px 0px 0px;
float: left;
}

の『background-color:#CC0000;』
の#CC0000を変更します。

背景画像を変えて カレンダーの背景色を#83ab83に変更したのが
下記になります。



これに合わせて プラグインタイトル色等は 左側から変更してください。

あとは 背景画像を変えた場合
フッター部分の『phot by Anghel』というリンク部分
右上のHTML編集欄の 一番下の

<div id="FooterBlock">
designed by <a href="http://giveasigh.blog.shinobi.jp/" target="_blank">Himawari-you</a> * phot by <a href="http://aria.ciao.jp/anghel/" target="_blank">Anghel</a><br>
<!--CM1--> <!--CM2-->
</div>


* phot by <a href="http://aria.ciao.jp/anghel/"; target="_blank">Anghel</a>

下線部を 『素材サイトのURL』と『サイト名』に変更してください。

以上長くなりましたが
初心者の方で 私の物をカスタマイズする事によって
テンプレート作成の楽しさを知っていただけたら嬉しいなぁ♪という思いから説明させていただきましたぁ

このテンプレートについて ここをいじってみたいけど分からない…
という方は コメント欄にお願いします。
お答えできる範囲で 返答します^^;
PR
この記事にコメントする
Name
Title
Mail
URL
Comment
Font-Color
Pass Vodafone絵文字 i-mode絵文字 Ezweb絵文字
はじめまして
縦カレンダーのテンプレが気に入って
早速使わせて頂いてます♪

私はカスタマイズ初心者なので
少々教えて頂けると嬉しいです。

現在左側にお気に入りを表示させていると
スライドさせないと全体が見れないので
小さい画面でもひと目で全体が見れるように
表示をコンパクトにしたいと思っています。
詳しく言うと、プラグインの左側の余白をもう少し少なく、
プラグインの横幅ももう少し狭く、
カレンダーの右の表示部分ももう少し狭くしたいです。
あと、ブログタイトルの色が紫色になっているのを
カレンダーの所と同じ赤色に変更したいです。
宜しくお願いいたします。
2006/05/02(Tue)17:30:10 編集
遅くなりましたぁ
向日葵ゆう♪
気に入っていただいたようで 大変嬉しいです♪
ありがとうございますぅ~♪

ご質問の件ですが
かなりチマチマした作業になりますが…^^;
以下の変更は全て
テンプレート編集画面の右下のCSS編集欄で行います。


>プラグインの左側の余白をもう少し少なく、

 /*全体の設定*/
 #LyaoutBlock {
 width:850px;     ←全体の横幅の設定です。
 text-align: center;   
 margin-left: 100px;  ←左側の余白の設定です。
 }

 なので margin-leftの設定を100から
 お好みのサイズに変更(50とか30など)
 していただくと もっと左に表示されます。


>プラグインの横幅ももう少し狭く、

 /******プラグインブロック用デザイン******/
 /*プラグイン表示箇所全体の設定*/
 #PluginBlock {
 width: 220px;    ←プラグインの横幅
 text-align: left;
 float:left;
 margin-top: 10px;
 margin-bottom: 10px;
 }
 
 のwidthをお好みのサイズにしてください。


>カレンダーの右の表示部分ももう少し狭くしたいです。

 /******記事ブロック用デザイン******/
 /*記事繰り返し処理全ての部分の設定*/
 #EntryBlock {
 width:548px;
 text-align: left;
 }

 ここもwidthが 横幅の設定です。
 

 それぞれの横幅の編集をした場合
 ま伸びた感じになると思うので
 (カレンダー部分と右側の表示の間に空白)
 余白設定をした /*全体の設定*/の
 widthを変更する事で 調節してください。
 

>あと、ブログタイトルの色が紫色になっているのを
>カレンダーの所と同じ赤色に変更したいです。
>宜しくお願いいたします。
 
 これは…リンク色で 一度もクリックして無い場合だと
 赤い文字で表示されていると思います。
 行った事があるよって事で 色を変えたのですが
 それをしない場合は
 /*****全ブロックの共通設定*****/ 内にある

 a:visited,a:active,a:hover
 のcolorを#CC0000に変更すると 赤いままになります。


で 解決できるかなぁ・・・・?^^;
2006/05/30(Tue) 09:02
はじめまして
はじめまして。『Aqua』を使わせてもらってます。ちょっと、カスタマイズしてみたいのですが、どこを触ったらいいものか‥さっぱりなので、お時間のあるときに教えてください。

1.左側のトップにあるカレンダー
記事のある日付と、ない日付の色の違いが個人的にわかりにくいので、記事のある日付の色を変えてみたいと考えています。

2.アイコン画像
先ほどのカレンダー等の項目の文字の前にある丸いAquaなアイコン、記事の先頭にくる音符アイコンをちょっと変えてみたいを考えています。

以上2点、宜しくお願いいたします。
2006/07/30(Sun)14:18:33 編集
こんにちはぁ~
向日葵ゆう♪
>1.左側のトップにあるカレンダー
>記事のある日付と、ない日付の色の違いが個人的にわかりにくいので、記事のある日付の色を変えてみたいと考えています。

えっと これって多分ね・・・
テンプレート編集画面の左側一番下に『CALENDAR』って項目があって
その一番下の「記事がある日付部分の文字」の色という所に
好きな色を指定すれば 変ると思うので
ちょっと試してくださいませ。
( いい加減でゴメンナサイ (; ̄ー ̄A アセアセ・・・ )

>2.アイコン画像
>先ほどのカレンダー等の項目の文字の前にある丸いAquaなアイコン、記事の先頭にくる音符アイコンをちょっと変えてみたいを考えています。

テンプレート編集画面の左側の
『Entry』の『記事タイトルの背景画像』と
『PLUGIN』の『プラグインタイトルの背景画像』の所の
【画像を使用する】ボタンをクリックして背景画像のURLを入れます。
そして繰り返さないにチェックを入れて 左中央または左下に設定してください。
その時に 「記事タイトル余白」と「タイトル余白」の左の設定は
アイコンのサイズによって異なるので 変えてくださいねん。

出来なかったら また書き込んでいただいて宜しいでしょうか?^^
お願いしまぁ~す♪ ペコリ(o_ _)o))
2006/07/31(Mon) 10:24
ありがとうございます
げん URL
お忙しいなか、早速の対応‥誠にありがとうございます。さっそく、いじってみたいと思います。
2006/08/01(Tue)23:30:27 編集
暑い日が続きますね…
げん URL
先日は、カスタマイズの質問にご回答いただきありがとうございました。

HTMLやCSSも少しずつ勉強して、ちょこちょこカスタマイズして遊んでいます。
たまに、ブラウザの表示の仕方…IEとFireFox等でデザインが違ったりして
頭をかかえていますが、それも楽しいですねw

さて、先日…質問したカレンダーPlugin部分の記事のある場所の文字の色なんですが、
テンプレート編集画面の左側一番下に『CALENDAR』って項目から
編集しようとすると、CSSにそのような記述がないとエラーがでてしまいます。

で、直接CSSのファイルを触ってみて、

/*記事が存在する場所の設定*/
.CalendarTdLink {

という場所まではつきとめて、文字のサイズは変化するのですが、文字カラーは
変化しないんです。どうも、リンクがある場所の文字色の設定が適用されているみたいなんですが…

どのように解決したらいいでしょうか?
よかったら、アドバイスをいただけると幸いです。
2006/08/27(Sun)12:24:05 編集
この記事へのトラックバック
この記事にトラックバックする
≪ Back  │HOME│  Next ≫

[15] [14] [13] [12] [11] [10] [9] [8] [7] [6] [5]
Powered by NinjaBlog Copyright(c) ゆうの遊び場♪ All Rights Reserved.
photo by +Mappy+ designed by Himawari-you 忍者ブログ[PR]