スポンサーサイト

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

FC2でdivタグを使ってタイトルバーを作る方法

[ カスタマイズ ] FC2ブログ で カスタマイズ | 2009.12.04

みなさんはブログで記事を書く際にデザインを考えていますか?
やっぱりデザインは大切です。
デザインが変われば、ブログの雰囲気も変わりますし
記事の読みやすさやわかりやすさも変わってきます。

そこで今回はみなさんの記事の装飾のお助けとして
タイトルバーの作り方をご紹介したいと思います。

あと、SEOの観点からスタイルシートを使った方が
HTMLタグが少なく済みますし、すっきりしますので
テーブルタグなどは使わないで、スタイルシートから呼び出す方法をご紹介します。
その方が、一度設定してしまえればずっと使えるので便利ですしねっ。

タイトルバーは簡単


【例】
●●●

↑ 上のこのタイトルバー、どこかで見たことないですか?
そうです。もうすで1回使っていますが
私がブログ内の記事でいつも使っているものですねっ。

一体どのようにやっているかというと

<div class="red">●●●</div>

このようにdivタグという簡単なタグで作っているだけなんです。
なんでそれだけで太字になったり、赤い線が入ったりするかというと
そのような設定は記事の中でではなく、
すべてスタイルシートの中でやっているからです。

スタイルシートで設定しよう


ではFC2ブログでのスタイルシートの設定方法をご説明します。

  1. 「環境設定」の「テンプレートの設定」をクリック
  2. 暗号みたいなものが書かれた大きなスペースが上と下に存在しますよねっ。上は「HTMLの編集」ですので、下の「スタイルシートの編集」部分を見てください。
  3. 長い暗号の文章が書かれていますので、一番下までスクロールして下さい。
  4. 一番下までスクロールしましたら、一番下で「改行」を何度か行ってください。
    (別にしなくてもいいですが、元々書かれているものとスペースを空けることによって管理しやすくするためです。)
  5. 改行しましたら、どこでもいいので下記の灰色の中に書かれているものをコピーして貼り付けて下さい。
    .red{
    font-size: 16px;
    color: #202020;
    padding: 3px 0px 3px 20px ;
    font-weight : bold ;
    border-left: solid 15px #c8575c;
    border-bottom: solid 1px #c8575c;
    background: #ffffff;
    }
  6. あとは「更新」ボタンをクリックすれば終了です。

どうですか?できましたか?
もしできましたら、みなさんのブログで記事を書く時に ↓

<div class="red">●●●</div>

を挿入してみてください。
すると成功していれば、私がいつも使っているタイトルバーが
みなさんの記事の中にできるはずです。
「●●●」のテキスト部分には
好きな文章を書いてくださいねっ。

いろんな色のタイトルバーを作ってみよう


私のところではいつも赤色のタイトルバーを使っていますよねっ。
しかし、何色にでも変更できます。

.red{
font-size: 16px;
color: #202020;
padding: 3px 0px 3px 20px ;
font-weight : bold ;
border-left: solid 15px #c8575c;
border-bottom: solid 1px #c8575c;
background: #ffffff;
}

赤い色の付いた部分がありますよねっ。
これは色のコードを表わしています。
ですので、別の色のコードに変更すればどんな色にでも変更することができます。
色のコードを自由に作れるツールは以前紹介しましたのでそちらを参照)

文字の大きさを自由に変更できる


文字の大きさというのは例で挙げたものだと「●●●」の部分です。
またまた上の灰色の部分を使って説明しますが
2行目の部分に下記が書かれていますよねっ ↓

font-size: 16px;

この数字の「16」の部分を変更することによって
お好みの文字の大きさに調節することができます。

数字を大きくすれば、文字は大きくなり
数字を小さくすれば、文字は小さくなります。

文字の色を変更する


文字の色というのはタイトルバーの中に表示されるテキストのことですねっ。
例で挙げたものだと「●●●」の部分のことです。

color: #202020;

というのが灰色の中の3行目にありますので
赤い色の部分の色コードを変更することによって
自由にテキストの色を変更することができます。

背景の色を変更する


では今度は背景の色を変更する方法をご紹介します。
私のブログの記事内は背景が白色ですので、
divタグ内に表示される背景色を白色に設定していますが
自由に変更することができます。

ですので

background: #ffffff;

赤色の部分は背景の色を示す部分ですので、
この赤色の部分を変更したい色のコードに変えてください。

いろんな種類のタイトルバーを作ろう


.red{
font-size: 16px;
color: #202020;
padding: 3px 0px 3px 20px ;
font-weight : bold ;
border-left: solid 15px #c8575c;
border-bottom: solid 1px #c8575c;
background: #ffffff;
}

赤色の部分は、設定したものを識別するための名前であって
タイトルバーが赤色だから「red」というわけではありません。
ですので、実は「red」の部分は半角英数字であれば何でもオッケーなんです。

しかし、
もし「red」の部分を、例えば「aiueo」に変更した場合

<div class="aiueo">●●●</div>

という風に、記事の中に挿入するdivタグの中の赤色部分も「aiueo」に変更してください。

 【注意点】
「red」の前にある「.(半角)」は必ず必要ですので、変更する場合は消してしまわないように気をつけてください。

ということで
「red」の部分をいろいろ変えて
設定(タイトルバーの色、文字の大きさや色、背景色など)を変えたものを
スタイルシートの中にたくさん作っておけば、
たくさんのタイトルバーが使えますよっ。

●●●

●●●

●●●

●●●


一度作ってしまえば、何度でも簡単に使える


どうですか?みなさん成功しましたか?
初心者の方にもできるだけわかりやすくするために
丁寧にご説明したつもりですが、失敗された方はいませんでしたか?
もし成功していれば嬉しいです。

これで一度設定してしまえば、いつでも何回でも簡単に使うことができます。

注意点


この方法は記事内で設定するのではなく
テンプレートのスタイルシート内に設定しておく方法です。
ですので、テンプレートを別のものに変更すると
使えなくなってしまいます。

ですので、その場合は
新しく変更したテンプレートのスタイルシート部分に
同じように挿入してください。
すると新しいテンプレートでもきちんと表示されます。

いつでも変更可能


たくさんの記事の中で使ってから
「色を変更したい」「文字の大きさを変えたい」という場合でも
スタイルシートに挿入した部分を変更すれば
一瞬にして挿入したすべてに反映されます。

ですので、いくら使っても
あとで何度でも変更可能ですのでとても便利です。



ということで

今回はFC2ブログでのタイトルバーの作り方をご説明しました。
とっても便利な方法ですのでぜひ使ってみてください。
あとdivを使わずにh3タグでタイトルバーを作る方法がありますので
そちらも参考にしてみてください。

もしわからないことなどございましたら
コメント欄から質問等お願いします。
関連記事
人気ブログランキング この記事がお役に立てましたら1クリックお願いします

HTMLの文法は重要ではないが基本はしっかり | スモールキーワードの強化でロングテール対策の最適化
はじめまして
始めて拝見させていただきました。
質問ですがタイトルバーと下にある記事の間にどうしてもスペースがあいてしまいます。
どうすればスペースをなくすことができるでしょうか?
私は<h3>タグで使っております。
【2010/11/01 18:24】 | タイトルバーさん
 【タイトルバーについて】

返事が遅くなってしまい申し訳ありません。

スタイルシートで
margin-bottom:0;
を追加すればスペースをなくすことができると思います。
【2010/11/06 23:46】 | パッチさん
このコメントは管理者の承認待ちです
【2013/03/07 20:42】 | さん









管理者にだけ表示を許可する
|
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。