ヤプログ!フリースキン(3カラム)基本的なカスタマイズ(色、幅、線変更など)を
図説で説明していきます**
編集するのは

「スタイルシート」の初期設定からある記述のみ

です。
その他のカスタマイズについては講座を参照して下さい**

図で編集したい箇所を探し、該当の数字のスタイルシートの記述を編集して下さい。
※図はページ下にあります。

ヤプログ!「スタイルシート」に含まれる定義済みクラスと基本的なプロパティ、値について

スタイルシートには基本的に
.クラス名の後ろにカッコ→{    } があり、この中の記述内容を宣言と呼びます。
宣言には
プロパティ: 値;
があり、これがデザイン(色 大きさ)などを決定しています。

また、.クラス名の後ろに 「A:link」 などの定義済みクラスがついているものがあります。
そのクラスにこの定義済みクラスを指定する事で、そのクラスのリンク色など更に細かく指定する事ができるようになっています。

まずヤプログで使われている「定義済みクラス」の説明と、よく編集する「プロパティと値」について説明します(・∀・)

★定義済みクラスについて★
A:link
→通常のリンク
A:visited→読み込み済みのリンク
A:hover→マウスを上にのせた時のリンク
A:active→クリックした瞬間のリンク

・・・例えばクラス名「.blog_title」には上記に挙げたような定義済みクラスがついた
「.blog_title A:link」、「.blog_title A:visited」
などがあります。下記表にあるように「.blog_title」はブログタイトルを指定しているクラス名なので、
「.blog_title A:link」→ブログタイトルの通常のリンク
「.blog_title A:visited」→ブログタイトルの読み込み済みのリンク
を示していることになります**

★よく編集する「プロパティと値」について★
数値は通常は「○px」などのピクセルで指定しますが、「%」などもよく使います。
カラーコードが分らない方は検索で調べてみて下さい。私が用意したカラーコード表もあります。カラーコードは3桁でも6桁でもカラーネームでもok。

COLOR: #カラーコード;文字色
FONT-SIZE: 数値;文字の大きさ
WIDTH: 数値;横幅
HEIGHT: 数値;縦幅
MARGIN: 数値;領域と領域の間隔  ※RIGHT、TOPなどは上下左右を指定しています
↑の例):テーブルとテーブルの間隔など
PADDING: 数値;領域内の間隔  ※上記と同じ
↑の例):テーブルとその中の文章の間隔など
BORDER: #カラーコード 数値 線種;枠線の色、幅、線種  ※上記と同じ

★━━━━━━線種の値について━━━━━━★
solid→実線
dotted→点線
dashed→破線
double→2重線

★━━━━━━━━━━━━━━━━━━━━★

BACKGROUND: #カラーコード;背景色
TEXT-ALIGN: 値;文字位置 ※値は「right」が右。「center」が中央。「left」が左。

その他のプロパティ値については
HTMLクイックリファレンス様の「スタイルシートリファレンス」がとっても分りやすいです**
参考にしてみて下さいませ(・∀・)


一番下にある図から、編集したい箇所の番号を探し、下表の該当番号から「スタイルシート」のクラス名を探して編集して下さい☆

※図は重複している部分は番号のみになっている箇所があります。
※編集したい部分に番号がついていない場合は「スタイルシート」ではなく「メイン」〜「1記事」テンプレートの編集が必要だとお考え下さい。

ページ全体に関係するもの→青文字
記事に関係するもの→黒文字
サイドバーに関係するもの→赤文字
で分けています。

該当番号と編集箇所 「スタイルシート」のクラス名
@全体(大テーブル) .range
Aブログタイトル .blog_title
B紹介文 .blog_description
C記事テーブル全体 .entry
D記事タイトル .entry_title
E日付 .date
F記事テキスト .entry_text
G記事本文囲み .entry_layer
H投稿時間、URL、コメント数など .posted
I左サイドバー囲み .side_left
J右サイドバー囲み .side_right
Kサイドバーテーブル全体 .side
Lサイドバータイトル .side_title
Mサイドバーテキスト .side_text
N広告テキスト .side_feed
Oカレンダーテキスト .calendar
Pページ送り .page
Qヤプログ著作権表示 .footer
RページTOP送り .footer_jp
S記事送り .prevew
21:コメントテーブル囲み .comment_layer
22:区切り線 HR 
※クラスではなく要素

1記事ページの画像は一番下です**



↓1記事ページ