ブログの変更したい部分をソースで見てみるとスタイルシートの指定場所がわかる;FC2ブログ・プチカスタマイズ   

ブログの変更したい部分をソースで見てみるとスタイルシートの指定場所がわかる|FC2ブログ・プチカスタマイズ

  このページはFC2ブログ・プチカスタマイズの ・基本のHTMLとスタイルシート | スタイルシートを学ぼう| ブログの変更したい部分をソースで見てみるとスタイルシートの指定場所がわかる に関する情報を紹介しています。
  FC2ブログ・プチカスタマイズは、FC2ブログをちょっとだけ改造して、使い易くします。  FC2ブログの魅力は、初心者は初心者なりに、上級者は上級者なりにテンプレートやスタイルシートを改造して色々と変えることができるところ。 このブログでは、初心者から中級者向けのFC2ブログカスタマイズ法をあれこれご紹介。  FC2ブログを楽しみましょう。

 


 
 
Top Page > スポンサー広告 > ブログの変更したい部分をソースで見てみるとスタイルシートの指定場所がわかる・基本のHTMLとスタイルシート > スタイルシートを学ぼう > ブログの変更したい部分をソースで見てみるとスタイルシートの指定場所がわかる


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




web拍手 by FC2←これはFC2拍手。お礼のコメントがあるよ。拍手してみて。 FC2 Blog Ranking

このエントリーをはてなブックマークに追加

 ブラウザによって違うのかもしれないが、管理人の使っているFirefoxというブラウザはwebページの一部分を範囲指定してそのソースを見ることができる。

 ソースを見ると、ブログのテンプレートを改造するのに役立つヒントが見つかるかもしれない。

 

 たとえば、このブログのヘッダー部分を範囲指定して、ソースを見てみると下のようになる。

ヘッダー画像FC2ブログ・プチカスタマイズ

 

<div id="headBlock">
<div class="BlogName">
<h1 id="title"><a href="FC2'" designtimesp=28630>FC2'" designtimesp=25796>FC2'" designtimesp=22798>http://tadameru2.blog91.fc2.com/">FC2ブログ・プチカスタマイズ</a></h1>
</div>
<div class="description"> FC2ブログをちょっとだけ改造して、使い易くします。&nbsp;&nbsp;FC2ブログの魅力は、初心者は初心者なりに、上級者は上級者なりにテンプレートやスタイルシートを改造して色々と変えることができるところ。  このブログでは、初心者から中級者向けのFC2ブログカスタマイズ法をあれこれご紹介。&nbsp;&nbsp;FC2ブログを楽しみましょう。</div>
<a name="page_top"></a>
</div>

 

 このソースからいくつかの情報がわかる。

 

ソースの表示とスタイルシートを比べてみよう

・<div id="headBlock">

 この部分はスタイルシートのheadBlockに書かれている。

#headBlock {
  width: 888px;
 margin: 5px 0px 0px 0px; padding-top: 0px;
 text-align: left;line-height:1;
 border: 1px solid #ff8899;
 background-color: #FFCCCC;
}

 

・<div class="BlogName">

.BlogName {
 font-family:"HG丸ゴシックM-PRO", "Verdana", "MS Pゴシック", "Arial Black", "Impact", "Osaka";
 font-size : 135%;
}

 

・<h1 id="title">

html>h1 {
     font-size: 135%; margin: 15px 10px 10px 10px; padding: 10px;
}
#title {
 font-size: 120%;
 color: #333; margin: 15px 0px 0px 0px;
 padding: 5px;
}

.BlogName h1 a:visited {
 color:#555; text-decoration : none;
}
.BlogName h1 a:hover {
 color:#ff5500; text-decoration : underline;
}

 

・<div class="description">  

.introduction {
 font-family: "Verdana", "MS Pゴシック", "Arial Black", "Osaka"; color: #555;
 font-size: 100%;
 margin-top: 20px;
}

 とまあ、こんな具合。

 ソースの<div id="○○">、<div class="○○">の部分をスタイルシートの中で探すと、そこには、範囲指定した部分のスタイルが記載されている。

 

 スタイルシートの変更をしたいときには、その部分を変更すれば大体うまくいく。

 まあ、スタイルの指定の仕方を覚えていないとどうにもならないが。

 スタイルの指定の仕方はインターネットを検索すれば大体出て来る。



サイト内の同タグへのリンク: スタイルシート  ソース  テンプレート  カスタマイズ 
他のサイトへのタグリンク : スタイルシート ソース テンプレート カスタマイズ

web拍手 by FC2←これはFC2拍手。お礼のコメントがあるよ。拍手してみて。 FC2 Blog Ranking
このエントリーをはてなブックマークに追加
関連記事リスト
  カテゴリ名:[スタイルシートを学ぼう]
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://tadameru2.blog91.fc2.com/tb.php/159-7ef1f889
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。