上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 テンプレートのここを変えたいんだけど、どこをいじればいいのか分からない…
 そんな場合に、テンプレートを触る場所を特定する目安になる部分を紹介します。

 素早く探すコツは、画面内検索「Ctrl」+「F」キーを駆使することです。



HTMLを解析する


 まずは、テンプレートの設定画面で、上のボックス「HTML」の編集画面を解析します。
 とはいえ、いきなり読める訳がありません。

 簡単なポイントをいくつか紹介しましょう。




本文の表示位置は?

 FC2テンプレートであれば、公式共有を問わず、本文を表示するときに必ず書く構文があります。それが…




 というもの。ここに記事・追記が入ります。

 これがないテンプレートはあり得ないので、画面内検索をかければ必ずヒットすると思います。



 これがヒットしたら、その前の記述に注目していきます。例えば…

  :
  :
  :
</div>
<div id="main">
<div class="text">
<div class="title"><%topentry_title></div>
<div class="entry">
<div class="entry_text"><%topentry_body></div>
</div>
</div>
<div class="entry_text_footer">
  :
  :


 こんな感じで、検索ヒットしたら、重要なのが「赤字」部分。

class="○○"
id="○○"

 これが非常に大事になってきます。

 この赤字の文字列が、下のボックス、「スタイルシートの編集」テキストボックスの内容に対応しているのです。

テンプレートの見方



 このピックアップした文字(赤字部分)で画面内検索をかけると、下のスタイルシートの編集ボックスでも検索に引っかかる場合があります。
 その項目が、今回の場合は「本文部分」或いは「本文部分の付近」を制御しているスタイルシートという訳です。


テンプレート用 変数一覧|FC2ブログ公式マニュアル

 この、目印になる構文は「FC2テンプレートの独自仕様のタグ」です。いろいろな部分を表示するためのFC2の特別な構文がまだまだたくさんありますので、そこから「目印」を探すのもありだと思います。

 これらの構文から、どのブロックがどのスタイルシートに対応しているか、見当を付けていくという訳です。

 class="○○" id="○○" の「○○」で検索したのに引っかからない…!

 引っかからないこともあります。制作者がとりあえず「クラス」を作ってはいるのだけど、実際CSSで制御する必要がなかった場合や、他のプログラムのためのクラスだったりとか…
 その場合は、新しくCSSにクラスを書き加えることが出来ます。

○○ {
~~~~:~~~;
~~~~:~~~;
}

 このような感じで付け加えられますが、スタイルシートの知識が必要です。





究極のソフト


 画面内検索とプレビューを繰り返すのは、結構大変です。
 その場合は、CSS編集支援ソフトを使うと、効率が飛躍的に上がります。

 お勧めは「ファイアフォックス」のプラグイン「Firebug」
 「グーグルクローム」のプラグイン「Firebug」

 ブログの画面を開いて、ブログの様子を見ながら、リアルタイムにスタイルシートを編集できるソフトです。(HTMLも編集できます。リアルタイムで!)

 「Firebug」で覚えておいた方が良いキーボードショートカットもあります。

「Ctrl」+「C」……コピー
「Ctrl」+「V」……ペースト
※ウィンドウズです



■CSSをもう少し勉強してみたくなったら?
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Fri.11.05.2010
Comment
144
ヘッダー画像について
FC2カスタマイズ初心者です。
現在 standard_3variable1 を使わせていただいています。
ヘッダー画像だけを替えたいのですが方法と、画像のサイズやその他の注意点を教えていただけないでしょうか。
よろしくお願いいたします。

http://hanamiyabisaron.blog.fc2.com/


145
Re: ヘッダー画像について
 綺麗なお花ですね♪

 このテンプレートは、可変式でヘッダ部分は300pxが最小サイズになります。
 スタイルシートがおわかりであれば…

「H1」タグに「padding」が左右「230px」付けてあり、
「min-width」(最小サイズ)が「300px」となっています。

「padding」を解除すれば「h1」ブロックは最小で「230+230+300px」で「760px」となっています。
(marginではなくpaddingを利用しているのは、paddingのちょっとだけ特殊な効果を利用しています)

http://designlabolatory.blog16.fc2.com/blog-entry-299.html
 こちらに詳細が書いてありますので、まずはこちらを確認してみてください。

Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。