Master[ Admin ::: Write ::: Comment ]
自己満足のテンプレートを作成してまっす♪テヘ
カレンダー
02 2017/03 04
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 31
プロフィール
HN:
向日葵ゆう♪
性別:
女性
日向
QRコード
ブログ内検索
×

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

これはいたってシンプルなので 簡単にカスタマイズできるはずですw

テンプレートの編集画面の左側で ほとんどの事ができます。

PR
まずは機能の説明です。
初の3カラムです。
プラグインカテゴリー1~3が左側 4~5が右側に表示されます。

そしてデザインについて。
前作「Aqua Line」と同様
Art-Flash 加工自由な壁紙と素材様から お借りした背景を使用してます♪
プラグインと記事部分には 透ける壁紙を貼り付けています。


 

   *トップ画像*           *フッター画像*


出来るだけシンプルに作ったつもりです。
背景をはずしても いい感じで使用していただけると思います。



    こんな感じw


これはあえて カスタマイズの説明をする必要も無いかなぁ?
と思いますが 念のため・・・w

背景については
「ページ全体の背景」と「トップブロック」の背景と
2種類ありますので 背景を変える時は両方変更しないと
変な事になるので 気をつけてくださいね。

そして 私の作成したテンプレートをお使いの方で見かけるのが
背景を変更しているのに フッターに記載している
「phot by *****」がそのままの方…
背景を変更して ご自分好みにお使いいただくのはいいんです。
「いいんです。」というより 逆に嬉しいんです♪^^
だけど背景を変更したのなら 素材サイトのリンクも変更しないと
「この背景いいなぁ」と思った人が
記載サイトに飛んで「無いじゃんかっ!」となってしまうので
変更してくださいね^^;
変更の仕方は縦カレンダー詳細に記載してますので
そちらをご覧ください。

そして このテンプレートの目玉(?w)となっている
横に走る「Aqua Line」…カレンダーの帯ですね。
このカレンダーテーブルの色変更について。

これも「縦カレンダー」と同じです。
/******カレンダーブロック用デザイン******/
#CalenderBlock{
text-align:center;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
width: 100%;
height:28px;
background-color:#87b4e8;
font-weight:bold;
padding: 8px 0px 0px 0px;
margin:0px 0px 0px 0px;
}

の下線部『background-color:#87b4e8;』の
#以降の6つを変更すると 色が変わります。

というところでしょうか?
って…
説明するほどの事でも無いような気がしてきたけど
まぁ「自己満足♪」という事で♪ エヘ



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

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

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



で その結果 上記のように プラグインと記事部分に
思いっきり空白ができてしまいました^^;
逆に テンプレートの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』と『サイト名』に変更してください。

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

このテンプレートについて ここをいじってみたいけど分からない…
という方は コメント欄にお願いします。
お答えできる範囲で 返答します^^;
Powered by NinjaBlog Copyright(c) ゆうの遊び場♪ All Rights Reserved.
photo by +Mappy+ designed by Himawari-you 忍者ブログ[PR]