月無ことのは日記

読者です 読者をやめる 読者になる 読者になる

月無ことのは日記

美少女ブロガー、月無ことのはちゃん(@tukinasikotonoh)の雑記ブログ!

月無ことのは日記

【SEO対策】見出し部分のh3をh2へと一括で置換する方法

【最終更新日2016年11月20日】

id:sea295x2さんからブコメにてご指摘を頂きました、ありがとうございます!内容を一部追記しております。

 どうも、月無ことのは(@tukinasikotonoh)です。

 今回は最近僕が見つけたはてなブログのちょっとした見出しテクニックを紹介していきたいと思います。

 本格的にはてなブログで記事を書き始めるようになったの10/8からなので、今日でちょうど1カ月になります。

 「なにか新しいことを始めるときは先人の知恵を借りる」というのが僕のモットーなのでこの1カ月は色んな方のブログを参考にして、自分のブログ「月無ことのは日記」をカスタマイズしてまいりました。

 日々、ブログのカスタマイズをしていると新しい発見がいくつもあって非常に面白いです。

 僕は前職でHTMLやCSSといったwebページを作成するマークアップ言語を使用していましたが、これがとても苦手でした。

 閉じタグを忘れるとエラーを吐くし、ChromeやFirefoxで表示が大丈夫だと思ってもIEやSafariで表示崩れを起こしたりなどマークアップ言語は苦労がいっぱいです。

 ですが、はてなブログのカスタマイズは比較的簡単でグーグル検索をすれば誰でも簡単にブログのカスタマイズをすることが可能となっています。

 今後もブログのカスタマイズには注力していくつもりですが、その中で得た知識をこのブログで皆さんに紹介していきたいと思います。

 前置きが長くなりましたが、それでは「見出し部分のh3をh2へと一括で置換する方法」を紹介していきます。

見出しをh2に置換する目的

www.pojihiguma.com

 はてなブログで1000を超える記事を作成したポジ熊さんのブログで上記の記事を見つけたのが今回のテクニックを模索することになった大きな要因です。

 上記の記事でポジ熊さんはh2タグを使用することで下記の様なメリットがあると仰っていました。

読者が見やすい
検索エンジンが見やすい
引用元:ポジ熊の人生記

 それまでは僕はてっきりはてなブログの「編集見たままモード」で使用される

「大見出し」はてっきり「h2タグ」だと勘違いしていました。

f:id:tukinasikotonoha:20161108211058j:plain 

 しかし、はてなブログでは「大見出し」を使用すると「h3タグ」が自動挿入される仕組みになっているのです。

f:id:tukinasikotonoha:20161108215842j:plain

 

 また、はてなブログの記事内では記事タイトル部分がh1に該当します。

f:id:tukinasikotonoha:20161108211336j:plain

 そして、そのまま記事を作成すると「h2タグ」をすっ飛ばして「h3タグ」が使用されてしまうのです。

 これだとGoogle検索エンジンのbotが記事をスムーズに読みこんでくれない原因の1つとなってしまいます。

 かといって、今まで作成した記事を全て手動で「h3からh2へと書き換える」のは相当な手間になってしまうと考えられます。

 最初、上記のポジ熊さんの記事を読んだ時は「SEO効果有りそうだけど絶対手間だろうな~」と思い着手する気にはなりませんでした。

 ポジ熊さんも記事内で下記の様に仰っていたのでどうにかしてこの方法を楽にすることができないかと考えました。

文字列変換ツール(フリーソフトなど)でhタグを一律変換とかできるのかな。わかりません... 

引用元:ポジ熊の人生記

 ですが、ここで前職のHTMLコーダー経験が役に立ったのです!

まずは記事HTMLのバックアップを取ろう

 はてなブログを使っている人なら分かると思いますが記事作成のモードは大きく分けて3つ存在しています。

 デフォルトでよく使用されるのが「編集見たままモード」ですね。

f:id:tukinasikotonoha:20161108212430j:plain

 ※今回は一例として下記の記事の見出しをh3からh2へと置換していきます。(僕が以前作成した記事ですね。)

www.tukinasikotonoha.com

  今回の置換作業を実施する際は「HTML編集モード」を使用していきます。

f:id:tukinasikotonoha:20161108212609j:plain

 これを「CTRL+A」で全選択。

 その後に「CTRL+C」コピー。

f:id:tukinasikotonoha:20161108212725j:plain

 テキストエディタにコピーして保存。

 ※バックアップファイルとなるので必ず保存しておきましょう。

f:id:tukinasikotonoha:20161108212901j:plain

f:id:tukinasikotonoha:20161108212932j:plain

今回使用したテキストエディタツール

 今回の一括置換はwindows標準のメモ帳でもおそらくできますが、僕は使いやすさを重視して「秀丸」というテキストエディタを使用しています!

(軽いし使いやすいよ!)

www.vector.co.jp

置換作業開始

 それではいよいよh3をh2へと置換していく作業の開始です。

 記事のソースを貼りつけてエディタで保存をした後はキーボードの「CTRL+R」を押しましょう。

 すると秀丸エディタ内で下記画像の様なウィンドウが出現します。

  •  検索の文字入力欄に→「h3」
  •  置換の文字入力欄に→「h2」

 このように入力した後は「全置換」のボタンを押します。

f:id:tukinasikotonoha:20161108213805j:plain

 すると、貼りつけたソース内部の「h3」が全て「h2」へと一瞬で生まれ変わるのです!!こりゃ便利!!!

 ※今回は11個の見出しがあったので閉じタグの「h3」も合わせて合計22個のh3がh2と置換されています。

f:id:tukinasikotonoha:20161108220200j:plain

一括置換したソースをはてなブログに貼りつけ

 今度はh2へと入れ替えたソースをはてなブログの「HTML編集モード」へと持っていきましょう。

 先ほど同様に「CTRL+A」で全選択、「CTRL+C」でコピー。

f:id:tukinasikotonoha:20161108214346j:plain

 これを該当記事の「HTML編集モード」へと貼りつけていきます。

 ※下記画像(1枚目)では分かりやすいように元からあったソースを消しています。

(事前にソースのバックアップを取るのが大事だよ!)

f:id:tukinasikotonoha:20161108214454j:plainf:id:tukinasikotonoha:20161108214517j:plain

 ※貼り付けた後はプレビューモードを使って表示崩れが起きていないか確認するのが無難です。

 問題無ければ「記事を更新する」ボタンを押します。

ビフォー&アフター

f:id:tukinasikotonoha:20161108215002j:plain

 上記画像のように見出しのデザインが全て変更されていれば作業は完了です。

 ※はてなブログで使用しているテンプレートによって見出しのデザインは異なるので、各テンプレート毎に「h2タグ」のCSSが存在しているか確認しておいてください!

 

 

 これで「見出し部分のh3をh2へと一括で置換する方法」は完了となります。

 自己流のやり方なので、解説部分で「分かりにくい!!」という部分などあればTwitterなどで気軽にお申し付けくださいませ。

 ※ちなみに僕はこれから今まで書いた記事を一括置換していく作業に入ります。(笑)

 手作業よりは遥かに楽ですが、記事数が多い場合は音楽を聴きながら進めていくと良いでしょう!

追記

h3がh2になるわけだけど、h1,h2,h4になってもSEO的に問題は無いのかな?

 ブコメにて上記のようなご指摘を頂きました。id:sea295x2さんの仰る通りです。

 僕が紹介した上記の一括置換を活用する場合は、h3⇒h2の置換と合わせてh4⇒h3への置換、h5⇒h4への置換も同時に行って頂けると幸いです。

 ご指摘頂いたid:sea295x2さん、ありがとうございます!

 

 それでは!

 

おわり。

関連記事

【お年玉の使い道】ココナラでイラスト依頼をしてオリジナルのアイコン作成!

【SEO対策】記事下に関連記事を設置して内部施策!

【ブログカスタマイズ】はてなブログのヘッダー画像の余白を非表示にする方法