bloggerの”標準見出し” ｈ２・ｈ３・ｈ４を変更した-hibizip

bloggerは使いやすいです

こんにちわ。
blogger使っていますか？

私はまだまだブログ駆け出し中なので、どっぷりbloggerです。
wordpressがいいというので、アカウント買って使ってみているが、blogger程優しくない！！

でも、わからないことはwordpressの方が検索してもいろいろ出ている。
（専門用語が多くて理解できませんが・・・）

なので、やっぱり私は”blogger”

テンプレートやテーマ、ウィジットもあまり弄らなくても、使えるし便利なんですが、
ちょっとわからないことや、ちょっと弄りたい時に、検索してもbloggerは需要がないのか
あまりヒットしません。

いろいろなところから情報を集めてやってみたことをまとめて、書いておこうと思います。

bloggerのテンプレートの見出し・小見出し・準見出しはｈ２・ｈ３・ｈ４

ブログを書くときに”HTMLモード”で書き込みますか？できたら、そっちの方が格好いいし、無駄がないらしいですが、素人なので私は”作成モード”で書き込んでいます。

”作成モード”で書き込む画面では、”　標準　”の文字のある、見出しがあると思います。
これが、”ｈダグ”を言われるものにリンクしているみたいです。

”hタグ”は専門的にはよく知りませんが、検索の際の見出しに使われる部分なので、サイトの評価や検索ではとても重要らしいです。

種類も色々ある

種類も”ｈ１”から”ｈ６”まであって、”ｈ１”は基本サイトのタイトルになっているそうです。

ｈ１　➔　サイトのタイトル

テンプレートの”ｈ２””ｈ３””ｈ４”は”見出し””小見出し””準見出し”となっているそうです。

ｈ２　➔　見出し
ｈ３　➔　小見出し
ｈ４　➔　準見出し

これだけなら弄る必要がないですが、問題があります。

bloggerの”hタグ”の設定はｈ２が日付

bloggerの標準設定なんですが、

ｈ１　➔　サイトのタイトル
ｈ２　➔　記事の日付：見出し
ｈ３　➔　記事の名前：少見出し
ｈ４　➔　コメント　：準見出し
ｈ５　➔　無設定
ｈ６　➔　無設定

”hタグ”は１から順に重要度が高くなっています。

そのため、このサイトのような記録サイトは、記事とタイトルに関連性がないものはあまり検索に効果がなく、記事名よりも記事日付のほうが重要度が高くなってしまっています。

そのため、順序を弄る必要が有ります。

ｈ１　➔　サイトのタイトル
ｈ２　➔　　　　　　：見出し
ｈ３　➔　記事の名前：小見出し
ｈ４　➔　　　　　　：準見出し
ｈ５　➔　記事の日付
ｈ６　➔　無設定

設定を弄って、このように変更します。

記事の日付からhタブを外す

まず、ｈ２が記事の日付になっているのでこれを外してしまいます。
日付が新しい方が情報として欲しいかもしれませんが、それよりもないようですよね。
hタグをｈ４とかｈ５とかにしたいですが、設定がよくわからないし、記述の順番もあるみたいなので、書き直しが結構面倒みたいです。素人の私には手が出せないので参考サイト同様に、

<ｈ２></h2>を探してそれを<div></div>に変更する

この方法を行います。

設定方法の手順

●bloggerの”ダッシュボード”を開き”テーマ”をクリックする

●画面中央にある”HTMLの編集” をクリックする

●画面中央にHTML文章が表示されるので、どこかをクリックして選択をする。

その上で、”CTRL”＋”F”を押す。するとSearch画面が出る。

●Search画面に”ｈ２”と入力して”Enter”を押す。

HTML文章の中でｈ２が書かれた場所がマークされ表示される。
＊上から検索して一番上のが表示されるみたい。次を表示したいときは、再度Search画面上を選択しEnterで可能となる。他の方法があれば楽なんですが、わかりません。

●必要に応じて<h2>を変更していきます。

★はじめに出てくる。ｈ２の文字ですが。この文章なら、ｈ２を削除すれば大丈夫です。元　<Group description=”Date Header” selector=”h2.date-header”>
変更<Group description=”Date Header” selector=”.date-header”>

★Headingsの設定にｈ２が指定されています。これは文字のfontやcolorしているだけなのでいいですが、h2.date-headerと”date-header”の指定になるので、混乱を避けるため”ｈ２”を消しておきます。＃両方共消しても大丈夫だと思います。

/* Headings
———————————————– */
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);

margin: 0 0 .5em;
}

h2.date-header {
font: $(date.font);
color: $(date.text.color);
}

★h2をdivに変更します。 995と1349に2箇所ありました。

元　<h2 class=’date-header’><span><data:post.dateHeader/></span></h2>
変更<div class=’date-header’><span><data:post.dateHeader/></span></div>

★ｈ２をdivに変更し、titleをつけておくと、編集が出来る。2055と2108で2箇所

元　　<h2 class=’title’><data:title/></h2>
変更　<div class=’data-title’><data:title/></div>

★ｈ２をdivに変更するだけ。
元　　<h2><data:title/></h2>
変更　<div><data:dtitle/></div>

一番下まで行ったら、もう一度見直して、変更したほうが良さそうなところはしておく。これで日記の日付がｈ２ではなくなり、divタブの”date-titile”で設定が変更可能となった。

ブログ記事の”ｈ３”を”ｈ２”に変更する。

設定方法

★あまり難しいことはない。とにかくｈ３を検索してｈ２にすべてすればいいだけ。ある画像だけ載せておく。6箇所ありました。

★最後に”テーマを保存”をクリックして保存する

＊　変更箇所は”テーマ”の中の”テンプレート”の種類によって場所が違うと思います。今回はシンプルプレートで行いましたが、カスタマイズの仕方によって、ちょっと違う場所もありましたので、健康確認をしながらやってみてください。

CSSで”hタグ”の設定を行う

hタグの付け替えが終了したので、CSSにてｈタグの文字の大きさや色指定、装飾を指定します。

●”戻る”をクリックして、ダッシュボードのテーマの画面に戻る。

●今度は”カスタマイズ”をクリックする。

●左側のメニューの”上級者向け”をクリック

●表示されたサブメニューの一番下までスライドさせ”CSSを追加”をクリックする。

●右側のグレーの部分をクリックし、hタグ設定をどこかからコピーして貼り付けるか、自分で工夫して作成する。

下のは私が使っているCSSです。参考に使ってみてください。

h1{                          　　　　　　　　　       /*ブログタイトル：　　*/
color:           #61210B0         ; /*文字色*/
background:      #00000000          ; /*背景色*/
border-top:      #352307 0px solid; /*上線の太さ、種類、色*/
border-left:     #61210B 0px solid; /*左線の太さ、種類、色*/
border-right:    #2ECCFA 0px solid; /*右線の太さ、種類、色*/
border-bottom:   #352307 0px solid; /*下線の太さ、種類、色*/
font-size: 30px;　　　　　　　　　　 /*文字の大きさ*/
font-weight: bold;　　　　　　　　　 /*文字、種類、色*/
margin: 5px 0;　　　　　　　　　　　 /*　　　　　　　　　*/
padding: 5px 0 5px 10px;　　　　　　 /*上下間の間隔*/
}

h2{　　　　　　　　　　　　　　　　　 /*記事のタイトル：見出し*/
color:           #FE642E          ;
background:      #00000000      ;
border-top:      #352307 0px solid;
border-left:     #61210B 0px solid;
border-right:    #2ECCFA 0px solid;
border-bottom:   #352307 2px solid;
font-size: 26px;

font-weight: bold;
margin: 5px 0;
padding: 5px 0 5px 10px;
}

h3{　　　　　　　　　　　　　　　　　　 /*　　　　：小見出し*/
color:           #61210B          ;
background:      #FFFFFF          ;
border-top:      #352307 0px solid;
border-left:     #61210B 6px solid;
border-right:    #2ECCFA 0px solid;
border-bottom:   #352307 0px solid;
font-size: 22px;
font-weight: bold;
margin: 5px 0;
padding: 5px 0 5px 10px;
}

h4{　　　　　　　　　　　　　　　　 /*コメント関係：準小見出し*/
color:           #610B0B          ;
background:      #ffffff          ;
border-top:      #352307 0px solid;
border-left:     #8A0808 6px solid;
border-right:    #2ECCFA 0px solid;
border-bottom:   #352307 0px solid;
font-size: 14px;

font-weight: bold;
margin: 5px 0;
padding: 0px 0 5px 10px;
}