スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
前後の記事
最近の記事
▼test
▼zenbackを設置してみた
▼FC2アプリケーション?
▼三行に要約するサービス
▼EMチャージ契約
▼PIYO APIコンテストで準グランプリに選ばれた
▼FC2用語辞典、FC2スパイダーを更新
▼文字サイズチェッカ
▼APIコンテスト応募予定?作品完成
▼FC2ミニブログPIYO APIの解説とサンプル
▼zenbackを設置してみた
▼FC2アプリケーション?
▼三行に要約するサービス
▼EMチャージ契約
▼PIYO APIコンテストで準グランプリに選ばれた
▼FC2用語辞典、FC2スパイダーを更新
▼文字サイズチェッカ
▼APIコンテスト応募予定?作品完成
▼FC2ミニブログPIYO APIの解説とサンプル
fc2tyle_custom[トップのみ表示部分のカスタマイズ]
<<カスタマイズトップへ戻る
・div class = "blogtop"
・div class = "blogtop_title"
・div class = "blogtop_body"
・blogtop_title
・blogtop_title a:~
・blogtop_body a:~
▲トップへ
▲トップへ
というテキストの部分です。この文字を変えるとトップページ一番上のタイトルが変わります。このままの文章だとおかしいので、例えばあなたのブログ紹介に使うのであれば「▼当ブログについて」などとするのが良いでしょう。ここにオススメ商品を載せるのもありですし、右メニュー部分の「最近の記事」部分を持ってきて新着記事をトップに出すのもいいかもしれません。
▲トップへ
ここに文章を打ち込んでみたり画像を張ってみたりして下さい。
▲トップへ
この領域の内側にあるテキストなどとの間隔を指定するのがpadding[パディング]です。padding:0pxとなっていますが、これは左の領域内側との間隔を0にするという事です。少し余白を持たせたいならば数値をpadding:上余白px 右余白px 下余白px 左余白pxとそれぞれ大きくして指定して下さい。 margin[マージン]との違いを理解するのに時間がかかるかもしれませんが、簡単に違いを申しますと、marginは領域の外側との間隔、paddingは領域の内側と内側にあるテキストなどとの間隔をそれぞれ指しており、間隔を空ける対象が違います。
borderはトップページでのみ表示される部分の外枠です。詳しくは記事内での見出し例を見て下さい。
text-align:leftは文章を左寄せにしています。中央寄せする場合はcenter、右寄せする場合はrightと指定して下さい。
▲トップへ
というテキストの部分です。背景を紺色(#778899)にしています。変更するにはbackgroundのカラーを変えて下さい。
margin-bottomはタイトル部分とその下背景白のコンテンツ部分(blogtop_body)との間隔を指定しています。
paddingはタイトル領域外枠とテキスト部分との間隔(上px 右px 下px 左px)です。
▲トップへ
a:linkはまだ見ていないページへのリンク色、a:visitedはすでに見たページへのリンク色、a:hoverはマウスをリンクの上にのせた時のリンク色を指定し、この場合には背景色も変えています。
▲トップへ
a:linkはまだ見ていないページへのリンク色、a:visitedはすでに見たページへのリンク色、a:hoverはマウスをリンクの上にのせた時のリンク色を指定しています。
▲トップへ
【5】トップページでのみ表示される部分の用語説明
HTML部分
・index_area・div class = "blogtop"
・div class = "blogtop_title"
・div class = "blogtop_body"
スタイルシート部分
・blogtop・blogtop_title
・blogtop_title a:~
・blogtop_body a:~
index_area
FC2ブログ独自変数の1つです。index_areaで囲まれた部分はトップページでしか表示されません。詳しくはトップページでのみ表示させる方法に載せてありますので参考にして下さい。▲トップへ
div class = "blogtop"
スタイルシートで設定したblogtopの読み込んでいます。blogtopはトップページでのみ表示されるボックスの領域全体を指します。▲トップへ
div class = "blogtop_title"
初期段階では「▼トップページでのみ表示されるメニュー」というテキストの部分です。この文字を変えるとトップページ一番上のタイトルが変わります。このままの文章だとおかしいので、例えばあなたのブログ紹介に使うのであれば「▼当ブログについて」などとするのが良いでしょう。ここにオススメ商品を載せるのもありですし、右メニュー部分の「最近の記事」部分を持ってきて新着記事をトップに出すのもいいかもしれません。
▲トップへ
div class = "blogtop_body"
これはトップページでのみ表示されるボックスのコンテンツ部分(背景白)にあたる部分です。ここに文章を打ち込んでみたり画像を張ってみたりして下さい。
▲トップへ
blogtop
トップページでのみ表示される部分全体の設定をしています。この領域の内側にあるテキストなどとの間隔を指定するのがpadding[パディング]です。padding:0pxとなっていますが、これは左の領域内側との間隔を0にするという事です。少し余白を持たせたいならば数値をpadding:上余白px 右余白px 下余白px 左余白pxとそれぞれ大きくして指定して下さい。 margin[マージン]との違いを理解するのに時間がかかるかもしれませんが、簡単に違いを申しますと、marginは領域の外側との間隔、paddingは領域の内側と内側にあるテキストなどとの間隔をそれぞれ指しており、間隔を空ける対象が違います。
borderはトップページでのみ表示される部分の外枠です。詳しくは記事内での見出し例を見て下さい。
text-align:leftは文章を左寄せにしています。中央寄せする場合はcenter、右寄せする場合はrightと指定して下さい。
▲トップへ
blogtop_title
初期段階では「▼トップページでのみ表示されるメニュー」というテキストの部分です。背景を紺色(#778899)にしています。変更するにはbackgroundのカラーを変えて下さい。
margin-bottomはタイトル部分とその下背景白のコンテンツ部分(blogtop_body)との間隔を指定しています。
paddingはタイトル領域外枠とテキスト部分との間隔(上px 右px 下px 左px)です。
▲トップへ
blogtop_title a:~
このタイトル部分にリンクを張る場合のリンク色を指定しています。a:linkはまだ見ていないページへのリンク色、a:visitedはすでに見たページへのリンク色、a:hoverはマウスをリンクの上にのせた時のリンク色を指定し、この場合には背景色も変えています。
▲トップへ
blogtop_body a:~
コンテンツ部分にリンクを張る場合のリンク色を指定しています。a:linkはまだ見ていないページへのリンク色、a:visitedはすでに見たページへのリンク色、a:hoverはマウスをリンクの上にのせた時のリンク色を指定しています。
▲トップへ
前後の記事
最近の記事
▼test
▼zenbackを設置してみた
▼FC2アプリケーション?
▼三行に要約するサービス
▼EMチャージ契約
▼PIYO APIコンテストで準グランプリに選ばれた
▼FC2用語辞典、FC2スパイダーを更新
▼文字サイズチェッカ
▼APIコンテスト応募予定?作品完成
▼FC2ミニブログPIYO APIの解説とサンプル
▼zenbackを設置してみた
▼FC2アプリケーション?
▼三行に要約するサービス
▼EMチャージ契約
▼PIYO APIコンテストで準グランプリに選ばれた
▼FC2用語辞典、FC2スパイダーを更新
▼文字サイズチェッカ
▼APIコンテスト応募予定?作品完成
▼FC2ミニブログPIYO APIの解説とサンプル
トラックバック
この記事へのトラックバックURL:
http://fc2blogshop.blog13.fc2.com/tb.php/83-d4bbe795
コメント
Search
FC2blogビギナーズガイド
コラム
作成したツール
月別アーカイブ
- 2016年 07月(1)
- 2012年 02月(1)
- 2011年 03月(1)
- 2011年 02月(1)
- 2008年 11月(1)
- 2008年 03月(1)
- 2008年 02月(1)
- 2008年 01月(3)
- 2007年 12月(2)
- 2007年 11月(5)
- 2007年 10月(7)
- 2007年 09月(6)
- 2007年 08月(6)
- 2007年 06月(1)
- 2007年 05月(1)
- 2007年 04月(12)
- 2007年 03月(2)
- 2006年 12月(2)
- 2006年 11月(12)
- 2006年 10月(6)
- 2006年 09月(1)
- 2006年 08月(3)
- 2006年 07月(3)
- 2006年 06月(4)
- 2006年 05月(16)
- 2006年 04月(13)
- 2006年 03月(16)
- 2006年 02月(12)
- 2006年 01月(8)
- 2005年 12月(13)
- 2005年 11月(24)
- 2005年 10月(19)
- 2005年 09月(27)
- 2005年 08月(38)
- 2005年 07月(51)
- 2005年 06月(40)
- 2005年 05月(111)
- 2005年 04月(153)
- 2005年 03月(57)
- 2005年 02月(79)