Kyon's Customize Memo

なんでも屋のきょんです♪
なんかteacup、最近利用者（年齢層若めww）が多いので作ってみました。

いつもHTML CSS どちらもカスタマイズ可能のブログしかいじっていませんでしたが、
CSSでどれだけ可愛く、しかも簡単にカスタマイズ出来るかやってみようかと思います。

合わせて「きょん」がリニュしていく過程で記事をＵＰしていくので、いずれはどなたかのリニュの参考にでもなればなーという下心有ww

まずは
■基本編･･･気軽にteacupの簡単な機能を利用した基本的カスタマイズ
■応用編･･･CSSを使用して、オリジナルティ溢れたブログにする為のカスタマイズ

に分けて書いていくつもりでする
リニュに合わせて書いていくので、

「これ書いてください」のリクエストは受けられませんorz

きょんのCSS勉強のメモ書き程度に思ってくださいませ〜

またまた機能のみをつかった背景画像の設定方法です。
これでリニュも簡単操作で出来ます**

[1]背景画像を作る
最近はふみなどでよく使われるこんな背景画像の種類がありますよね
■両側固定背景
■右下固定背景　（もちろん上下左右の角、様々）
■縦繰り返し背景（モコ画など）
■全体繰り返し背景

全体繰り返し背景は、機能の「ページ全体の背景画像」のみで出来ますので今回説明は省略します。

■両側固定背景
多くの方が
幅1000×高さ575
で作成されています。
これは画面解像度が「1024×768」に設定されている方の割合が多いからです。
逆に言えば他の解像度の方もいるので、自分が設定した両側固定背景が全て同じように見えていると思ってはいけません。
私の画面解像度は「1280×1024」なので、何も指定せずに両側固定背景を設定されるとこう見えます。↓

wwめちゃくちゃずれまくってます。

なので、あまり「両側固定背景」というのはオススメしていないですが、中央にちゃんと配置させればあまり違和感がない事もあるので設定方法紹介します

■角の固定背景
これはとてもオススメです。どんな解像度環境でもあまり違和感がないです。
人気なのはやはり「右下固定背景」でしょうか**大きさなどは様々です。

■縦繰り返し背景
モコ画などはこれに入ります。ブログの左右に、左右対称のレースやモコモコした繰り返し画像を縦に繰り返します。個人的にはこれが一番好きです♪この背景も全ての環境に適しています

それでは設定方法を追記に書きます

さーどんどん行きましょうかーww
次はブログの肝心要、「タイトル画」の設定です。
よくteacupのブログを放浪すると、タイトル画か途中で途切れているパターンをよく見かけます。
せっかくの「タイトル画」なので、ぴったり、簡単にタイトル画を設定していきます☆

[1]タイトル画を作る
やっぱり出来れば自分で作った方が愛着わくと思います☆
どうしても出来ない方は「ふみ」などで代行して依頼してみましょう。
（きょんも加工屋やってます）→きょんのなんでも屋

■サイズ
基本的に、teacupのブログ幅は「780px」です。高さは好きな高さで平気ですが、きょんのオススメは

幅780px×高さ250px
これぞ黄金比率！！　←
（780×200もいい感じです）
素材も映えるし、いろいろ配置して可愛いタイトル画になるサイズだと思います。
今後も簡単に設定できるように、リニュする際はなるべく同じ幅×高さで作成するのがポイントです。

[2]自由項目を使ってでタイトル画を入れる場所のサイズを設定する

本来は「スタイルシートの直接編集」を編集すれば済むことですが、これだと「機能」だけを使って簡単にリニュすることは出来ません。
色々なクラス、プロパティを編集しないとデザインが変更できないんです。

･･･というわけで、HTMLの中に直接スタイルシートを上書きさせる技で簡単カスタマイズします。


■「デザインの変更」→「サイドメニュー表示設定」を開く。
この中の自由項目1〜3のどれかをチェックし、項目名には好きな名前を入れて選択して設定します。

※既にチェックされている方はスルー

■選択した自由項目を開き、この中に以下記述を追加します。
※既に自由項目がある方は、その編集画面を開き、以下記述を入れます

<STYLE type="text/css"> <!-- #tctoptitlelay { width: 780px; float: left; background-color: transparent; padding: 0px; margin: 0px; height:250px; color: transparent; background-position: center center; background-repeat: no-repeat; } #tctoptitlelay H1 { display:none; } --> </STYLE>
さて、長くなったので追記に書きます

CSSを直接編集すれば、それぞれの色変更などが容易に出来ますが、
今回は「基本編」ということで、機能を使ったベースの色変更＆サイズ変更です。

[1]「デザインの変更」→「こだわりデザイン変更」を開きます


[2]実際にデザインを変更する
特に編集する必要のある箇所です。


記事、サイドバーに使用される文字の色です。ここを変更すると文字色が全て変更されます。


ブログ一番上、タイトルの背景色、サイドバーのタイトル背景が変更されます。
この部分のカラーを変更すると、ブログの「色」が変更されると言ってもいいかもしれません。
よくタイトル画を設定するのでここを「白」にされている方が多いですが、サイドバーのタイトルが消えて見栄えが悪くなるので、きょん的にはオススメしません。
※もちろん好き好きに設定して下さい♪


オススメは「小」ですね。自分が見やすいと思う文字の大きさを指定して下さい。

[3]最後に「設定する」をクリックしてデザインを適用させる

一応これで終了です。
きょんは
「ページタイトルの背景色」を今回「黒」にして、文字サイズを「小」にしてみました。

･･･これでこんな感じになります

まずはカスタマイズの基本となるテンプレート選びですね！
皆様はどのテンプレートを選択しているか分りませんが、kyonはカスタマイズ定番のテンプレートを使用しています。

[1]テンプレートを変更する

図にある一番上「デザインの変更」を選択。次にその下のメニュータブから「かんたんデザイン変更」を選択


デザインのパターン選択。きょんは左にサイドバー　右に記事のレイアウトにして、テンプレートは図のようなシンプルなピンクを選びました。

この講座見てリニュ、カスタマイズする人は、このタイプのテンプレートを選択して下さい。
※オレンジ、グリーン、ブルー、シルバーなどがあったと思います。

設定する　にして、テンプレートを選択して完了♪