スポンサーサイト

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



web拍手 by FC2
スポンサー広告 Trackback(-) | Comments(-) | [編集]

タイトルバーを作る方法[FC2]

タイトルバーとは↓↓のことです。
  【見本】  
 

タイトルバーとは

 

私もいろんなサイトを参考にする上でこのタイトルバーはどうなっているのかと悪戦苦闘しました(-Д- *)
テーブルを使っているのか、画像を貼っているのかなどなど・・・・

そんな時パッチさんの"ブログでSEO対策とアフィリエイト"サイト内『FC2でdivタグを使ってタイトルバーを作る方法』へ辿りつきました。

詳細はパッチさんのサイトに記載されていますが、簡単に紹介させて頂きます。


タイトルバーの使い方としては
  • 記事内でタグを使用する
  •  
  • スタイルシートに設定する(初回のみ)
これをするだけで簡単に使用することができちゃいますv(*´∀`*)v


記事内でタグを使用する


記事内でタイトルバーを表示したい文字(タイトル)にタグを使用すると簡単にタイトルバーを表示することができます。

上記【見本】のタイトルバーの場合
    
  <div class="red">タイトルバーとは</div>  

これだけで簡単にタイトルバーを使用することができます♪

後はスタイルシートで設定すると記事中にタイトルバーが表示されます。

スタイルシートに設定する


 
(1)
[管理画面]環境設定の[テンプレート設定]をクリックして開く
 
(2)
少し下にスクロールすると「HTMLの編集」と「スタイルシートの編集」があるので「スタイルシートの編集」の暗号みたいな部分を一番下までスクロールする
 
(3)
一番下までスクロールが出来たら、一番下で改行(<br>を入力)を何度か行う
(元々書かれているものと見分けがしやすい様にする為なのでしなくても大丈夫です)
 
(4)
改行が出来たらその下に下記のタグをコピーし貼り付ける
 
  ≪この下からコピー≫
.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;
}
≪この上までコピー≫
 
(5)
最後に下にある[更新]をクリックして設定終わり


これでスタイルシートの設定は終わりです。

記事を書くときに

  <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;
}
 


この赤文字の『20px』を変更すると空白部分の間隔が変わります。

当サイトでは『20px』のところを『10px』に変更していますので、当サイトとと同じ間隔がいいと思ってくださる方は『10px』にご変更下さい。


追記:hタグでタイトルバーを作る

タイトルバーは、hタグで作るほうがSEO対策やブログを移転する際にいいそうですヽ(*´∀`*)ノ

※hタグは<h1>~<h6>まであり、<h1>が最上位の見出しで、数字が大きくなるにつれ下位の見出しになります。(h6が一番小さい見出しです)

<h1>が一番大きな見出しになりますが、一番大きいからといって連発するとスパムサイトと誤解されるので注意してください。

ドナのサイトの場合は、<h1>はブログタイトル、<h2>記事のタイトルに使用されているので、タイトルバーを作る際<h3>を使用します。

hタグを使用する際は、必ず自分のサイトではどのように使用されているか確認してからにしてください(´д`、)

※確認方法・・・自分のブログのページを開き、右クリック→ソースの表示をクリックします。ソースが表示されるので検索で(Ctrl+F)<h1>から確認してみてください。(他にも確認方法はあります)

スタイルシートに設定するタグ

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

記事を書くとき

  <h3>タイトルバーとは</h3>  






web拍手 by FC2
スポンサーサイト
ブログカスタマイズ Trackback:(1) | Comments:(0) | [編集]

Copyright © 0円から頑張るお小遣い稼ぎ ~現在進行形~ All Rights Reserved. Powered By FC2. 
skin:*cuteblog*   
女性向けホームページ制作 R-web  Template design by フリー素材 blue-green
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。