上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 当サイトにあるようなシンプルテンプレートをダウンロードして、まずやりたいことと言えば、ヘッダー画像の設置だと思います。
 いろんなFC2テンプレートで応用できるように記述しています。是非とも参考にしてみてください。(元々画像が使われているような、特殊なテンプレを除く)




今回やりたいこと



 ヘッダーに画像を設定する

 まずは、タイトル画像を設置します。タイトル画像をクリックしたら、トップページへジャンプするように設定してみましょう。

 そしてヘッダー部分には、ほとんどのテンプレートに「<H1>タイトル</H1>」タグと「<p>イントロダクション</p>」タグが入っていると思います。
 コレを撤去してしまうと、あまりSEO的に良くないので、残していく方向でカスタマイズを考えてみます。




ヘッダー部分の捜索



 まず最初に、テンプレートHTML内から、ヘッダー部分を探してみます。
 FC2テンプレートであれば「<%blog_name>」という記述があるはずです。画面内検索(「Ctrl」+「F」)などでさくっと探してみてください。ほとんどのテンプレートHTMLで、上部に記述されているはずです。

■場所捜索のコツ

 この場所がカスタマイズしたい部分かなと思ったときは、そこに、以下の特製タグを入れて「プレビュー」すると、場所の確認が出来ます。



テンプレートHTML場所確認の仕方 場所確認プレビュー


 だいたいの場所が分かったら、ヘッダーの内容を解析します。ポイントは「<H1>タイトル</H1>」タグと「<p>イントロダクション</p>」タグです。
 イントロダクションに関しては、「<div class="○○○">イントロダクション</div>」の場合もあります。
 他にも様々なパターンがあります。
 「<%introduction>」と言うのがポイントとなります。これが、ブログの説明を表示する部分になります。

※ヘッダーHTMLの構造例
ヘッダーHTMLの構造例

 これは、当サイトで公開しているテンプレートのヘッダー部分のHTMLの例です。恐らく、一番単純な形の一つだと思います。カスタマイズ向けテンプレートは、基本的にわかりやすく記述されているので大丈夫かと思いますが、もっと複雑に記述されていることもあります。

 もう一つのポイントが「<div id="header">」と言う記述。(idが「class」だったり、「header」が違う記述の場合もあります。)
 これが、ヘッダーの枠の始まり部分、そしてそれに対応した「</div>」がヘッダーの終わり部分を意味します。

HTML入れ子の関係

 複雑な場合も、HTMLの書式を理解すれば簡単です。タグの入れ子の関係に注意して、ヘッダー部分のHTMLを正確に把握してください。




画像とトップページリンクの設置



 それでは、いよいよ画像挿入です。リンクタグ「<a>」イメージタグ「<img>」を組み合わせると、以下のように記述できます。

<a href="/"><img src="http://画像のURL.jpg" alt="ブログタイトル" /></a>


 レイアウト崩れを避けるため、なるべく「ヘッダータグ内」に入れることをお勧めします。




タイトルとイントロダクションを加工



 次に「<H1>タイトル</H1>」タグと「<p>イントロダクション</p>」タグをそのまま残すため、そして、見た目を綺麗にするため、少しだけ加工します。

 こんな感じで加工してみてください。入れ子に十分注意して。

ヘッダーHTMLタグ・改造例

 いっそのこと、まるまるコレをヘッダー部分に上書きするのもありかも知れません。念のため、元テンプレートのバックアップは取っておきましょう。

※上記のHTMLタグです。画像URL、タイトルを入れれば使えます。


 コレでひとまず完成。
 あとは、スタイルシートの整形だけです。




スタイルシートの整形



 最後はスタイルシートを整形します。
 「<H1>タイトル</H1>」タグと「<p>イントロダクション</p>」タグは上に押しやってしまいましょう。

 まずは、スタイルシートの変更箇所を確認です。
 コピペで上書きしていない場合は、ヘッダーの名前を確認します。

<div id="header">

 まずはコレ。
 ほとんどのブログで、ヘッダー部分の大枠の名前は赤字の「header」という単語を使うと思いますが、中には違う場合もあるかも知れません。
 そのときは、その名前を使って、テンプレートスタイルシート内を「Ctrl」+「F」画面内検索で探します。
 青字部分「id」が、時々「class」と書かれている場合もあります。

<div id="header">#header
<div class="header">.header


 スタイルシート側では「#」か「.」で表されます。間違えないように注意してください。

 見つけたら、まずは「padding」と言う記述がないか確認してみてください。
 paddingとは、ヘッダー部分内側の余白が「○○px」開いているかを示しています。
 コレをそのままにしておくと、レイアウトが微妙になってしまうので、削除します。



 そのほかにも、中身や「<h1>」タグに、スタイルが指定してある場合があります。探すのが難しい場合は、HTMLをコピペ上書きした後、スタイルシートの方も、以下のサンプルを「スタイルシート記述エリアの一番下部」へコピペして、それをいろいろカスタマイズしてみてください。
 スタイルシートの一番下に書いていれば、上部にもしも同じ「class」や「id」の内容が記述されていても、一番下の内容で上書きされます。(継承されるモノもあるのですが、h1タグにそこまで複雑なスタイルを当てているテンプレートがある可能性は極低いと思います。)

 それでは、以下のサンプルを参考にしてカスタマイズしてみてください。

#header{

}

.header_banner{
padding-top : 10px;
padding-right : 10px;
padding-bottom : 10px;
padding-left : 10px;
}

.header_banner img{

}

.title_h1{
padding-top : 2px;
padding-right : 10px;
padding-bottom : 2px;
padding-left : 10px;
}

.title_h1 h1{
display : inline;
padding-right : 12px;
font-size : 12px;
font-weight : bold;
}

.title_h1 p{
display : inline;
font-size : 12px;
color : #fff;
}
ヘッダー部分の大枠



画像のラッピングdivボックス
余白(上)画像の位置を調節します。
(右)
(下)
(左)


ヘッダーのタイトル画像



元のタイトルとイントロ
余白(上)元タイトルの位置を調節します。
(右)
(下)
(左)


h1タグ
改行しないように
イントロとの隙間
フォントサイズ
太字


イントロ部分
改行しないように
フォントサイズ
フォントカラー



 コレでだいたいタイトル画像が目立って、元のタイトルとイントロ部分は、上の方に押しやられていると思います。
 コレは極基本的な整形をしただけのモノです。
 出来ることはもっとありますが、もっと整形する場合は、以下のコーナーで、いろいろ試してみては如何でしょうか?

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