bloggerの”標準見出し” h2・h3・h4を変更した

bloggerの”標準見出し” h2・h3・h4を変更した mono遊び

bloggerは使いやすいです

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

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

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

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

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

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

bloggerのテンプレートの見出し・小見出し・準見出しはh2・h3・h4

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

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

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

種類も色々ある

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

h1 ➔ サイトのタイトル

テンプレートの”h2””h3””h4”は”見出し””小見出し””準見出し”となっているそうです。

h2 ➔ 見出し
h3 ➔ 小見出し
h4 ➔ 準見出し

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

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

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

h1 ➔ サイトのタイトル
h2 ➔ 記事の日付:見出し
h3 ➔ 記事の名前:少見出し
h4 ➔ コメント    :準見出し
h5 ➔ 無設定
h6 ➔ 無設定

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

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

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

h1 ➔ サイトのタイトル
h2 ➔      :見出し
h3 ➔ 記事の名前:小見出し
h4 ➔      :準見出し
h5 ➔ 記事の日付
h6 ➔ 無設定

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

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

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

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

この方法を行います。

設定方法の手順

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

bloggerの”標準見出し” h2・h3・h4を変更した

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

bloggerの”標準見出し” h2・h3・h4を変更した

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

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

bloggerの”標準見出し” h2・h3・h4を変更した

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

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

bloggerの”標準見出し” h2・h3・h4を変更した

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

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

bloggerの”標準見出し” h2・h3・h4を変更した

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

/* 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>

bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した

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

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

bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した

★h2をdivに変更するだけ。

元  <h2><data:title/></h2>
変更 <div><data:dtitle/></div>

bloggerの”標準見出し” h2・h3・h4を変更した

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

ブログ記事の”h3”を”h2”に変更する。

設定方法

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

bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した

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

bloggerの”標準見出し” h2・h3・h4を変更した

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

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

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

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

bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した

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

bloggerの”標準見出し” h2・h3・h4を変更した

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

bloggerの”標準見出し” h2・h3・h4を変更した

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

bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した

●右側のグレーの部分をクリックし、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;
}

コメントのh4タグ設定をh5に変更する

h4はコメントの設定になっています。
でも、同時に凖見出しも設定にもなっているので、

○記事タイトル。
○項目や見出し
・羅列A
・羅列B

このようにしたい場合。
羅列に凖見出しを使いたいと思うが、コメントと別にしたい場合に有効になります。

上記の方法と同様に、ダッシュボード ➔ テーマ ➔ HTMLの編集 で変更します。
”Ctrl” + ”F”を押し”Search”の画面を出す。
”h4”で検索を行い。h4をh5に書き換えます。

●Ctrl+Fで検索する

bloggerの”標準見出し” h2・h3・h4を変更した

●h4をh5に変更する

bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した
モバイル版:この場所はCSSの設定なので、
コピーして複製し、一つをh5に書き換える。
bloggerの”標準見出し” h2・h3・h4を変更した
ディスクトップ版:この場所はCSSの設定なので、
コピーして複製し、一つをh5に書き換える。
bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した
bloggerの”標準見出し” h2・h3・h4を変更した
 bloggerの”標準見出し” h2・h3・h4を変更した

●書き換えが完了したら”テーマを保存”をクリックして終了。

コメント