ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - カスタマイズの基本の手順

カスタマイズの基本の手順

ある程度ブログに慣れてくると自分好みにブログを変えてみたくなると思います。ほとんどの人のやりたいカスタマイズは文字の大きさ・色を変えたらり、背景の色や画像を変えたり、タイトル部分を好きな画像に変えたりだと思います。

このカスタマイズのやり方や考え方は基本的に同じです。ただ最後のタグを変える所が、文字ならfont、色ならcolorなどと違うだけなので基本さえわかってしまえば、あとはそれほど苦労はしないのでまずは基本を覚えましょう!

カスタマイズの基本の手順

1.まず最初に自分がカスタマイズしたい場所をテンプレート中で使える変数一覧から該当する変数を探します。(ブログタイトルなら<%blog_name>、記事の部分は<!--topentry--> ~ <!--/topentry-->といった具合にです)

2.該当する変数がわかったら、次はHTMLの編集を開いてどこに変数があるのかを探します。(Ctrl+Fを使って検索すると簡単に探すことができます)

3.探すことができたらここからHTMLを編集する場合とスタイルシートを編集する場合の2つに分かれます。

■HTMLを編集する場合
そのままHTMLを編集すればカスタマイズできます。例えば、記事の中の年月日の表示を消したい時は、
<%topentry_year><%topentry_month><%topentry_day>
を削除すれば消えてしまうし、
逆に曜日を表示したい時は、
<%topentry_youbi>
を追加すれば記事の中で表示されるようになります。
HTMLを編集する場合は、ここでカスタマイズ終了です。

■スタイルシートを編集する場合
大体は変数を囲っているタグがあるのでそのタグを探します。
<H2><<A href="<%url>"><%blog_name></A></H2>
例えばブログタイトルを<H2>というタグで囲っていたり、
<div class="○○○"><A href="<%url>"><%blog_name></A></div>
この様にdiv class="○○○"と独自の名前を付けて囲ってあったりします。
どんなタグで囲っているのかを見つける事ができたら次にそのままスタイルシートの方に移ります。

4.今度はスタイルシートを先ほど見つけた囲っているタグや名前で検索します。見つけたらそこの中にある自分が変えたいタグを編集します。
.○○○{
font-size:12pt;
font-weight:bold;
text-align:right;
text-valign:bottom;
padding:0px 100px 0px 0px;
margin:0px;
color:#000000;
vertical-align:bottom;
}
となっていた場合、文字の大きさを変えるならfont-size:12pt;を、色を変えるならcolor:#000000;を変えれば出来上がりです。

5.もし、{~~~}の中に自分が変えたいタグがない場合は、自分で記入すれば変える事ができます。

ブログで名前を付けて指定している構造は、[全体の文字色>記事部分の文字色>記事のタイトル部分の文字色]などの様にだんだん細かく指定しているものがほとんどだと思います。
そして全体よりも名前を付けて個別に指定してある方が優先します。(全体を白で指定してあっても、個別に青で指定してあれば青色になります。)

自分で独自に名前を付けて指定したい時は、HTMLで「class」という属性の場合は、スタイルシートで「.」名前で指定して、HTMLで「id」という属性の場合は、スタイルシートで「#」名前で指定します。

ほとんどのカスタマイズはこの流れで進んでいくので、この基本を覚えておいて下さい。ここを読んだだけでは、いまいちわからないと思いますが、実際に自分でカスタマイズをしていくとなんとなくわかっていくと思います。

div classって何?

上の説明で出てきたdiv classというのはHTMLを見ていると、たくさん出てくると思います。これは何なのかというと、divはまとめるという意味で、classは属性みたいな物です。1つ1つブログの中の物を指定して大きさや、色などを決めてタグを書いていたら、HTMLやスタイルシートの長さがめちゃくちゃ長くなってしまいます。

なので1つスタイルを名前を付けて決めてスタイルシートに登録しておけば、あとはそれを使いまわす様な感じで楽ができます。ブログをよく見ると文字の大きさ、色などの様々なブログの中身は同じ物で構成されていると思います。

イメージがわかない人がいるかもしれないので、具体的な例をあげてみたいと思います。
例えば、「文字の大きさは13pxで色は黒色、文字の間隔は普通で行間は広め、文字のフォントはかわいい字で、画像との間隔は全く空けずに、背景の色は白」というスタイルを決めます。
これを本文記事とコメント欄とトラックバック欄の3つに使いたいと思った時に、3つ全部にこの長いスタイルを書くのはめんどくさいし、長くなってしまうので逆にわかりづらいですよね。そこでこのスタイルは「1-A」という名前をつける事にしましょう!そうしたら、いちいち指定を全部書く必要がなく、簡単に「1-A」本文記事・「1-A」コメント欄・「1-A」トラックバック欄と簡単にスタイルを指定できますよね。

ブログの中身はほとんどこの様に決められています。でもたくさん名前を付けて決めてあるので、慣れていないと最初は少しわかりづらいかもしれませんね。

いよいよ次からは実際にカスタマイズの紹介です。まず最初は「文字のサイスを変えたい!」からです。



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
コメント欄
明けましておめでとうございます!
コメント欄のカスタマイズ゙をしたいのですが、どうのようにやったらいいのか
苦戦中です。
①欄の幅を広げたい
②枠の線種を変更したい
③背景の色を変えたい
いろいろやってみたのですが・・・
よろしければアドバイスください。
宜しくお願い致します。
pさんへ
明けましておめでとうございます!
コメント欄のカスタマイズですか。3つの質問はあまりにも漠然としているので
「FC2ブログ ユーザーフォーラム」 http://blog.fc2.com/forum/viewforum.php?f=9
で質問していただけるとありがたいです。こちらならすぐに返事がもらえると思います。
あと、質問する時にはもう少し具体的に質問をした方がさらに的確な回等をもらえると思います。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/462-f99c16a9   

Template Designed by DW99